Update src/app/page.tsx

Merge version_7 into main

src/app/page.tsx

@@ -7,7 +7,7 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
@@ -42,21 +42,20 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitDualMedia
-      background={{ variant: "plain" }}
+      <HeroBillboardRotatedCarousel
       title="Rayash Albureihi"
       description="AI Systems Engineer & Full Stack Developer. Building the future of intelligent digital ecosystems with high-end architecture."
       tag="Elevated Technology Identity"
-      mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-technologically-advanced-female-humanoid_23-2151666363.jpg",          imageAlt: "Rayash Albureihi portrait"},
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg",          imageAlt: "Neural network visualization"}
-      ]}
-      mediaAnimation="slide-up"
-      rating={5}
-      ratingText="Trusted by industry innovators"
       tagIcon={Sparkles}
+      background={{ variant: "rotated-rays-animated" }}
+      carouselItems={[
+        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/portrait-technologically-advanced-female-humanoid_23-2151666363.jpg" },
+        { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg" },
+        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/abstract-futuristic-digital-technology-background_53876-104787.jpg?_wi=1" },
+        { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/3d-low-poly-abstract-background-with-shallow-depth-field_1048-10653.jpg?_wi=1" },
+        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/surveillance-hacking-room-with-russian-flag-big-screen_482257-127592.jpg?_wi=1" },
+        { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg?_wi=1" }
+      ]}
     />
   </div>
 
@@ -99,7 +98,7 @@ export default function LandingPage() {
         { id: "s2", title: "Web Development", content: "Modern, scalable applications using Next.js and TypeScript." },
         { id: "s3", title: "Backend Systems", content: "Secure and performant cloud-native infrastructure." },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/abstract-futuristic-digital-technology-background_53876-104787.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/abstract-futuristic-digital-technology-background_53876-104787.jpg?_wi=2"
       imageAlt="Technical skills visualization"
       mediaAnimation="slide-up"
     />
@@ -113,9 +112,9 @@ export default function LandingPage() {
       useInvertedBackground={true}
       products={[
         { id: "p1", brand: "AI", name: "Neural Engine v1", price: "Launch", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-vector/fitness-mobile-app-infographic-flat-design_52683-16269.jpg" },
-        { id: "p2", brand: "Web", name: "Cinematic Portfolio", price: "Active", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/3d-low-poly-abstract-background-with-shallow-depth-field_1048-10653.jpg" },
-        { id: "p3", brand: "Sys", name: "Secure Auth Node", price: "Secured", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/surveillance-hacking-room-with-russian-flag-big-screen_482257-127592.jpg" },
-        { id: "p4", brand: "AI", name: "Auto-Scaler", price: "Optimized", rating: 5, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg" },
+        { id: "p2", brand: "Web", name: "Cinematic Portfolio", price: "Active", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/3d-low-poly-abstract-background-with-shallow-depth-field_1048-10653.jpg?_wi=2" },
+        { id: "p3", brand: "Sys", name: "Secure Auth Node", price: "Secured", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/surveillance-hacking-room-with-russian-flag-big-screen_482257-127592.jpg?_wi=2" },
+        { id: "p4", brand: "AI", name: "Auto-Scaler", price: "Optimized", rating: 5, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg?_wi=2" },
         { id: "p5", brand: "Web", name: "E-Commerce OS", price: "Scalable", rating: 5, reviewCount: "21", imageSrc: "http://img.b2bpic.net/free-photo/abstract-techno-background-with-low-poly-design_1048-5834.jpg" },
         { id: "p6", brand: "Sec", name: "Firewall Core", price: "Hardened", rating: 5, reviewCount: "11", imageSrc: "http://img.b2bpic.net/free-vector/modern-infographic-element-collection_52683-1784.jpg" },
       ]}
@@ -189,4 +188,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
-  --card: #f3ede2;
-  --foreground: #2e2521;
-  --primary-cta: #2e2521;
-  --primary-cta-text: #fcf6ec;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #2e2521;
-  --accent: #b2a28b;
-  --background-accent: #b2a28b;
+  --background: #000000;
+  --card: #481f1f;
+  --foreground: #ffffff;
+  --primary-cta: #ffffff;
+  --primary-cta-text: #280101;
+  --secondary-cta: #361311;
+  --secondary-cta-text: #f6d4d4;
+  --accent: #51000b;
+  --background-accent: #ff2231;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);