@@ -144,10 +523,9 @@ export default function Hero() {
initial="hidden"
animate="visible"
variants={heroContainer}
- className="grid items-start gap-sp-8 lg:grid-cols-[minmax(0,1.1fr)_minmax(340px,0.9fr)] lg:gap-sp-10"
+ className={LAYOUT_CLASSES[variant.layout]}
>
-
- {/* Status badge with glow */}
+
- Available for selected builds
+ {variant.status}
- Produtos conectados, integracoes criticas e entrega ponta a ponta
+ {variant.chip}
- {/* Eyebrow */}
- Evandro Fonseca Junior | Engenheiro de software full-stack
+ {variant.eyebrow}
- {/* Main heading with cinematic reveal */}
- Engenharia de software para sistemas que nao podem falhar.
+ {variant.headline}
- {/* Subtitle */}
- Ajudo empresas com produtos conectados, integracoes complexas e
- operacoes criticas a transformar arquitetura confusa em software
- estavel, mais rapido de evoluir e muito mais facil de operar.
+ {variant.subtitle}
- {/* Key points with staggered reveal */}
- {HERO_POINTS.map((point, i) => (
+ {variant.points.map((point, i) => (
- {/* CTAs with magnetic effect */}
- Agendar conversa tecnica
+ {variant.cta}
- {/* Footer info with reveal */}
- {/* Aside card with cinematic entrance */}
- {/* Top glow line */}
- Why this positioning works
+ {variant.sideLabel}
- Menos atrito entre produto, engenharia e operacao.
+ {variant.sideTitle}
- Entro onde a complexidade cresce e ajudo a devolver clareza,
- ritmo de entrega e confiabilidade para o sistema e para o time.
+ {variant.sideText}
+
+ Agendar no WhatsApp: {whatsAppDisplay}
+
- {PROOF_ITEMS.map((item, index) => (
+ {variant.proof.map((item, index) => (
- {/* Scroll indicator */}
(0);
@@ -29,7 +22,7 @@ export default function CustomCursor() {
if (!isVisible) setIsVisible(true);
});
},
- [cursorX, cursorY, isVisible]
+ [cursorX, cursorY, isVisible],
);
useEffect(() => {
@@ -57,7 +50,7 @@ export default function CustomCursor() {
function attachHoverListeners() {
const hoverables = document.querySelectorAll(
- 'a, button, [role="button"], input, textarea, select, [data-cursor]'
+ 'a, button, [role="button"], input, textarea, select, [data-cursor]',
);
for (const el of hoverables) {
el.addEventListener("mouseenter", handleElementEnter as EventListener);
@@ -89,7 +82,10 @@ export default function CustomCursor() {
}, [handleMouseMove]);
// Don't render on touch devices
- if (typeof window !== "undefined" && !window.matchMedia("(pointer: fine)").matches) {
+ if (
+ typeof window !== "undefined" &&
+ !window.matchMedia("(pointer: fine)").matches
+ ) {
return null;
}
@@ -105,8 +101,8 @@ export default function CustomCursor() {
{hoverText && (
(null);
const mouseRef = useRef({ x: 0, y: 0 });
@@ -32,10 +40,13 @@ function ParticleField({ count = 2000 }: { count?: number }) {
return s;
}, [count]);
- const handlePointerMove = useCallback((e: { clientX: number; clientY: number }) => {
- mouseRef.current.x = (e.clientX / window.innerWidth) * 2 - 1;
- mouseRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
- }, []);
+ const handlePointerMove = useCallback(
+ (e: { clientX: number; clientY: number }) => {
+ mouseRef.current.x = (e.clientX / window.innerWidth) * 2 - 1;
+ mouseRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1;
+ },
+ [],
+ );
useFrame((state) => {
if (!mesh.current) return;
@@ -107,22 +118,61 @@ function ParticleField({ count = 2000 }: { count?: number }) {
);
}
-function FloatingGeometry() {
+function FloatingGeometry({ variant }: { variant: HeroSceneVariant }) {
const meshRef = useRef(null);
const mesh2Ref = useRef(null);
const mesh3Ref = useRef(null);
+ const layout = {
+ command: {
+ a: [4, 1.5, -3] as [number, number, number],
+ b: [-5, -2, -4] as [number, number, number],
+ c: [2, -3, -5] as [number, number, number],
+ scale: [1.2, 0.8, 1.5] as [number, number, number],
+ },
+ launch: {
+ a: [3.8, 2.1, -3] as [number, number, number],
+ b: [0, -1.4, -4] as [number, number, number],
+ c: [-3.8, -2.6, -5] as [number, number, number],
+ scale: [0.9, 0.9, 1.8] as [number, number, number],
+ },
+ rescue: {
+ a: [-3.6, 1.2, -3] as [number, number, number],
+ b: [3.6, 1.2, -4] as [number, number, number],
+ c: [0, -2.8, -5] as [number, number, number],
+ scale: [1, 1, 1.4] as [number, number, number],
+ },
+ signal: {
+ a: [-4.2, -1, -3] as [number, number, number],
+ b: [0.2, 1.6, -4] as [number, number, number],
+ c: [4.2, -0.6, -5] as [number, number, number],
+ scale: [0.7, 0.7, 1.2] as [number, number, number],
+ },
+ diagnostic: {
+ a: [4.6, 0.6, -3] as [number, number, number],
+ b: [-3.5, 1.8, -4] as [number, number, number],
+ c: [-1.2, -2.8, -5] as [number, number, number],
+ scale: [1.4, 0.7, 1.1] as [number, number, number],
+ },
+ portrait: {
+ a: [3.2, 0.4, -3] as [number, number, number],
+ b: [4.8, 2.1, -4] as [number, number, number],
+ c: [-3.6, -2.4, -5] as [number, number, number],
+ scale: [1.8, 0.5, 1.1] as [number, number, number],
+ },
+ }[variant];
+
useFrame((state) => {
const t = state.clock.elapsedTime;
if (meshRef.current) {
meshRef.current.rotation.x = t * 0.15;
meshRef.current.rotation.y = t * 0.1;
- meshRef.current.position.y = Math.sin(t * 0.4) * 0.3;
+ meshRef.current.position.y = layout.a[1] + Math.sin(t * 0.4) * 0.3;
}
if (mesh2Ref.current) {
mesh2Ref.current.rotation.x = t * 0.1;
mesh2Ref.current.rotation.z = t * 0.12;
- mesh2Ref.current.position.y = Math.cos(t * 0.3) * 0.5;
+ mesh2Ref.current.position.y = layout.b[1] + Math.cos(t * 0.3) * 0.5;
}
if (mesh3Ref.current) {
mesh3Ref.current.rotation.y = t * 0.08;
@@ -133,13 +183,19 @@ function FloatingGeometry() {
return (
<>
-
-
+ {variant === "diagnostic" ? (
+
-
-
+ {variant === "launch" ? (
+
-
-
+ {variant === "rescue" ? (
+