122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import SEO from '../../components/SEO';
|
|
|
|
interface LegalSection {
|
|
title: string;
|
|
body: string[];
|
|
}
|
|
|
|
interface LegalPageProps {
|
|
title: string;
|
|
description: string;
|
|
canonicalUrl: string;
|
|
eyebrow: string;
|
|
intro: string;
|
|
sections: LegalSection[];
|
|
}
|
|
|
|
const LegalPage: React.FC<LegalPageProps> = ({
|
|
title,
|
|
description,
|
|
canonicalUrl,
|
|
eyebrow,
|
|
intro,
|
|
sections,
|
|
}) => {
|
|
useEffect(() => {
|
|
window.scrollTo(0, 0);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<SEO
|
|
title={title}
|
|
description={description}
|
|
canonicalUrl={canonicalUrl}
|
|
keywords={['Bay Area IT legal', 'privacy policy', 'terms of service']}
|
|
/>
|
|
|
|
<div className="pt-20 min-h-screen bg-background-light dark:bg-background-dark relative overflow-x-hidden">
|
|
<div className="absolute top-0 left-0 right-0 h-[720px] bg-[radial-gradient(ellipse_75%_50%_at_50%_-20%,rgba(255,255,255,0.08),rgba(255,255,255,0))] pointer-events-none" />
|
|
<div className="absolute top-32 left-1/2 -translate-x-1/2 w-[760px] h-[420px] bg-white/5 rounded-full blur-[120px] pointer-events-none" />
|
|
|
|
<section className="px-6 py-20 border-b border-white/10 relative z-10">
|
|
<div className="max-w-4xl mx-auto">
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 16 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-xs uppercase tracking-[0.35em] text-gray-500 mb-6"
|
|
>
|
|
{eyebrow}
|
|
</motion.p>
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 18 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.05 }}
|
|
className="font-display text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6"
|
|
>
|
|
{title}
|
|
</motion.h1>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 18 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="max-w-3xl text-lg md:text-xl leading-relaxed text-gray-600 dark:text-gray-300"
|
|
>
|
|
{intro}
|
|
</motion.p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="px-6 py-16 md:py-20 relative z-10">
|
|
<div className="max-w-4xl mx-auto">
|
|
<div className="grid gap-6">
|
|
{sections.map((section, index) => (
|
|
<motion.article
|
|
key={section.title}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-10%' }}
|
|
transition={{ delay: index * 0.04 }}
|
|
className="rounded-[2rem] border border-white/10 bg-white/5 backdrop-blur-sm p-8 md:p-10 shadow-[0_30px_80px_rgba(0,0,0,0.18)]"
|
|
>
|
|
<h2 className="font-display text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-5">
|
|
{section.title}
|
|
</h2>
|
|
<div className="space-y-4 text-base md:text-lg leading-relaxed text-gray-600 dark:text-gray-300">
|
|
{section.body.map((paragraph, paragraphIndex) => {
|
|
const [before, after] = paragraph.split('support@bayarea-cc.com');
|
|
|
|
return (
|
|
<p key={`${section.title}-${paragraphIndex}`}>
|
|
{after !== undefined ? (
|
|
<>
|
|
{before}
|
|
<a
|
|
href="mailto:support@bayarea-cc.com"
|
|
className="text-gray-900 dark:text-white underline decoration-white/30 underline-offset-4 transition-opacity hover:opacity-75"
|
|
>
|
|
support@bayarea-cc.com
|
|
</a>
|
|
{after}
|
|
</>
|
|
) : (
|
|
paragraph
|
|
)}
|
|
</p>
|
|
);
|
|
})}
|
|
</div>
|
|
</motion.article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LegalPage;
|