From d0e657c49d42237b5c370271a3a2210096b37aa8 Mon Sep 17 00:00:00 2001 From: Dev Singh Date: Sun, 22 Sep 2024 19:54:54 +0530 Subject: [PATCH] feat: added the home page --- app/home/page.tsx | 2 +- app/page.tsx | 180 ++++++++++++++++-- components/Font/index.tsx | 25 +++ components/Header/index.tsx | 4 +- public/Boy shaking hands with someone.png | Bin 0 -> 95915 bytes public/Cloud.png | Bin 0 -> 6083 bytes public/Group 1.png | Bin 0 -> 15428 bytes public/Group 10.png | Bin 0 -> 51947 bytes public/Group 11.png | Bin 0 -> 77398 bytes public/Group 12.png | Bin 0 -> 107096 bytes public/Group 13.png | Bin 0 -> 59570 bytes public/Group 14.png | Bin 0 -> 84113 bytes public/Group 15.png | Bin 0 -> 31928 bytes public/Group 16.png | Bin 0 -> 32521 bytes public/Group 3.png | Bin 0 -> 36652 bytes public/Group 4.png | Bin 0 -> 206151 bytes public/Group 5.png | Bin 0 -> 75806 bytes public/Group 6.png | Bin 0 -> 132020 bytes public/Group 7.png | Bin 0 -> 125367 bytes public/Group 8.png | Bin 0 -> 121129 bytes ...Loudspeaker and social media marketing.png | Bin 0 -> 20235 bytes public/Searching the web on tablet.png | Bin 0 -> 50347 bytes ...r view of a blue round check mark icon.png | Bin 0 -> 61587 bytes public/Vission And Mission.png | Bin 0 -> 9291 bytes public/brain shaped cloud.png | Bin 0 -> 33312 bytes ...ren's toy square with different shapes.png | Bin 0 -> 35000 bytes public/done mark.png | Bin 0 -> 11797 bytes public/garland.png | Bin 0 -> 23624 bytes ...y sitting on floor and watching tablet.png | Bin 0 -> 71929 bytes public/gray wiggly flower shape.png | Bin 0 -> 149593 bytes public/image (1).png | Bin 0 -> 167898 bytes public/image (2).png | Bin 0 -> 79691 bytes public/image 1.png | Bin 0 -> 660128 bytes public/image 12.png | Bin 0 -> 930248 bytes public/image 13.png | Bin 0 -> 199099 bytes public/image 2.png | Bin 0 -> 201405 bytes public/image 3.png | Bin 0 -> 229104 bytes public/image 4.png | Bin 0 -> 153214 bytes public/image 6.png | Bin 0 -> 515034 bytes public/image.png | Bin 0 -> 161490 bytes public/kids reading a book.png | Bin 0 -> 114745 bytes public/kids' drawings.png | Bin 0 -> 18753 bytes .../multicolored smartphone notifications.png | Bin 0 -> 73753 bytes public/orange children's teepee.png | Bin 0 -> 23893 bytes public/pink candy.png | Bin 0 -> 21045 bytes public/purple scribble.png | Bin 0 -> 180872 bytes public/slide.png | Bin 0 -> 35096 bytes tailwind.config.js | 53 ++++++ 48 files changed, 250 insertions(+), 14 deletions(-) create mode 100644 components/Font/index.tsx create mode 100644 public/Boy shaking hands with someone.png create mode 100644 public/Cloud.png create mode 100644 public/Group 1.png create mode 100644 public/Group 10.png create mode 100644 public/Group 11.png create mode 100644 public/Group 12.png create mode 100644 public/Group 13.png create mode 100644 public/Group 14.png create mode 100644 public/Group 15.png create mode 100644 public/Group 16.png create mode 100644 public/Group 3.png create mode 100644 public/Group 4.png create mode 100644 public/Group 5.png create mode 100644 public/Group 6.png create mode 100644 public/Group 7.png create mode 100644 public/Group 8.png create mode 100644 public/Loudspeaker and social media marketing.png create mode 100644 public/Searching the web on tablet.png create mode 100644 public/Three-quarter view of a blue round check mark icon.png create mode 100644 public/Vission And Mission.png create mode 100644 public/brain shaped cloud.png create mode 100644 public/children's toy square with different shapes.png create mode 100644 public/done mark.png create mode 100644 public/garland.png create mode 100644 public/girl and boy sitting on floor and watching tablet.png create mode 100644 public/gray wiggly flower shape.png create mode 100644 public/image (1).png create mode 100644 public/image (2).png create mode 100644 public/image 1.png create mode 100644 public/image 12.png create mode 100644 public/image 13.png create mode 100644 public/image 2.png create mode 100644 public/image 3.png create mode 100644 public/image 4.png create mode 100644 public/image 6.png create mode 100644 public/image.png create mode 100644 public/kids reading a book.png create mode 100644 public/kids' drawings.png create mode 100644 public/multicolored smartphone notifications.png create mode 100644 public/orange children's teepee.png create mode 100644 public/pink candy.png create mode 100644 public/purple scribble.png create mode 100644 public/slide.png diff --git a/app/home/page.tsx b/app/home/page.tsx index 757b825..e5cffd6 100644 --- a/app/home/page.tsx +++ b/app/home/page.tsx @@ -6,7 +6,7 @@ const Home: React.FC = () => {

A Pre-school and Daycare

for Free Thinkers

- Slide + Slide

“This is a place where our child feels loved, valued, and excited to learn”

diff --git a/app/page.tsx b/app/page.tsx index 757b825..9b36d2d 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,21 +1,177 @@ +// import Layout from "components/Layout"; + +// const Home: React.FC = () => { +// return ( +// +//
+//

A Pre-school and Daycare

+//

for Free Thinkers

+// Slide +//

“This is a place where our child feels loved, valued, and excited to learn”

+//
+//
+//

Our Overview

+//
+//
Centres 130+
+//
Children 130+
+//
Faculty 600+
+//
Decades 1
+//
+//
+// +// ); +// }; + +// export default Home; + import Layout from "components/Layout"; +import Image from "next/image"; +import Link from "next/link"; const Home: React.FC = () => { + const line1 = 'A Pre-school and Daycare'; + const line2 = 'for Free Thinkers'; + + const renderColoredText = (text: string, startIndex: number) => { + let colorIndex = startIndex; + return text.split('').map((char, idx) => { + const colorClass = `text-color-${colorIndex}`; + colorIndex += 1; + + // Replace space with non-breaking space to preserve spacing + const displayChar = char === ' ' ? '\u00A0' : char; + + return ( + + {displayChar} + + ); + }); + }; + + return ( -
-

A Pre-school and Daycare

-

for Free Thinkers

- Slide -

“This is a place where our child feels loved, valued, and excited to learn”

+
+

+ {renderColoredText(line1, 1)} +

+

+ {renderColoredText(line2, line1.length + 1)} +

+ +
+ +
+ Slide +

+ “This is a place where our child feels loved, valued, and excited to learn” +

+ Kids' drawings
-
-

Our Overview

-
-
Centres 130+
-
Children 130+
-
Faculty 600+
-
Decades 1
+ + {/* Overview Section */} +
+

OUR OVERVIEW

+
+
+

Centres 130+

+
+
+

Children 130+

+
+
+

Faculty 600+

+
+
+

Decades 1

+
+
+
+ Kids reading a book +
+
+ + {/* Testimonials Section */} +
+

Our Testimonials

+
+ {/* First testimonial */} +
+ Parent with child +

+ “Lil Pals has been a wonderful experience for our daughter, Mia. From the moment we stepped into the school, we were impressed by the warm and welcoming environment..." +

+

— Christine & Phil, parents of Mia

+
⭐️⭐️⭐️⭐️⭐️
+
+ {/* Second testimonial */} +
+ Father with child +

+ "Lil Pals has been a wonderful experience for our daughter, Ava. From the moment we joined, we were impressed by the warm and nurturing environment..." +

+

— Lena & Raj, parents of Ava

+
⭐️⭐️⭐️⭐️⭐️
+
+ {/* Third testimonial */} +
+ Mother with child +

+ “Lil Pals has been a wonderful experience for our daughter, Mia. From the moment we stepped into the school, we were impressed by the warm and welcoming environment..." +

+

— Christine & Phil, parents of Mia

+
⭐️⭐️⭐️⭐️⭐️
+
+
+
+ + +
+
+ + {/* Admissions Section */} +
+
+
+ Lil Pals Logo +

+ Admissions open for 2024-25!! +

+ +
+
+ Kids playing +
diff --git a/components/Font/index.tsx b/components/Font/index.tsx new file mode 100644 index 0000000..654e6e5 --- /dev/null +++ b/components/Font/index.tsx @@ -0,0 +1,25 @@ +// pages/_document.js +import Document, { Html, Head, Main, NextScript } from 'next/document'; + +class MyDocument extends Document { + render() { + return ( + + + {/* Import Google Fonts */} + + + + +
+ + + + ); + } +} + +export default MyDocument; diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 7254859..18f2f93 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -1,10 +1,12 @@ import Link from 'next/link'; +import Image from "next/image"; + const Header: React.FC = () => { return (
- logo + logo