Update src/app/globals.css

src/app/globals.css

@@ -4,13 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #fafafa;;
-  --card: #f4f4f5;;
-  --foreground: #27272a;;
-  --primary-cta: #3f3f46;;
-  --secondary-cta: #ffffff;;
-  --accent: #facc15;;
-  --background-accent: #eab308;;
+  --background: #000000;;
+  --card: #1a1a1a;;
+  --foreground: #ffffffe6;;
+  --primary-cta: #a855f7;;
+  --secondary-cta: #1a1a1a;;
+  --accent: #737373;;
+  --background-accent: #737373;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import TagAbout from '@/components/sections/about/TagAbout';
 import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
 import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
@@ -40,7 +40,7 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboardCarousel
+        <HeroBillboardRotatedCarousel
           title="Creative Work That Moves"
           description="We craft digital experiences that resonate. Design, strategy, and innovation in every project."
           tag="Creative Studio"
@@ -48,14 +48,16 @@ export default function LandingPage() {
             { text: "Explore Our Work", href: "work" },
             { text: "Get Started", href: "contact" }
           ]}
-          mediaItems={[
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308569893-by35j6nh.jpg", imageAlt: "Creative portfolio showcase 1" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308570837-ykqg9x84.jpg", imageAlt: "Creative portfolio showcase 2" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766401281537-bd695c8y.jpg", imageAlt: "Creative portfolio showcase 3" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308833580-g33a307n.jpg", imageAlt: "Creative portfolio showcase 4" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_35a7P1i3U8nbKvxlC9pMeozlemI/uploaded-1767308804435-mtgy7jd0.jpg", imageAlt: "Creative portfolio showcase 5" },
-            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308572713-7scj2kqp.jpg", imageAlt: "Creative portfolio showcase 6" }
+          carouselItems={[
+            { id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308569893-by35j6nh.jpg", imageAlt: "Creative portfolio showcase 1" },
+            { id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308570837-ykqg9x84.jpg", imageAlt: "Creative portfolio showcase 2" },
+            { id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766401281537-bd695c8y.jpg", imageAlt: "Creative portfolio showcase 3" },
+            { id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308833580-g33a307n.jpg", imageAlt: "Creative portfolio showcase 4" },
+            { id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_35a7P1i3U8nbKvxlC9pMeozlemI/uploaded-1767308804435-mtgy7jd0.jpg", imageAlt: "Creative portfolio showcase 5" },
+            { id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767308572713-7scj2kqp.jpg", imageAlt: "Creative portfolio showcase 6" }
           ]}
+          autoPlay={true}
+          autoPlayInterval={4000}
         />
       </div>