Matt
2d5e588b2e
All checks were successful
Build & Push / build-and-push (push) Successful in 1m43s
Complete copy overhaul across all pages (EN + FR): - Hero: "Your website. Your software. Your entire digital world." - Services: "Design. Build. Grow." with reordered pillars - Philosophy: "We do things differently" — craft leads, ownership closes - About: remove all Côte d'Azur/Riviera references, new story narrative - Services page: less jargon, outcome-focused language, honest AI claims - SEO metadata: includes all three pillars (design, AI, infrastructure) - Trust bar, CTA, footer, configurator, case study CTAs all updated - French translations updated to match all English changes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { staggerContainer, revealVariants, viewportOnce } from '@/lib/animations';
|
|
|
|
// ─── Animation variants ────────────────────────────────────────────────────────
|
|
|
|
const ease = [0.16, 1, 0.3, 1] as const;
|
|
|
|
const eyebrowVariants = {
|
|
hidden: { opacity: 0, y: 16 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.5, ease },
|
|
},
|
|
};
|
|
|
|
const headlineVariants = {
|
|
hidden: { opacity: 0, y: 24 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.65, ease, delay: 0.1 },
|
|
},
|
|
};
|
|
|
|
const subtitleVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.6, ease, delay: 0.2 },
|
|
},
|
|
};
|
|
|
|
const ruleVariants = {
|
|
hidden: { scaleX: 0 },
|
|
visible: {
|
|
scaleX: 1,
|
|
transition: { duration: 0.7, ease, delay: 0.35 },
|
|
},
|
|
};
|
|
|
|
// ─── Component ─────────────────────────────────────────────────────────────────
|
|
|
|
export default function ServicesHero() {
|
|
return (
|
|
<section
|
|
className="bg-surface pt-32 pb-20"
|
|
aria-label="Services hero"
|
|
>
|
|
<div className="container mx-auto px-6">
|
|
<motion.div
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
animate="visible"
|
|
className="flex flex-col items-center text-center"
|
|
>
|
|
{/* Eyebrow */}
|
|
<motion.span
|
|
variants={eyebrowVariants}
|
|
className="label-md text-primary mb-5"
|
|
>
|
|
Our Services
|
|
</motion.span>
|
|
|
|
{/* Headline */}
|
|
<motion.h1
|
|
variants={headlineVariants}
|
|
className="font-serif font-semibold tracking-headline text-on-surface text-5xl md:text-6xl lg:text-7xl max-w-4xl leading-[1.05]"
|
|
>
|
|
Everything your business{' '}
|
|
<span className="text-gradient">needs online.</span>
|
|
</motion.h1>
|
|
|
|
{/* Subtitle */}
|
|
<motion.p
|
|
variants={subtitleVariants}
|
|
className="mt-6 text-lg text-outline leading-relaxed max-w-2xl"
|
|
>
|
|
We design custom websites, build purpose-built software, and manage
|
|
the infrastructure behind it all — one team, one standard of
|
|
quality, nothing outsourced.
|
|
</motion.p>
|
|
|
|
{/* Decorative rule */}
|
|
<motion.div
|
|
variants={ruleVariants}
|
|
className="mt-10 origin-left w-16 h-px bg-gradient-cta"
|
|
aria-hidden="true"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|