Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,16 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import { BarChart3, Video, Settings, Users, Zap, TrendingUp } from "lucide-react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import { Award, BarChart, Clock, Home, TrendingUp, Zap } from "lucide-react";
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function LandingPage() {
   return (
@@ -28,140 +25,104 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+          <NavbarLayoutFloatingInline
-      navItems={[
+            navItems={[
-        { name: "Features", id: "features" },
+              { name: "Video Metrics", id: "metrics" },
-        { name: "How it Works", id: "about" },
+              { name: "Engagement", id: "features" },
-        { name: "Testimonials", id: "testimonials" },
+              { name: "Management", id: "about" },
-        { name: "FAQ", id: "faq" },
+            ]}
-      ]}
+            brandName="StreamAdmin"
-      brandName="PropGen AI"
+            button={{ text: "Get Started", href: "#contact" }}
-      button={{
+          />
-        text: "Get Started",        href: "#contact"}}
+        </div>
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroSplitDualMedia
+          <HeroSplitDualMedia
-      background={{
+            background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
+            title="Advanced Analytics for Content Creators"
-      title="Turn Every Listing into a Masterpiece with AI"
+            description="Gain total control over your video performance. Track engagement in real-time, manage your assets, and optimize your content strategy with data-driven insights."
-      description="Generate high-converting real estate descriptions in seconds. Our AI analyzes your property data to craft compelling, SEO-optimized listings that sell faster."
+            tag="StreamAdmin - Power Your Growth"
-      tag="PropGen AI - Elevate your Listings"
+            buttons={[{ text: "Launch Dashboard", href: "#contact" }]}
-      buttons={[
+            mediaItems={[
-        {
+              { imageSrc: "http://img.b2bpic.net/free-photo/dashboard-analysis-business-charts-data-screen_107791-16812.jpg", imageAlt: "Video Analytics Dashboard" },
-          text: "Start Generating",          href: "#contact"},
+              { imageSrc: "http://img.b2bpic.net/free-photo/young-man-editing-video-computer_1258-200156.jpg", imageAlt: "Content Management Interface" }
-      ]}
+            ]}
-      mediaItems={[
+            mediaAnimation="slide-up"
-        {
+            rating={5}
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-activating-robot-cleaner_23-2148994180.jpg",          imageAlt: "real estate agent tablet property"},
+            ratingText="Powering 1,000+ Creators"
-        {
+          />
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-freelancer-works-from-home-looks-her-digital-tablet-reads-through-documents-online_1258-200126.jpg",          imageAlt: "modern dashboard ai real estate"}
+        </div>
-      ]}
-      mediaAnimation="slide-up"
-      rating={5}
-      ratingText="Trusted by 500+ Top Realtors"
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="metrics" data-section="metrics">
-      <AboutMetric
+          <MetricCardThree
-      useInvertedBackground={false}
+            animationType="slide-up"
-      title="Why Real Estate Pros Choose Us"
+            textboxLayout="default"
-      metrics={[
+            useInvertedBackground={false}
-        { icon: Zap, label: "Listings Generated", value: "15,000+" },
+            metrics={[
-        { icon: Home, label: "Properties Covered", value: "450+" },
+              { id: "v1", icon: Video, title: "Total Video Views", value: "2.4M" },
-        { icon: TrendingUp, label: "Conversion Boost", value: "35%" },
+              { id: "v2", icon: TrendingUp, title: "Engagement Rate", value: "8.2%" },
-      ]}
+              { id: "v3", icon: BarChart3, title: "Retention Time", value: "4m 30s" },
-      metricsAnimation="slide-up"
+            ]}
-    />
+            title="Video Performance Metrics"
-  </div>
+            description="Dive deep into granular data points to understand how your audience interacts with every frame."
+          />
+        </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardSixteen
+          <FeatureCardSixteen
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="default"
+            textboxLayout="default"
-      useInvertedBackground={false}
+            useInvertedBackground={true}
-      negativeCard={{
+            negativeCard={{ items: ["Low engagement spikes", "High drop-off rates", "Unoptimized thumbnails"] }}
-        items: [
+            positiveCard={{ items: ["AI-driven retention analysis", "Real-time audience heatmaps", "Automated workflow triggers"] }}
-          "No manual copywriting",          "No repetitive drafts",          "Zero wasted time"],
+            title="Precision Audience Engagement"
-      }}
+            description="Know exactly what keeps viewers watching and where you lose their attention."
-      positiveCard={{
+          />
-        items: [
+        </div>
-          "SEO-optimized keywords",          "Buyer-targeted tone",          "Automated feature highlight"],
-      }}
-      title="AI-Powered Listing Excellence"
-      description="Stop staring at blank documents. Our engine writes professional descriptions tailored to your buyer persona."
-    />
-  </div>
 
-  <div id="metrics" data-section="metrics">
+        <div id="about" data-section="about">
-      <MetricCardThree
+          <div id="about" data-section="about" className="py-20">
-      animationType="slide-up"
+              <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-8">
-      textboxLayout="default"
+                <div className="p-8 bg-card rounded-lg border flex flex-col items-center text-center">
-      useInvertedBackground={false}
+                    <Settings size={48} className="mb-4 text-primary" />
-      metrics={[
+                    <h3 className="text-xl font-bold mb-2">Content Management</h3>
-        { id: "m1", icon: Clock, title: "Time Saved", value: "10h/week" },
+                    <p>Effortlessly organize, tag, and publish your entire library from a single admin panel.</p>
-        { id: "m2", icon: BarChart, title: "Lead Rate", value: "40% inc." },
+                </div>
-        { id: "m3", icon: Award, title: "Satisfaction", value: "99%" },
+                <div className="p-8 bg-card rounded-lg border flex flex-col items-center text-center">
-      ]}
+                    <Users size={48} className="mb-4 text-primary" />
-      title="Performance at a Glance"
+                    <h3 className="text-xl font-bold mb-2">User Analytics</h3>
-      description="Measure the impact of your automated marketing strategy."
+                    <p>Identify your top viewers and segment your audience to tailor your future content releases.</p>
-    />
+                </div>
-  </div>
+                <div className="p-8 bg-card rounded-lg border flex flex-col items-center text-center">
+                    <Zap size={48} className="mb-4 text-primary" />
+                    <h3 className="text-xl font-bold mb-2">Admin Automation</h3>
+                    <p>Reduce operational overhead with smart triggers that handle routine management tasks.</p>
+                </div>
+              </div>
+          </div>
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="contact" data-section="contact">
-      <TestimonialCardTwelve
+          <ContactCTA
-      useInvertedBackground={false}
+            useInvertedBackground={false}
-      testimonials={[
+            background={{ variant: "plain" }}
-        { id: "1", name: "Sarah Jenkins", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-hispanic-woman-business-worker-smiling-pointing-camera-office_839833-26359.jpg" },
+            tag="Get Started"
-        { id: "2", name: "Michael Reed", imageSrc: "http://img.b2bpic.net/free-photo/man-standing-front-building-holding-mobile-phone-hand-talking-loudspeaker_23-2147972812.jpg" },
+            title="Ready to Analyze Your Content?"
-        { id: "3", name: "Emily Chen", imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-businesswoman-holding-coffee-cup_23-2148187126.jpg" },
+            description="Start your free trial today and take full control of your creative output."
-        { id: "4", name: "David West", imageSrc: "http://img.b2bpic.net/free-photo/carefree-couple-dancing-while-relocating-their-new-apartment_637285-12444.jpg" },
+            buttons={[{ text: "Start Now", href: "#" }]}
-        { id: "5", name: "Lisa O'Brien", imageSrc: "http://img.b2bpic.net/free-photo/executive-woman-manager-speaking-phone-while-checking-financial-notes-late-night_482257-5203.jpg" },
+          />
-      ]}
+        </div>
-      cardTitle="What Realtors are saying"
-      cardTag="Success Stories"
-      cardAnimation="slide-up"
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="footer" data-section="footer">
-      <FaqDouble
+          <FooterLogoEmphasis
-      textboxLayout="default"
+            columns={[
-      useInvertedBackground={false}
+              { items: [{ label: "Analytics", href: "#" }, { label: "Dashboard", href: "#" }] },
-      faqs={[
+              { items: [{ label: "Security", href: "#" }, { label: "Support", href: "#" }] },
-        { id: "f1", title: "Is the content original?", content: "Absolutely. Every listing description is generated uniquely for your property." },
+            ]}
-        { id: "f2", title: "How do I start?", content: "Simply input your property details and select a style, we'll do the rest." },
+            logoText="StreamAdmin"
-        { id: "f3", title: "Is there a free trial?", content: "Yes, start your 14-day free trial today without any commitment." },
+          />
-      ]}
+        </div>
-      title="Frequently Asked Questions"
-      description="Have questions about our AI? We've got answers."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{ variant: "plain" }}
-      tag="Ready to Scale?"
-      title="Automate Your Listings Today"
-      description="Join 500+ successful realtors and start generating high-impact listings in minutes."
-      buttons={[{ text: "Contact Sales", href: "#contact" }]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        { items: [{ label: "Product", href: "#" }, { label: "Pricing", href: "#" }] },
-        { items: [{ label: "About", href: "#" }, { label: "Support", href: "#" }] },
-      ]}
-      logoText="PropGen AI"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #030128;
+  --background: #0a0a0a;
-  --card: #241f48;
+  --card: #1a1a1a;
-  --foreground: #ffffff;
+  --foreground: #ffffffe6;
-  --primary-cta: #ffffff;
+  --primary-cta: #e6e6e6;
   --primary-cta-text: #030128;
-  --secondary-cta: #131136;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #d5d4f6;
-  --accent: #44358a;
+  --accent: #737373;
-  --background-accent: #b597fe;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);