Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -19,24 +19,20 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="small"
         sizing="largeSmallSizeMediumTitles"
-        background="blurBottom"
-        cardStyle="inset"
-        primaryButtonStyle="diagonal-gradient"
-        secondaryButtonStyle="layered"
-        headingFontWeight="light"
+        background="noiseDiagonalGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="solid"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",          id: "home"},
-        {
-          name: "Security",          id: "features"},
-        {
-          name: "Ledger",          id: "system"},
-        {
-          name: "FAQs",          id: "faq"},
+        { name: "Home", id: "home" },
+        { name: "Security", id: "features" },
+        { name: "Ledger", id: "system" },
+        { name: "FAQs", id: "faq" },
       ]}
       brandName="TrustVerify"
     />
@@ -44,26 +40,21 @@ export default function LandingPage() {
 
   <div id="home" data-section="home">
       <HeroSplitDualMedia
-      background={{
-        variant: "gradient-bars"}}
+      background={{ variant: "sparkles-gradient" }}
       title="Verifying Welfare Claims with Blockchain Integrity"
       description="Ensure absolute accuracy and fraud prevention with our 2-step verification system and immutable tamper-proof hashing."
       tag="Secure Verification Platform"
       mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841695.jpg?_wi=1",          imageAlt: "Secure verification dashboard"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/privacy-security-data-protection-shield-graphic-concept_53876-122494.jpg?_wi=1",          imageAlt: "Security shield interface"}
+        { imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841695.jpg?_wi=1", imageAlt: "Secure verification dashboard" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/privacy-security-data-protection-shield-graphic-concept_53876-122494.jpg?_wi=1", imageAlt: "Security shield interface" }
       ]}
-      mediaAnimation="slide-up"
+      mediaAnimation="blur-reveal"
       rating={5}
       ratingText="Trusted by government agencies"
       tagIcon={ShieldCheck}
       buttons={[
-        {
-          text: "Get Started",          href: "#"},
-        {
-          text: "Learn More",          href: "#"},
+        { text: "Get Started", href: "#" },
+        { text: "Learn More", href: "#" },
       ]}
     />
   </div>
@@ -74,14 +65,10 @@ export default function LandingPage() {
       title="Unmatched Security Layers"
       description="Our architecture prioritizes data integrity and security for every welfare claim processed."
       accordionItems={[
-        {
-          id: "f1",          title: "2-Step Identity Check",          content: "Multi-factor authentication cross-references government databases to confirm beneficiary status securely."},
-        {
-          id: "f2",          title: "Advanced Cryptographic Hashing",          content: "Every claim generates a unique cryptographic hash, ensuring data remains immutable once registered."},
-        {
-          id: "f3",          title: "Real-time Verification",          content: "Instant validation against verified national records to eliminate duplicate applications."},
-        {
-          id: "f4",          title: "Encrypted Audit Trails",          content: "Transparent yet secure logging of all changes for full accountability."},
+        { id: "f1", title: "2-Step Identity Check", content: "Multi-factor authentication cross-references government databases to confirm beneficiary status securely." },
+        { id: "f2", title: "Advanced Cryptographic Hashing", content: "Every claim generates a unique cryptographic hash, ensuring data remains immutable once registered." },
+        { id: "f3", title: "Real-time Verification", content: "Instant validation against verified national records to eliminate duplicate applications." },
+        { id: "f4", title: "Encrypted Audit Trails", content: "Transparent yet secure logging of all changes for full accountability." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/cybersecurity-data-protection-concepts_23-2152001154.jpg?_wi=1"
       mediaAnimation="blur-reveal"
@@ -91,16 +78,13 @@ export default function LandingPage() {
 
   <div id="system" data-section="system">
       <MetricCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
+      animationType="blur-reveal"
+      textboxLayout="split"
+      useInvertedBackground={true}
       metrics={[
-        {
-          id: "m1",          value: "99.9%",          title: "Claim Accuracy",          description: "Verified through rigorous hashing protocols.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841678.jpg?_wi=1"},
-        {
-          id: "m2",          value: "100+",          title: "Security Patches",          description: "Constant updates to ledger integrity.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841695.jpg?_wi=2"},
-        {
-          id: "m3",          value: "24/7",          title: "Real-time Audits",          description: "Continuous monitoring of all claim events.",          imageSrc: "http://img.b2bpic.net/free-photo/privacy-security-data-protection-shield-graphic-concept_53876-122494.jpg?_wi=2"},
+        { id: "m1", value: "99.9%", title: "Claim Accuracy", description: "Verified through rigorous hashing protocols.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841678.jpg?_wi=1" },
+        { id: "m2", value: "100+", title: "Security Patches", description: "Constant updates to ledger integrity.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841695.jpg?_wi=2" },
+        { id: "m3", value: "24/7", title: "Real-time Audits", description: "Continuous monitoring of all claim events.", imageSrc: "http://img.b2bpic.net/free-photo/privacy-security-data-protection-shield-graphic-concept_53876-122494.jpg?_wi=2" },
       ]}
       title="Tamper-Proof Ledger Performance"
       description="Our system ensures transparent audit trails and record-keeping precision."
@@ -109,48 +93,33 @@ export default function LandingPage() {
 
   <div id="faq" data-section="faq">
       <FaqSplitText
-      useInvertedBackground={true}
+      useInvertedBackground={false}
       faqs={[
-        {
-          id: "q1",          title: "How does the ledger hashing work?",          content: "We use SHA-256 protocols to generate immutable hashes for every claim event, preventing unauthorized modification."},
-        {
-          id: "q2",          title: "Is beneficiary data encrypted?",          content: "Yes, end-to-end encryption is used both at rest and in transit, ensuring PII is protected."},
-        {
-          id: "q3",          title: "Can claims be revoked?",          content: "Claims can be updated only via multi-sig authorization, with every state change recorded on the ledger."},
+        { id: "q1", title: "How does the ledger hashing work?", content: "We use SHA-256 protocols to generate immutable hashes for every claim event, preventing unauthorized modification." },
+        { id: "q2", title: "Is beneficiary data encrypted?", content: "Yes, end-to-end encryption is used both at rest and in transit, ensuring PII is protected." },
+        { id: "q3", title: "Can claims be revoked?", content: "Claims can be updated only via multi-sig authorization, with every state change recorded on the ledger." },
       ]}
       sideTitle="Common Verification Questions"
-      faqsAnimation="slide-up"
+      faqsAnimation="blur-reveal"
     />
   </div>
 
   <div id="testimonial" data-section="testimonial">
       <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
+      animationType="depth-3d"
+      textboxLayout="split"
+      useInvertedBackground={true}
       title="Trusted by Industry Leaders"
       description="See how public sector organizations are modernizing welfare verification."
       testimonials={[
-        {
-          id: "t1",          name: "Sarah Jenkins",          role: "IT Director",          company: "Public Welfare Dept",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841678.jpg?_wi=2"},
-        {
-          id: "t2",          name: "Michael Chen",          role: "Security Lead",          company: "Social Services",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841695.jpg?_wi=3"},
-        {
-          id: "t3",          name: "Dr. Elena Rossi",          role: "Policy Advisor",          company: "State Agency",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/privacy-security-data-protection-shield-graphic-concept_53876-122494.jpg?_wi=3"},
-        {
-          id: "t4",          name: "David Smith",          role: "Compliance Mgr",          company: "Regional Welfare",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-data-protection-concepts_23-2152001154.jpg?_wi=2"},
+        { id: "t1", name: "Sarah Jenkins", role: "IT Director", company: "Public Welfare Dept", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841678.jpg?_wi=2" },
+        { id: "t2", name: "Michael Chen", role: "Security Lead", company: "Social Services", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841695.jpg?_wi=3" },
+        { id: "t3", name: "Dr. Elena Rossi", role: "Policy Advisor", company: "State Agency", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/privacy-security-data-protection-shield-graphic-concept_53876-122494.jpg?_wi=3" },
       ]}
       kpiItems={[
-        {
-          value: "40%",          label: "Reduction in Fraud"},
-        {
-          value: "12m+",          label: "Claims Processed"},
-        {
-          value: "99.9%",          label: "Uptime Reliability"},
+        { value: "40%", label: "Reduction in Fraud" },
+        { value: "12m+", label: "Claims Processed" },
+        { value: "99.9%", label: "Uptime Reliability" },
       ]}
     />
   </div>
@@ -159,34 +128,13 @@ export default function LandingPage() {
       <FooterBaseCard
       logoText="TrustVerify"
       columns={[
-        {
-          title: "Platform",          items: [
-            {
-              label: "Security Overview",              href: "#"},
-            {
-              label: "Ledger Tech",              href: "#"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About Us",              href: "#"},
-            {
-              label: "Compliance",              href: "#"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacy Policy",              href: "#"},
-            {
-              label: "Terms of Use",              href: "#"},
-          ],
-        },
+        { title: "Platform", items: [{ label: "Security Overview", href: "#" }, { label: "Ledger Tech", href: "#" }] },
+        { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Compliance", href: "#" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --background: #020617;
+  --card: #0f172a;
+  --foreground: #e2e8f0;
+  --primary-cta: #c4d8f9;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #041633;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --accent: #2d30f3;
+  --background-accent: #1d4ed8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);