'use client';

import React from "react";
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 (
        <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>
    );
};

export default Home;