Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -5,7 +5,7 @@ import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
@@ -43,9 +43,10 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroLogo
-      logoText="BlackArtTech"
-      description="Pioneering the intersection of cultural expression and advanced digital engineering. We craft the tools of the future."
+      <HeroBillboardScroll
+      title="BlackArtTech Innovations"
+      description="Maximize your creative ROI with enterprise-grade tools built to accelerate professional production and streamline your art-to-market pipeline."
+      background={{ variant: "plain" }}
       buttons={[{ text: "Explore Platforms", href: "#products" }]}
       imageSrc="http://img.b2bpic.net/free-photo/3d-modern-techno-background-with-abstract-cyber-particles_1048-12198.jpg"
     />
@@ -120,10 +121,10 @@ export default function LandingPage() {
       useInvertedBackground={true}
       plans={[
         {
-          id: "basic", tag: "Starter", price: "$49", period: "/mo", description: "For individual artists starting out.", button: { text: "Choose Basic" }, featuresTitle: "Included", features: ["Core Access", "Cloud Storage", "Email Support"]
+          id: "basic", tag: "Starter", price: "$49", period: "/mo", description: "For individual artists starting out.", button: { text: "Start Basic" }, featuresTitle: "Included", features: ["Core Access", "Cloud Storage", "Email Support"]
         },
         {
-          id: "pro", tag: "Professional", price: "$149", period: "/mo", description: "For power users & studio designers.", button: { text: "Choose Pro" }, featuresTitle: "Everything in Basic, plus:", features: ["Advanced AI", "Collaborative Tools", "Priority Support"]
+          id: "pro", tag: "Professional", price: "$149", period: "/mo", description: "For power users & studio designers.", button: { text: "Get Pro" }, featuresTitle: "Everything in Basic, plus:", features: ["Advanced AI", "Collaborative Tools", "Priority Support"]
         },
         {
           id: "ent", tag: "Enterprise", price: "$499", period: "/mo", description: "For enterprise team workflows.", button: { text: "Contact Us" }, featuresTitle: "Everything in Pro, plus:", features: ["On-premise Options", "Dedicated Agent", "SLA Support"]
@@ -193,4 +194,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f0f8ffe6;
-  --primary-cta: #cee7ff;
+  --background: #050505;
+  --card: #121215;
+  --foreground: #f8f9ff;
+  --primary-cta: #ffa500;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #1c1c20;
   --secondary-cta-text: #f0f8ffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #00c8ff;
+  --background-accent: #c040ff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);