Evandro Fonseca Junior
b791b7de9e
Hero: replace particle field with cobe globe (Capricorn view, multi-axis drag, reduced-motion safe), telemetry HUD with pointer parallax, particle text build effect, Space Grotesk display font. SEO: short titles with template, PT-BR accents, twitter cards on dynamic cases, escaped JSON-LD via lib/jsonld.ts, CSP report-only, 25 service FAQs answer-first. Design: fix TW4 layered reset killing spacing utilities, literal @theme tokens, mobile hero overflow, header overlap, empty case cards. Remove framer-motion (unified on motion/react), header version badge, phone number from hero CTA. Production build verified (24 static pages).
109 lines
2.6 KiB
TypeScript
109 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { motion, type Variants } from "motion/react";
|
|
import type React from "react";
|
|
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
|
|
import { DrawLine } from "./animations/DrawLine";
|
|
import { TextDiffuseReveal } from "./animations/TextDiffuseReveal";
|
|
import { Reveal } from "./Reveal";
|
|
|
|
interface SectionProps {
|
|
id?: string;
|
|
eyebrow?: string;
|
|
title: string;
|
|
description?: string;
|
|
dark?: boolean;
|
|
aside?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
disableChildrenAnimation?: boolean;
|
|
}
|
|
|
|
export const Section = ({
|
|
id,
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
dark,
|
|
aside,
|
|
children,
|
|
disableChildrenAnimation = false,
|
|
}: SectionProps) => {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
|
|
|
|
const containerVariants: Variants = {
|
|
hidden: {},
|
|
visible: {
|
|
transition: {
|
|
delayChildren: 0.02,
|
|
staggerChildren: 0.08,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants: Variants = {
|
|
hidden: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 18 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: shouldReduceMotion
|
|
? { duration: 0.25, ease: [0.16, 1, 0.3, 1] }
|
|
: {
|
|
type: "spring",
|
|
stiffness: 60,
|
|
damping: 20,
|
|
mass: 0.85,
|
|
},
|
|
},
|
|
};
|
|
|
|
return (
|
|
<section id={id} className={baseClass}>
|
|
<div className="ds-section-shell">
|
|
<motion.div
|
|
className="ds-section-header"
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, amount: 0.2 }}
|
|
variants={containerVariants}
|
|
>
|
|
<div className="ds-section-meta">
|
|
{eyebrow && (
|
|
<motion.p className="ds-eyebrow" variants={itemVariants}>
|
|
{eyebrow}
|
|
</motion.p>
|
|
)}
|
|
|
|
<h2 className="ds-section-title">
|
|
<TextDiffuseReveal text={title} />
|
|
</h2>
|
|
|
|
{description && (
|
|
<motion.p
|
|
className="ds-section-description"
|
|
variants={itemVariants}
|
|
>
|
|
{description}
|
|
</motion.p>
|
|
)}
|
|
|
|
<DrawLine delay={0.16} />
|
|
</div>
|
|
|
|
{aside && (
|
|
<motion.aside variants={itemVariants}>{aside}</motion.aside>
|
|
)}
|
|
</motion.div>
|
|
|
|
{!disableChildrenAnimation ? (
|
|
<Reveal y={40} duration={0.9} delay={0.12}>
|
|
<div>{children}</div>
|
|
</Reveal>
|
|
) : (
|
|
<div>{children}</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|