diff --git a/app/page.tsx b/app/page.tsx
index e19901603..08de02f2d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,16 @@
+import { Carousel } from 'components/carousel';
import Footer from 'components/layout/footer';
import Image from 'next/image';
import { Suspense } from 'react';
+import circle2 from '../media/boy_homePage_circle.png';
+import circle3 from '../media/girl_homePage_circle.png';
import HomePageBlob from '../media/homePage_blob.svg';
import littlePerson from '../media/little_person_homePage.png';
+import circle1 from '../media/parent_homePage_circle.png';
+import step1 from '../media/step1.svg';
+import step2 from '../media/step2.svg';
+import step3 from '../media/step3.svg';
+import step4 from '../media/step4.svg';
export const runtime = 'edge';
export const metadata = {
@@ -17,7 +25,7 @@ export default async function HomePage() {
<>
{/* */}
- {/* */}
+ {/*TopSection*/}{' '}
@@ -46,7 +54,99 @@ export default async function HomePage() {
+ {/*How It Works */}{' '}
+
+
How it works
+
+
+
+
Step 1
+
+ We collect grade-specific supply lists from schools and create custom pre-packaged
+ school kits.
+
+
+
+
+
Step 2
+
Parents conveniently buy their child a School Kit with a click of a button.
+
+
+
+
Step 3
+
Our team delivers directly to your classroom. No need for pickup.
+
+
+
+
Step 4
+
+ Send your child to school confidently knowing they have everything needed for
+ learning.
+
+
+
+
+ {/* Why Choose SchoolKits section */}
+
+
+
+ {/* Image container - adjust the positioning as needed */}
+
+ {/* These images should be positioned absolutely within this relative container as per your design */}
+
+
+
+ {/* Add more images as needed */}
+
+
+
+
Why Choose SchoolKits?
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+ irure dolor in reprehenderit in voluptate velit esse cillum dolore.
+
+
+ {/* Repeat this structure for each bullet point */}
+
Lorem ipsum dolor sit amet
+
Lorem ipsum dolor sit amet
+
Lorem ipsum dolor sit amet
+
Lorem ipsum dolor sit amet
+
Lorem ipsum dolor sit amet
+ {/* ... */}
+
+
+
+
+
+
Parents love us
+
+
diff --git a/components/carousel.tsx b/components/carousel.tsx
index 286d4dfea..9d1d372f5 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -1,7 +1,51 @@
import { getCollectionProducts } from 'lib/shopify';
-import Link from 'next/link';
import { GridTileImage } from './grid/tile';
+const testimonials = [
+ {
+ name: 'Parent name',
+ description:
+ 'Non risus viverra enim, quis. Eget vitae arcu vivamus sit tellus, viverra turpis lorem. Varius a turpis urna id porttitor.',
+ school: 'Houston Quran Academy'
+ },
+ {
+ name: 'Parent name',
+ description:
+ 'Non risus viverra enim, quis. Eget vitae arcu vivamus sit tellus, viverra turpis lorem. Varius a turpis urna id porttitor.',
+ school: 'Houston Quran Academy'
+ },
+ {
+ name: 'Parent name',
+ description:
+ 'Non risus viverra enim, quis. Eget vitae arcu vivamus sit tellus, viverra turpis lorem. Varius a turpis urna id porttitor.',
+ school: 'ILM Academy'
+ },
+ {
+ name: 'Parent name',
+ description:
+ 'Non risus viverra enim, quis. Eget vitae arcu vivamus sit tellus, viverra turpis lorem. Varius a turpis urna id porttitor.',
+ school: 'Iman Academy SE'
+ },
+ {
+ name: 'Parent name',
+ description:
+ 'Non risus viverra enim, quis. Eget vitae arcu vivamus sit tellus, viverra turpis lorem. Varius a turpis urna id porttitor.',
+ school: 'Houston Quran Academy'
+ },
+ {
+ name: 'Parent name',
+ description:
+ 'Non risus viverra enim, quis. Eget vitae arcu vivamus sit tellus, viverra turpis lorem. Varius a turpis urna id porttitor.',
+ school: 'Iman Academy SW'
+ },
+ {
+ name: 'Parent name',
+ description:
+ 'Non risus viverra enim, quis. Eget vitae arcu vivamus sit tellus, viverra turpis lorem. Varius a turpis urna id porttitor.',
+ school: 'Ilm Academy'
+ }
+];
+
export async function Carousel() {
// Collections that start with `hidden-*` are hidden from the search page.
const products = await getCollectionProducts({ collection: 'hidden-homepage-carousel' });
@@ -14,24 +58,22 @@ export async function Carousel() {
return (