Merge branch 'dev' into 'production'

Merge branch 'Homepage Refactoring - Pt .3' into 'production'

See merge request rheinsw/website!30

components/Home/Home.tsx

@@ -1,26 +1,45 @@
 'use client';
 
 import React from "react";
-import Hero from "./Hero/Hero";
-import About from "@/components/Home/About/About";
-import ContactCTA from "@/components/Home/Contact/ContactCTA";
-import {SectionDivider1, SectionDivider2} from "@/components/Helper/SectionDivider";
-import HomeServices from "@/components/Home/HomeServices";
-import TechStack from "@/components/Home/TechStack";
+import About from "@/components/Home/Sections/About";
+import ContactCTA from "@/components/Home/Sections/ContactCTA";
+import HomeServices from "@/components/Home/Sections/HomeServices";
+import TechStack from "@/components/Home/Sections/TechStack";
+import Section from "@/components/Section";
+import {motion} from "framer-motion";
+import {useThemeColors} from "@/utils/useThemeColors";
+import Hero from "@/components/Home/Sections/Hero";
 
 const Home = () => {
+    const colors = useThemeColors();
+
     return (
-        <div className="overflow-hidden">
-            <Hero/>
-            <SectionDivider1/>
-            <About/>
-            <SectionDivider2/>
-            <HomeServices/>
-            <SectionDivider1/>
-            <TechStack/>
-            <SectionDivider2/>
-            <ContactCTA/>
-        </div>
+        <motion.div
+            initial={{opacity: 0, y: 20}}
+            animate={{opacity: 1, y: 0}}
+            transition={{duration: 0.7, ease: "easeOut"}}
+            className="overflow-hidden"
+        >
+            <Section style={{backgroundColor: colors.primaryBg}}>
+                <Hero/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <About/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <HomeServices/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.secondaryBg}} shadow>
+                <TechStack/>
+            </Section>
+
+            <Section style={{backgroundColor: colors.primaryBg}} shadow>
+                <ContactCTA/>
+            </Section>
+        </motion.div>
     );
 };