61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
'use client'
|
||
|
||
import {motion} from 'framer-motion'
|
||
import Link from 'next/link'
|
||
|
||
export default function ReferralSection() {
|
||
return (
|
||
<section id="referral" className="py-24 px-4 bg-background/80 text-foreground">
|
||
<div className="max-w-3xl mx-auto text-center">
|
||
<motion.h2
|
||
className="text-3xl md:text-4xl font-bold mb-2"
|
||
initial={{opacity: 0, y: 10}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4}}
|
||
>
|
||
Weiterempfehlen lohnt sich
|
||
</motion.h2>
|
||
|
||
<motion.div
|
||
className="w-12 h-[2px] mt-2 mb-6 bg-amber-500 mx-auto"
|
||
initial={{opacity: 0, x: -20}}
|
||
whileInView={{opacity: 1, x: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.1}}
|
||
/>
|
||
|
||
<motion.div
|
||
className="text-sm md:text-base mb-8 text-muted-foreground space-y-4"
|
||
initial={{opacity: 0, y: 10}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.4, delay: 0.2}}
|
||
>
|
||
<p>
|
||
Du empfiehlst uns weiter und dein Kontakt wird Kunde?
|
||
Als Dank erhältst du <strong>10 % Rabatt</strong> auf dein nächstes Projekt bei uns.
|
||
</p>
|
||
<p>
|
||
Einfach, fair und lohnend – ideal für alle, die mit unserer Arbeit zufrieden sind.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{opacity: 0, y: 20}}
|
||
whileInView={{opacity: 1, y: 0}}
|
||
viewport={{once: true}}
|
||
transition={{duration: 0.5, delay: 0.3}}
|
||
>
|
||
<Link
|
||
href="/contact"
|
||
className="inline-block bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-full font-semibold transition"
|
||
>
|
||
Jetzt empfehlen
|
||
</Link>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|