Neue services

src/pages/LegalPage.tsx

@@ -0,0 +1,121 @@
+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('info@bayareaaffiliates.com');
+
+                      return (
+                        <p key={`${section.title}-${paragraphIndex}`}>
+                          {after !== undefined ? (
+                            <>
+                              {before}
+                              <a
+                                href="mailto:info@bayareaaffiliates.com"
+                                className="text-gray-900 dark:text-white underline decoration-white/30 underline-offset-4 transition-opacity hover:opacity-75"
+                              >
+                                info@bayareaaffiliates.com
+                              </a>
+                              {after}
+                            </>
+                          ) : (
+                            paragraph
+                          )}
+                        </p>
+                      );
+                    })}
+                  </div>
+                </motion.article>
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+    </>
+  );
+};
+
+export default LegalPage;