Update src/app/page.tsx

Merge version_6 into main

src/app/page.tsx

@@ -4,14 +4,14 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroSplit from '@/components/sections/hero/HeroSplit';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { Facebook, Linkedin, Twitter } from "lucide-react";
+import { Facebook, Linkedin, Twitter, Code, ShieldCheck, Brain, Cloud } from "lucide-react";
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 
 export default function LandingPage() {
   return (
@@ -66,11 +66,11 @@ export default function LandingPage() {
       mediaAnimation="opacity"
       avatarText="Trusted by 500 students"
       avatars={[
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/avatars/avatar-1.jpg", alt: "Student 1" },
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/avatars/avatar-2.jpg", alt: "Student 2" },
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/avatars/avatar-3.jpg", alt: "Student 3" },
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/avatars/avatar-4.jpg", alt: "Student 4" },
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/avatars/avatar-5.jpg", alt: "Student 5" }
+        { src: "https://pixabay.com/get/ga565315d6bbb78db66d1f0da9e6d9a7f23df95a1f244ed56321fb8e19581df3eeeaa91fdf50b777b406990b27f88f5b152e74193d20f2082ebc899cc7eeff27c_1280.jpg?id=1853907", alt: "Student 1" },
+        { src: "https://pixabay.com/get/g83c71275303a41f86f0d2cc36318aa25d9df9c383825d9282b8396333c404d8f016c2954923d76adf15107447f9651c5f99953b41490f93c91c2822531e17c3e_1280.jpg?id=2104580", alt: "Student 2" },
+        { src: "https://pixabay.com/get/gabf1f6c70d2133b51c5849ce18c16c32bd93c51be55a6abcee0782cd463858a8f6428d51fd97d756ead73b20c4abd99cc96229b5e77e26cf2540707b09e54393_1280.jpg?id=1845166", alt: "Student 3" },
+        { src: "https://pixabay.com/get/gd94672209379c701b1716edb1d4773cadb889868f1bec56d1c9b77e4c670f0fc085277d2f0304ca5e87eb65f26be9e102817e1219620ee0f079d63f0daad12a8_1280.jpg?id=4333898", alt: "Student 4" },
+        { src: "https://pixabay.com/get/g7309bd8d77d26821c058af993ad068bcd36c5d7aee80c1b7155a3c80949b14d8654d34a03fa1d9301fc88de1b7d398f97e94fb612600d585f963324f7d8485cf_1280.jpg?id=2442565", alt: "Student 5" }
       ]}
     />
   </div>
@@ -96,27 +96,23 @@ export default function LandingPage() {
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwelve
+      <FeatureHoverPattern
       animationType="slide-up"
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
         {
-          id: "1",          label: "Software Development",          title: "Build the Future with Code",          items: [
-            "Master popular programming languages (Python, Java, C#)",            "Develop robust web and mobile applications",            "Learn Agile methodologies and DevOps practices",            "Project-based learning for real-world experience"],
-        },
+          icon: Code,
+          title: "Software Development: Build the Future with Code",          description: "Master popular programming languages (Python, Java, C#), develop robust web and mobile applications, learn Agile methodologies and DevOps practices, and gain real-world experience through project-based learning."},
         {
-          id: "2",          label: "Cyber Security",          title: "Protect the Digital Frontier",          items: [
-            "Understand network security fundamentals and defense tactics",            "Learn ethical hacking techniques and vulnerability assessment",            "Implement robust data protection and privacy protocols",            "Prepare for industry-recognized security certifications"],
-        },
+          icon: ShieldCheck,
+          title: "Cyber Security: Protect the Digital Frontier",          description: "Understand network security fundamentals and defense tactics, learn ethical hacking techniques and vulnerability assessment, implement robust data protection and privacy protocols, and prepare for industry-recognized security certifications."},
         {
-          id: "3",          label: "Data Science & AI",          title: "Uncover Insights, Drive Innovation",          items: [
-            "Explore data analysis, machine learning, and AI algorithms",            "Develop predictive models and data visualization skills",            "Utilize big data tools and platforms (Hadoop, Spark)",            "Solve complex problems with data-driven solutions"],
-        },
+          icon: Brain,
+          title: "Data Science & AI: Uncover Insights, Drive Innovation",          description: "Explore data analysis, machine learning, and AI algorithms, develop predictive models and data visualization skills, utilize big data tools and platforms (Hadoop, Spark), and solve complex problems with data-driven solutions."},
         {
-          id: "4",          label: "Cloud Computing",          title: "Harness the Power of the Cloud",          items: [
-            "Gain expertise in cloud platforms (AWS, Azure, GCP)",            "Learn cloud architecture, deployment, and management",            "Implement scalable and secure cloud solutions",            "Prepare for professional cloud certifications"],
-        },
+          icon: Cloud,
+          title: "Cloud Computing: Harness the Power of the Cloud",          description: "Gain expertise in cloud platforms (AWS, Azure, GCP), learn cloud architecture, deployment, and management, implement scalable and secure cloud solutions, and prepare for professional cloud certifications."},
       ]}
       title="Our Core Programs & Benefits"
       description="Explore our diverse range of specialized courses and certifications designed to make you a master of modern technology and secure your future in the digital world."
@@ -226,4 +222,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #020617;
-  --card: #0f172a;
-  --foreground: #e2e8f0;
-  --primary-cta: #c4d8f9;
-  --primary-cta-text: #020617;
-  --secondary-cta: #041633;
-  --secondary-cta-text: #e2e8f0;
-  --accent: #2d30f3;
-  --background-accent: #1d4ed8;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #120a00e6;
+  --primary-cta: #ff8c42;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #120a00e6;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);