Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
-import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
@@ -22,76 +22,45 @@ export default function LandingPage() {
         contentWidth="mediumSmall"
         sizing="medium"
         background="none"
-        cardStyle="gradient-radial"
+        cardStyle="glass-depth"
-        primaryButtonStyle="diagonal-gradient"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="solid"
+        secondaryButtonStyle="glass"
-        headingFontWeight="bold"
+        headingFontWeight="extrabold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: "Product", id: "#features" },
-          name: "Product",
+        { name: "Demo", id: "#demo" },
-          id: "#features",
+        { name: "Pricing", id: "#pricing" },
-        },
+        { name: "FAQ", id: "#faq" },
-        {
-          name: "Demo",
-          id: "#demo",
-        },
-        {
-          name: "Pricing",
-          id: "#pricing",
-        },
-        {
-          name: "FAQ",
-          id: "#faq",
-        },
       ]}
       brandName="Nexora"
-      button={{
+      button={{ text: "Get started", href: "#cta" }}
-        text: "Get started",
-        href: "#cta",
-      }}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
+      background={{ variant: "glowing-orb" }}
-        variant: "glowing-orb",
-      }}
       logoText="Turn leads into clients. Automatically."
       description="Nexora combines CRM, AI, and Automation to scale your growth instantly. Replace HubSpot, Jasper, Zapier and agencies with one platform."
       buttons={[
-        {
+        { text: "Get started", href: "#cta" },
-          text: "Get started",
+        { text: "Watch demo", href: "#demo" },
-          href: "#cta",
-        },
-        {
-          text: "Watch demo",
-          href: "#demo",
-        },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=1"
+      imageSrc="https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=1200&h=800"
       mediaAnimation="slide-up"
-      imageAlt="saas dashboard mockup"
+      imageAlt="Dark-themed CRM dashboard interface showing analytics and pipeline progress"
     />
   </div>
 
   <div id="social-proof" data-section="social-proof">
       <SocialProofOne
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
-      names={[
+      names={["SMBs", "Marketing Agencies", "Creators", "Entrepreneurs", "Startups", "Enterprises", "Influencers"]}
-        "SMBs",
-        "Marketing Agencies",
-        "Creators",
-        "Entrepreneurs",
-        "Startups",
-        "Enterprises",
-        "Influencers",
-      ]}
       title="Trusted worldwide"
       description="Empowering teams across the globe to automate their growth."
     />
@@ -102,23 +71,11 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="split"
       gridVariant="bento-grid"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       metrics={[
-        {
+        { id: "m1", value: "3.4x", description: "Higher ROAS" },
-          id: "m1",
+        { id: "m2", value: "-12h", description: "Weekly time saved" },
-          value: "3.4x",
+        { id: "m3", value: "<10m", description: "Setup time" },
-          description: "Higher ROAS",
-        },
-        {
-          id: "m2",
-          value: "-12h",
-          description: "Weekly time saved",
-        },
-        {
-          id: "m3",
-          value: "<10m",
-          description: "Setup time",
-        },
       ]}
       title="Unmatched Efficiency"
       description="See the impact on your business metrics."
@@ -130,36 +87,12 @@ export default function LandingPage() {
       animationType="slide-up"
       textboxLayout="split"
       gridVariant="bento-grid"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       features={[
-        {
+        { title: "Smart CRM", description: "Organize leads automatically.", imageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=800&_wi=1", titleImageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=100", buttonText: "Explore" },
-          title: "Smart CRM",
+        { title: "AI Content Studio", description: "Scale content creation.", imageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=800&_wi=2", titleImageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=100", buttonText: "Explore" },
-          description: "Organize leads automatically.",
+        { title: "Automation Engine", description: "Workflows that just run.", imageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=800&_wi=3", titleImageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=100", buttonText: "Explore" },
-          imageSrc: "http://img.b2bpic.net/free-photo/rocket-launch-spaceship-icon-innovation_53876-124331.jpg?_wi=1",
+        { title: "Campaign Analytics", description: "Insights that drive action.", imageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=800&_wi=4", titleImageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=100", buttonText: "Explore" },
-          titleImageSrc: "http://img.b2bpic.net/free-photo/colorful-arrow-symbols-digital-tablet-laptop-pen-pink-background_23-2147875664.jpg",
-          buttonText: "Explore",
-        },
-        {
-          title: "AI Content Studio",
-          description: "Scale content creation.",
-          imageSrc: "http://img.b2bpic.net/free-vector/time-management-flat-elements-composition_98292-6720.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-vector/use-soap-water-wash-your-hands-prevent-coronavirus-neon-sign-vector_53876-171341.jpg",
-          buttonText: "Explore",
-        },
-        {
-          title: "Automation Engine",
-          description: "Workflows that just run.",
-          imageSrc: "http://img.b2bpic.net/free-photo/glow-arrow-graph-analytics-3d-icon-bubble-speech-chat-3d-rendering_56104-1929.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/analytics-comparison-information-networking-concept_53876-15846.jpg",
-          buttonText: "Explore",
-        },
-        {
-          title: "Campaign Analytics",
-          description: "Insights that drive action.",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-studio-films-tablet-video-review-tech-enthusiasts_482257-116480.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-vector/media-flat-set_1284-5331.jpg",
-          buttonText: "Explore",
-        },
       ]}
       title="All-in-one Growth Engine"
       description="Engineered for speed, built for scale."
@@ -168,21 +101,21 @@ export default function LandingPage() {
 
   <div id="demo" data-section="demo">
       <MediaAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Watch Nexora in Action"
       description="Experience the dashboard designed for absolute performance."
-      imageSrc="http://img.b2bpic.net/free-photo/young-general-manager-using-green-screen-evaluating-performance-metrics_482257-124506.jpg"
+      imageSrc="https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=1200"
-      imageAlt="saas dashboard mockup"
+      imageAlt="Dark mode dashboard analytics UI"
     />
   </div>
 
   <div id="roi-calculator" data-section="roi-calculator">
       <MediaAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
-      title="Calculate Your Savings"
+      title="Interactive ROI Calculator"
-      description="Save thousands by switching from disjointed tools to Nexora."
+      description="Select your tools below to see your potential savings with Nexora."
-      imageSrc="http://img.b2bpic.net/free-photo/corporate-business-line-graph-report_53876-120736.jpg"
+      imageSrc="https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=800&_wi=5"
-      imageAlt="Corporate business line graph report"
+      imageAlt="ROI calculator dashboard interface"
     />
   </div>
 
@@ -190,56 +123,11 @@ export default function LandingPage() {
       <PricingCardNine
       animationType="slide-up"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       plans={[
-        {
+        { id: "p1", title: "Starter", price: "$30", period: "/mo", features: ["CRM", "Email", "Basic Automation"], button: { text: "Start for $30/mo" }, imageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=400&_wi=1", imageAlt: "Pricing dashboard UI" },
-          id: "p1",
+        { id: "p2", title: "Growth", price: "$79", period: "/mo", features: ["Full CRM", "AI Suite", "Campaigns"], button: { text: "Start for $79/mo" }, imageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=400&_wi=2", imageAlt: "Pricing dashboard UI" },
-          title: "Starter",
+        { id: "p3", title: "Scale", price: "$199", period: "/mo", features: ["Everything in Growth", "Team Access", "API"], button: { text: "Start for $199/mo" }, imageSrc: "https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=400&_wi=3", imageAlt: "Pricing dashboard UI" },
-          price: "$30",
-          period: "/mo",
-          features: [
-            "CRM",
-            "Email",
-            "Basic Automation",
-          ],
-          button: {
-            text: "Start for $30/mo",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-woman-typing-laptop_482257-131626.jpg",
-          imageAlt: "Closeup of African American woman typing on laptop",
-        },
-        {
-          id: "p2",
-          title: "Growth",
-          price: "$79",
-          period: "/mo",
-          features: [
-            "Full CRM",
-            "AI Suite",
-            "Campaigns",
-          ],
-          button: {
-            text: "Start for $79/mo",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?_wi=2",
-          imageAlt: "Closeup of African American woman typing on laptop",
-        },
-        {
-          id: "p3",
-          title: "Scale",
-          price: "$199",
-          period: "/mo",
-          features: [
-            "Everything in Growth",
-            "Team Access",
-            "API",
-          ],
-          button: {
-            text: "Start for $199/mo",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/rocket-launch-spaceship-icon-innovation_53876-124331.jpg?_wi=2",
-          imageAlt: "Closeup of African American woman typing on laptop",
-        },
       ]}
       title="Simple Pricing"
       description="Choose the perfect plan to fuel your growth."
@@ -247,98 +135,49 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={false}
       faqs={[
-        {
+        { id: "f1", title: "Do I need technical skills?", content: "Absolutely not. Setup is intuitive." },
-          id: "f1",
+        { id: "f2", title: "What tools does it replace?", content: "CRM, Jasper, Zapier, and ad tools." },
-          title: "Do I need technical skills?",
+        { id: "f3", title: "How long is setup?", content: "Less than 10 minutes." },
-          content: "Absolutely not. Setup is intuitive.",
+        { id: "f4", title: "Can agencies use it?", content: "Yes, we support multi-client setups." },
-        },
+        { id: "f5", title: "How good is the AI?", content: "Expert-grade content tailored to your brand." },
-        {
+        { id: "f6", title: "Can I cancel anytime?", content: "Yes, monthly plans are flexible." },
-          id: "f2",
-          title: "What tools does it replace?",
-          content: "CRM, Jasper, Zapier, and ad tools.",
-        },
-        {
-          id: "f3",
-          title: "How long is setup?",
-          content: "Less than 10 minutes.",
-        },
-        {
-          id: "f4",
-          title: "Can agencies use it?",
-          content: "Yes, we support multi-client setups.",
-        },
-        {
-          id: "f5",
-          title: "How good is the AI?",
-          content: "Expert-grade content tailored to your brand.",
-        },
-        {
-          id: "f6",
-          title: "Can I cancel anytime?",
-          content: "Yes, monthly plans are flexible.",
-        },
       ]}
       title="Common Questions"
       description="Answers to everything you need to know."
       faqsAnimation="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={true}
+      mediaAnimation="blur-reveal"
+      imageSrc="https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=800&_wi=1"
+      mediaPosition="left"
     />
   </div>
 
   <div id="cta" data-section="cta">
-      <ContactText
+      <ContactSplit
-      useInvertedBackground={false}
+      tag="Final Step"
-      background={{
+      title="Ready to grow without the chaos?"
-        variant: "sparkles-gradient",
+      description="Join top teams using Nexora to automate their operations."
-      }}
+      background={{ variant: "sparkles-gradient" }}
-      text="Ready to grow without the chaos?"
+      useInvertedBackground={true}
-      buttons={[
+      imageSrc="https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=800"
-        {
+      mediaPosition="right"
-          text: "Get started",
-          href: "#",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterLogoEmphasis
       logoText="Nexora"
       columns={[
-        {
+        { items: [{ label: "CRM" }, { label: "AI Engine" }, { label: "Analytics" }] },
-          title: "Product",
+        { items: [{ label: "About" }, { label: "Careers" }, { label: "Support" }] },
-          items: [
+        { items: [{ label: "Privacy" }, { label: "Terms" }, { label: "Status" }] },
-            {
-              label: "CRM",
-              href: "#",
-            },
-            {
-              label: "AI",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
       ]}
-      copyrightText="© 2026 Nexora Inc."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,12 +10,12 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #060816;
+  --background: #0a0a0a;
-  --card: #0f1228;
+  --card: #1a1a1a;
   --foreground: #ffffff;
   --primary-cta: #22d3ee;
   --primary-cta-text: #060816;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #060816;
   --accent: #334155;
   --background-accent: #1e293b;