Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -21,22 +21,19 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="smallMedium"
         sizing="largeSizeMediumTitles"
-        background="circleGradient"
-        cardStyle="solid"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+        background="noise"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Features",          id: "features"},
-        {
-          name: "Safety",          id: "safety"},
-        {
-          name: "Download",          id: "download"},
+        { name: "Features", id: "features" },
+        { name: "Safety", id: "safety" },
+        { name: "Download", id: "download" },
       ]}
       brandName="Crush Safety"
     />
@@ -44,70 +41,33 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
-        variant: "glowing-orb"}}
+      background={{ variant: "sparkles-gradient" }}
       title="Dating sollte niemals unsicher sein."
       description="Crush Safety verbindet moderne Dating-Features mit echter Sicherheit, verifizierten Nutzern und einer Community, die im Ernstfall für dich da ist."
       kpis={[
-        {
-          value: "100%",          label: "Verifiziert"},
-        {
-          value: "24/7",          label: "Safety Monitoring"},
-        {
-          value: "50k+",          label: "Aktive Community"},
+        { value: "100%", label: "Verifiziert" },
+        { value: "24/7", label: "Safety Monitoring" },
+        { value: "50k+", label: "Aktive Community" },
       ]}
       enableKpiAnimation={true}
       buttons={[
-        {
-          text: "Jetzt herunterladen",          href: "#download"},
-        {
-          text: "Mehr erfahren",          href: "#features"},
+        { text: "Jetzt herunterladen", href: "#download" },
+        { text: "Mehr erfahren", href: "#features" },
       ]}
+      mediaAnimation="blur-reveal"
       imageSrc="http://img.b2bpic.net/free-photo/smartphone-data-protection-set-isolated-compositions-with-icons-locks-shields-people-with-gadgets-vector-illustration_1284-81961.jpg"
-      imageAlt="modern app interface dark mode"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5113.jpg",          alt: "close-up portrait of attractive male model"},
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-sweater-sitting-posing-near-light-lamps_114579-81990.jpg",          alt: "A beautiful woman in sweater sitting and posing near light lamps"},
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-female-model-photography-umbrella_23-2148424402.jpg",          alt: "Beautiful female model and photography umbrella"},
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-senior-woman-portrait-formal-clothes_23-2148891738.jpg",          alt: "Beautiful senior woman portrait in formal clothes"},
-        {
-          src: "http://img.b2bpic.net/free-photo/active-healthy-woman-with-curly-hair-dressed-hoodie-carries-rolled-fitness-mat-concentrated-away-thoughtfully-strolls-outdoors-sunny-day-returns-home-after-training-sport-concept_273609-60645.jpg",          alt: "Active healthy woman with curly hair"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "Privacy First"},
-        {
-          type: "text",          text: "Verified Users"},
-        {
-          type: "text",          text: "Instant Safety"},
-        {
-          type: "text",          text: "Real-time Support"},
-        {
-          type: "text",          text: "Community Driven"},
-      ]}
     />
   </div>
 
   <div id="features" data-section="features">
       <FeatureBento
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       features={[
-        {
-          title: "Verifizierte Nutzer",          description: "Alle Nutzer durchlaufen eine strenge ID-Verifizierung.",          bentoComponent: "reveal-icon",          icon: Shield,
-        },
-        {
-          title: "Live Safety",          description: "Teile deinen Standort mit vertrauten Kontakten in Echtzeit.",          bentoComponent: "reveal-icon",          icon: MapPin,
-        },
-        {
-          title: "Community Help",          description: "Hilferuf-System mit direkter Community-Anbindung.",          bentoComponent: "reveal-icon",          icon: Phone,
-        },
+        { title: "Verifizierte Nutzer", description: "Alle Nutzer durchlaufen eine strenge ID-Verifizierung.", bentoComponent: "reveal-icon", icon: Shield },
+        { title: "Live Safety", description: "Teile deinen Standort mit vertrauten Kontakten in Echtzeit.", bentoComponent: "reveal-icon", icon: MapPin },
+        { title: "Community Help", description: "Hilferuf-System mit direkter Community-Anbindung.", bentoComponent: "reveal-icon", icon: Phone },
       ]}
       title="Safety Features, die zählen."
       description="Entwickelt für dein Wohlbefinden und echte Sicherheit bei jedem Date."
@@ -116,109 +76,81 @@ export default function LandingPage() {
 
   <div id="app-showcase" data-section="app-showcase">
       <ProductCardThree
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       gridVariant="bento-grid"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       products={[
-        {
-          id: "p1",          name: "Smart Feed",          price: "Features",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-gradient-neon-lights_23-2149279124.jpg"},
-        {
-          id: "p2",          name: "Community",          price: "Verbunden",          imageSrc: "http://img.b2bpic.net/free-photo/minimalist-white-smartphone-design-white-background_187299-46485.jpg"},
-        {
-          id: "p3",          name: "Location",          price: "Live",          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169859.jpg"},
-        {
-          id: "p4",          name: "Help Call",          price: "Notfall",          imageSrc: "http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336675.jpg"},
-        {
-          id: "p5",          name: "Profile",          price: "Echt",          imageSrc: "http://img.b2bpic.net/free-photo/smartphones-balancing-geometric-shapes-modern-technology-concept_187299-46721.jpg"},
-        {
-          id: "p6",          name: "Settings",          price: "Privat",          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-dark-studio-setting_187299-46633.jpg"},
+        { id: "p1", name: "Smart Feed", price: "Features", imageSrc: "http://img.b2bpic.net/free-photo/abstract-gradient-neon-lights_23-2149279124.jpg" },
+        { id: "p2", name: "Community", price: "Verbunden", imageSrc: "http://img.b2bpic.net/free-photo/minimalist-white-smartphone-design-white-background_187299-46485.jpg" },
+        { id: "p3", name: "Location", price: "Live", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169859.jpg" },
       ]}
-      title="Dein Date-Begleiter"
+      title="App-Funktionen"
       description="Die App, die Sicherheit in den Mittelpunkt stellt."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardSix
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       testimonials={[
-        {
-          id: "1",          name: "Sarah",          handle: "@sarah_s",          testimonial: "Endlich sicher daten. Die App gibt mir das gute Gefühl, dass jemand da ist.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-low-angle_23-2149213172.jpg"},
-        {
-          id: "2",          name: "Marc",          handle: "@marcdat",          testimonial: "Die ID-Verifizierung ist top. Keine Fakes, nur echte Menschen.",          imageSrc: "http://img.b2bpic.net/free-photo/pretty-student-girl-holding-books-looking-happy-smiling-camera-outdoor-stylish-girl-way-university_574295-4508.jpg"},
-        {
-          id: "3",          name: "Lena",          handle: "@lena_w",          testimonial: "Das Live-Standort-Feature hat mir bei meinem ersten Date sehr geholfen.",          imageSrc: "http://img.b2bpic.net/free-photo/camera-lens-binocular-canvas-shoes-sports-bottle-retro-wooden-table_1387-38.jpg"},
-        {
-          id: "4",          name: "Jonas",          handle: "@j_n_s",          testimonial: "Community Support ist fantastisch. Fühle mich viel sicherer.",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-solving-startup-problems-with-laptop-archived-documents-looking-annual-statistics-report-find-issue-young-analyst-reviewing-papers-executive-strategy-plan_482257-65811.jpg"},
-        {
-          id: "5",          name: "Julia",          handle: "@julia_safety",          testimonial: "Ein Gamechanger für die Dating-Welt. Endlich ernsthafte Features.",          imageSrc: "http://img.b2bpic.net/free-photo/brutal-young-man-sunglasses-hat-island-travel_1321-3839.jpg"},
+        { id: "1", name: "Sarah", handle: "@sarah_s", testimonial: "Endlich sicher daten.", icon: Shield },
+        { id: "2", name: "Marc", handle: "@marcdat", testimonial: "Die Verifizierung ist top.", icon: Shield },
       ]}
-      title="Community-Stimmen"
-      description="Erfahrungen von Nutzern, die sich für Crush Safety entschieden haben."
+      title="Community"
+      description="Was Nutzer über Crush Safety sagen."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
       <MetricCardTwo
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
+      gridVariant="bento-grid-inverted"
+      useInvertedBackground={true}
       metrics={[
-        {
-          id: "m1",          value: "99.9%",          description: "Verifizierte Profile"},
-        {
-          id: "m2",          value: "1M+",          description: "Sichere Dates"},
-        {
-          id: "m3",          value: "24/7",          description: "Support erreichbar"},
+        { id: "m1", value: "99.9%", description: "Verifizierte Profile" },
+        { id: "m2", value: "1M+", description: "Sichere Dates" },
       ]}
-      title="Vertrauen in Zahlen"
-      description="Sicherheit und Community wachsen täglich."
+      title="Vertrauen"
+      description="Wachstum für deine Sicherheit."
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqDouble
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       faqs={[
-        {
-          id: "f1",          title: "Wie funktioniert die Verifizierung?",          content: "Wir prüfen Dokumente und Identitäten gründlich."},
-        {
-          id: "f2",          title: "Ist mein Standort privat?",          content: "Ja, du entscheidest, wann und mit wem du ihn teilst."},
-        {
-          id: "f3",          title: "Wie sicher sind meine Daten?",          content: "Modernste Verschlüsselung ist bei uns Standard."},
+        { id: "f1", title: "Wie sicher sind meine Daten?", content: "Wir nutzen modernste Verschlüsselung." },
+        { id: "f2", title: "Was ist der Safety-Modus?", content: "Dein Standort ist immer unter Kontrolle." },
       ]}
       title="Häufige Fragen"
-      description="Alles Wichtige zur Sicherheit."
-      faqsAnimation="slide-up"
+      description="Alles zum Thema Sicherheit."
+      faqsAnimation="blur-reveal"
     />
   </div>
 
   <div id="download" data-section="download">
       <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient"}}
-      title="Die nächste Generation."
-      description="Lade dir jetzt Crush Safety herunter."
-      tag="Jetzt starten"
+      useInvertedBackground={true}
+      background={{ variant: "sparkles-gradient" }}
+      title="Bereit für echte Sicherheit?"
+      description="Lade dir Crush Safety jetzt im App Store herunter."
+      tag="Crush Safety App"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Crush Safety"
-      leftLink={{
-        text: "Impressum",        href: "#"}}
-      rightLink={{
-        text: "Datenschutz",        href: "#"}}
+      leftLink={{ text: "Impressum", href: "#" }}
+      rightLink={{ text: "Datenschutz", href: "#" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #0a0a0a;
   --card: #1a1a1a;
   --foreground: #ffffff;
-  --primary-cta: #e34400;
+  --primary-cta: #106efb;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #010101;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #ffffff;
-  --accent: #737373;
-  --background-accent: #e34400;
+  --accent: #535353;
+  --background-accent: #106efb;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);