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;;
+  --background: #1a1a1a;;
-  --card: #ffffff;;
+  --card: #2a2a2a;;
-  --foreground: #1c1c1c;;
+  --foreground: #ffffff;;
-  --primary-cta: #1f3251;;
+  --primary-cta: #00bfa5;;
   --secondary-cta: #ffffff;;
-  --accent: #15479c;;
+  --accent: #00bfa5;;
-  --background-accent: #a8cce8;;
+  --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,34 +37,25 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard 
+      <HeroBillboard
-          logoText="romet kriks"
+      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" }}
-          videoSrc="https://img.b2bpic.net/free-photo/software-developer-home-office-coding-desktop-using-ai-powered-script_482257-121012.jpg"
+      tag="Label"
-          frameStyle="browser"
+      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
-          logoLineHeight={1.2}
+      imageSrc="https://placehold.co/600x400"
       />
       </div>
 
       <div id="about" data-section="about">
-        <MediaSplitTabsAbout 
+      <FeatureCardSeven
-          title="About My Craft"
+      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."
-          tabs={[
+      tag="Label"
-            {
+      buttons={[{ label: "Primary", href: "#" }, { label: "Secondary", href: "#" }]}
-              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."
+      textboxLayout="default"
-            },
-            {
-              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"
       />
       </div>
@@ -94,9 +84,7 @@ export default function LandingPage() {
       </div>
 
       <div id="skills" data-section="skills">
-        <FeatureHoverPattern 
+      <FeatureCardSeven
-          title="Technical Skills"
-          description="Core competencies and specialized expertise in motion graphics and animation production."
       features={[
       {
       icon: Zap,
@@ -123,8 +111,12 @@ export default function LandingPage() {
       title: "Pipeline Optimization",              description: "Streamlined production workflows, asset management, version control, and efficient rendering pipelines for large-scale projects."
       }
       ]}
-          textboxLayout="default"
       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>

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