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,41 +22,33 @@ 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",          id: "#features"},
+        { name: "Demo", id: "#demo" },
-        {
+        { name: "Pricing", id: "#pricing" },
-          name: "Demo",          id: "#demo"},
+        { name: "FAQ", id: "#faq" },
-        {
-          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",          href: "#cta"},
+        { text: "Watch demo", href: "#demo" },
-        {
-          text: "Watch demo",          href: "#demo"},
       ]}
       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"
@@ -67,9 +59,8 @@ export default function LandingPage() {
   <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."
     />
@@ -80,14 +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",          value: "3.4x",          description: "Higher ROAS"},
+        { id: "m2", value: "-12h", description: "Weekly time saved" },
-        {
+        { id: "m3", value: "<10m", description: "Setup time" },
-          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."
@@ -99,16 +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",          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: "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" },
-        {
+        { 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" },
-          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"},
+        { 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" },
-        {
-          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"},
-        {
-          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"},
       ]}
       title="All-in-one Growth Engine"
       description="Engineered for speed, built for scale."
@@ -117,7 +101,7 @@ 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="https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=1200"
@@ -127,7 +111,7 @@ export default function LandingPage() {
 
   <div id="roi-calculator" data-section="roi-calculator">
       <MediaAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Interactive ROI Calculator"
       description="Select your tools below to see your potential savings with Nexora."
       imageSrc="https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=800&_wi=5"
@@ -139,26 +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",          title: "Starter",          price: "$30",          period: "/mo",          features: [
+        { 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" },
-            "CRM",            "Email",            "Basic Automation"],
+        { 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" },
-          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: "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"},
-        {
-          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"},
       ]}
       title="Simple Pricing"
       description="Choose the perfect plan to fuel your growth."
@@ -166,64 +135,46 @@ 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",          title: "Do I need technical skills?",          content: "Absolutely not. Setup is intuitive."},
+        { 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: "f2",          title: "What tools does it replace?",          content: "CRM, Jasper, Zapier, and ad tools."},
+        { 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: "f3",          title: "How long is setup?",          content: "Less than 10 minutes."},
+        { id: "f6", title: "Can I cancel anytime?", content: "Yes, monthly plans are flexible." },
-        {
-          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."
-      text="Ready to grow without the chaos?"
+      background={{ variant: "sparkles-gradient" }}
-      buttons={[
+      useInvertedBackground={true}
-        {
+      imageSrc="https://img.b2bpic.net/free-photo/financial-program-user-interface-pc-screen-home-office-desk_482257-118861.jpg?w=800"
-          text: "Get started",          href: "#"},
+      mediaPosition="right"
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseReveal
+      <FooterLogoEmphasis
       logoText="Nexora"
       columns={[
-        {
+        { items: [{ label: "CRM" }, { label: "AI Engine" }, { label: "Analytics" }] },
-          title: "Product",          items: [
+        { items: [{ label: "About" }, { label: "Careers" }, { label: "Support" }] },
-            {
+        { 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>

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;