first commit

components/Home/Home.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState, useEffect, lazy, Suspense } from "react";
+import { Audio } from "react-loader-spinner";
+const Hero1 = lazy(() => import('../Hero1'));
+import Hero2 from '../Hero2'
+import CoursesSilder from "../CoursesSilder";
+import ContactForm from '../ContactForm'
+import Loading from '../Loading'
+import Footer from '../Footer'
+import { fetchCourses } from '../../utils/index'
+import { CoursesArrayProps, CoursesProps, SettingsProps } from "@/types";
+import Whatsapp from "../Whatsapp";
+const Home = ({ courses, settings }: { courses: CoursesProps[], settings: SettingsProps }) => {
+  const [loading, setLoading] = useState(true);
+  // const [courses, setCourses] = useState<CoursesProps[]>([]);
+
+  useEffect(() => {
+    const loadCourses = async () => {
+      setLoading(true);
+      await new Promise(resolve => setTimeout(resolve, 300)); // 0.5 second delay
+      setLoading(false);
+    }; loadCourses();
+  }, []);
+
+  const startLoading = () => setLoading(true);
+  const stopLoading = () => setLoading(false);
+
+  console.log(courses);
+  return (
+    <div className='bg-[#F2D5D5]'>
+      {loading ? (
+        <div className="flex justify-center items-center h-screen">
+          <Suspense fallback={<div>Loading...</div>}>
+            <Loading />
+          </Suspense>
+        </div>
+      ) : (
+        <div>
+          <Hero1 />
+          <Hero2 settings={settings} />
+          <Suspense fallback={<div>Loading...</div>}>
+            <CoursesSilder courses={courses} />
+          </Suspense>
+          <ContactForm startLoading={startLoading} stopLoading={stopLoading} />
+          <Whatsapp settings={settings} />
+          <Footer settings={settings} />
+        </div>
+      )}
+    </div>
+  )
+}
+export default Home