Bob AI: Can you keep the particles in the first section bu...

src/app/globals.css

@@ -4,14 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #1f3251;;
+  --background: #1a1a1a;;
+  --card: #2a2a2a;;
+  --foreground: #ffffff;;
+  --primary-cta: #00bfa5;;
   --secondary-cta: #ffffff;;
-  --accent: #15479c;;
-  --background-accent: #a8cce8;;
-
+  --accent: #00bfa5;;
+  --background-accent: #00bfa511;;
   /* Base spacing units */
   --vw-0_25: calc(var(--vw) * 0.25);
   --vw-0_5: calc(var(--vw) * 0.5);

src/app/page.tsx

@@ -2,14 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
-import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { Code, Layers, Shield, Sparkles, Workflow, Zap, Star } from "lucide-react";
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 
 export default function LandingPage() {
   return (
@@ -38,36 +37,27 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard 
-          logoText="romet kriks"
-          description="Motion graphics technical artist specializing in animation, visual effects, and creative motion design. Transforming ideas into dynamic visual experiences."
-          background={{ variant: "sparkles-gradient" }}
-          videoSrc="https://img.b2bpic.net/free-photo/software-developer-home-office-coding-desktop-using-ai-powered-script_482257-121012.jpg"
-          frameStyle="browser"
-          logoLineHeight={1.2}
-        />
+      <HeroBillboard
+      title="Hero"
+      description="Motion graphics technical artist specializing in animation, visual effects, and creative motion design. Transforming ideas into dynamic visual experiences."
+      background={{ variant: "sparkles-gradient" }}
+      tag="Label"
+      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
+      imageSrc="https://placehold.co/600x400"
+      />
       </div>
 
       <div id="about" data-section="about">
-        <MediaSplitTabsAbout 
-          title="About My Craft"
-          description="Dedicated to creating compelling motion experiences through technical expertise and creative vision."
-          tabs={[
-            {
-              id: "expertise",              label: "Expertise",              description: "Proficient in industry-standard tools including Cinema 4D, After Effects, Blender, and Houdini. Specialized in character animation, VFX compositing, motion design, and 3D visualization for film, television, and digital media."
-            },
-            {
-              id: "approach",              label: "Approach",              description: "My process combines technical precision with artistic intuition. I collaborate closely with directors and creative leads to bring their vision to life, ensuring every frame serves the story and maintains visual consistency."
-            },
-            {
-              id: "experience",              label: "Experience",              description: "Over 8+ years developing motion graphics for major studios, advertising agencies, and independent filmmakers. Known for delivering high-quality animations on tight deadlines while maintaining creative excellence."
-            }
-          ]}
-          imageSrc="https://img.b2bpic.net/free-photo/people-working-together-animation-studio_23-2149207962.jpg"
-          imageAlt="Motion graphics workspace and creative process"
-          imagePosition="right"
-          useInvertedBackground="noInvert"
-        />
+      <FeatureCardSeven
+      features={[{ title: "Feature 1", description: "Feature description" }, { title: "Feature 2", description: "Feature description" }, { title: "Feature 3", description: "Feature description" }]}
+      animationType="none"
+      title="something different? didn't like the approach"
+      description="Dedicated to creating compelling motion experiences through technical expertise and creative vision."
+      tag="Label"
+      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
+      textboxLayout="default"
+      useInvertedBackground="noInvert"
+      />
       </div>
 
       <div id="work" data-section="work">
@@ -94,39 +84,41 @@ export default function LandingPage() {
       </div>
 
       <div id="skills" data-section="skills">
-        <FeatureHoverPattern 
-          title="Technical Skills"
-          description="Core competencies and specialized expertise in motion graphics and animation production."
-          features={[
-            {
-              icon: Zap,
-              title: "3D Animation",              description: "Character rigging, keyframe animation, motion capture integration, and complex mechanical animation using industry-standard software."
-            },
-            {
-              icon: Shield,
-              title: "VFX & Compositing",              description: "Advanced compositing, particle systems, green screen keying, color grading, and seamless integration of visual effects into final footage."
-            },
-            {
-              icon: Code,
-              title: "Motion Design",              description: "Kinetic typography, logo animations, transition design, and creative motion solutions for broadcast and digital platforms."
-            },
-            {
-              icon: Layers,
-              title: "3D Modeling",              description: "Photorealistic modeling, UV unwrapping, texturing, and lighting setup for product visualization and architectural animation."
-            },
-            {
-              icon: Sparkles,
-              title: "Creative Direction",              description: "Conceptual development, storyboarding, creative problem-solving, and visual narrative construction for complex projects."
-            },
-            {
-              icon: Workflow,
-              title: "Pipeline Optimization",              description: "Streamlined production workflows, asset management, version control, and efficient rendering pipelines for large-scale projects."
-            }
-          ]}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground="noInvert"
-        />
+      <FeatureCardSeven
+      features={[
+      {
+      icon: Zap,
+      title: "3D Animation",              description: "Character rigging, keyframe animation, motion capture integration, and complex mechanical animation using industry-standard software."
+      },
+      {
+      icon: Shield,
+      title: "VFX & Compositing",              description: "Advanced compositing, particle systems, green screen keying, color grading, and seamless integration of visual effects into final footage."
+      },
+      {
+      icon: Code,
+      title: "Motion Design",              description: "Kinetic typography, logo animations, transition design, and creative motion solutions for broadcast and digital platforms."
+      },
+      {
+      icon: Layers,
+      title: "3D Modeling",              description: "Photorealistic modeling, UV unwrapping, texturing, and lighting setup for product visualization and architectural animation."
+      },
+      {
+      icon: Sparkles,
+      title: "Creative Direction",              description: "Conceptual development, storyboarding, creative problem-solving, and visual narrative construction for complex projects."
+      },
+      {
+      icon: Workflow,
+      title: "Pipeline Optimization",              description: "Streamlined production workflows, asset management, version control, and efficient rendering pipelines for large-scale projects."
+      }
+      ]}
+      animationType="slide-up"
+      title="Technical Skills"
+      description="Core competencies and specialized expertise in motion graphics and animation production."
+      tag="Label"
+      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
+      textboxLayout="default"
+      useInvertedBackground="noInvert"
+      />
       </div>
 
       <div id="testimonials" data-section="testimonials">

src/components/sections/hero/HeroLogoBillboard.tsx

@@ -111,6 +111,8 @@ const HeroLogoBillboard = ({
                                 <div className="hidden md:block w-10 h-8 rounded-theme bg-accent/10" />
                             </div>
                             <Plus className="h-[var(--text-sm)] w-auto text-foreground" />
+                            <button className="ml-auto p-2 bg-accent text-foreground rounded-full">Click Me</button>
+                            <button className="ml-2 p-2 bg-accent/50 text-foreground rounded-full">New Button</button>
                         </div>
                         <div className="relative z-1 p-0">
                             <MediaContent