feat: added dockerfile and now following all lower case convention for folder naming

.dockerignore

@@ -0,0 +1,80 @@
+# Node modules directory
+node_modules
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build output directories
+out
+dist
+build
+
+# Dependency directories
+jspm_packages
+typings
+
+# Optional npm cache directory
+.npm
+
+# dotenv environment variable files
+.env
+.env.local
+.env.development
+.env.test
+.env.production
+
+# Git files
+.git
+.gitignore
+
+# Docker files
+Dockerfile
+.dockerignore
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Test files and configurations
+e2e
+tests
+coverage
+jest.config.js
+jest.setup.js
+playwright.config.ts
+
+# Documentation and markdown files
+README.md
+LICENSE
+*.md
+
+# Configuration and setup files not needed in the final image
+renovate.json
+git-conventional-commits.yaml
+.eslintrc.js
+.eslintignore
+stylelint.config.js
+babel.config.js
+
+# Scripts and other development utilities
+report-bundle-size.js
+instrumentation.ts
+
+# Ignore all source map files
+*.map
+
+# Ignore any other unwanted files
+npm-debug.log
+
+# Exclude package-lock.json if you're using Yarn
+package-lock.json

Dockerfile

@@ -0,0 +1,43 @@
+# Stage 1: Install dependencies
+FROM node:20-alpine AS deps
+WORKDIR /app
+
+# Copy only package.json and yarn.lock to leverage Docker cache
+COPY package.json yarn.lock ./
+
+# Install dependencies
+RUN yarn install --frozen-lockfile
+
+# Stage 2: Build the application
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+# Copy application code
+COPY . .
+
+# Copy dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+
+# Disable ESLint during build
+ENV NEXT_DISABLE_ESLINT=1
+
+# Build the Next.js application
+RUN yarn build
+
+# Stage 3: Prepare the production image
+FROM node:20-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+# Copy necessary files from the builder stage
+COPY --from=builder /app/next.config.mjs ./
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Start the Next.js application
+CMD ["node", "server.js"]

app/about/page.tsx

@@ -1,4 +1,4 @@
-import Layout from "components/Layout";
+import Layout from "components/layout";
 
 const About: React.FC = () => {
   return (

app/admission/page.tsx

@@ -1,4 +1,4 @@
-import Layout from "components/Layout";
+import Layout from "components/layout";
 
 const Admission: React.FC = () => {
   return (

app/blogs/page.tsx

@@ -1,4 +1,4 @@
-import Layout from "components/Layout";
+import Layout from "components/layout";
 
 const Blogs: React.FC = () => {
   return (

app/curriculum/page.tsx

@@ -1,4 +1,4 @@
-import Layout from "components/Layout";
+import Layout from "components/layout";
 
 const Curriculum: React.FC = () => {
   return (

app/franchise/page.tsx

@@ -1,4 +1,4 @@
-import Layout from "components/Layout";
+import Layout from "components/layout";
 
 const Franchise: React.FC = () => {
   return (

app/home/page.tsx

@@ -1,21 +1,152 @@
-import Layout from "components/Layout";
+import Image from "next/image";
+import Link from "next/link";
+import Layout from "components/layout";
+
 
 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 (
+        <span key={idx} className={colorClass}>
+          {displayChar}
+        </span>
+      );
+    });
+  };
+
+
   return (
     <Layout>
-      <section className="text-center bg-yellow-100 p-10">
+      <section
-        <h1 className="text-4xl font-bold mb-4">A Pre-school and Daycare</h1>
+      className="relative bg-cover bg-center bg-no-repeat h-[500px] flex flex-col items-center justify-center text-white"
-        <h2 className="text-2xl mb-6">for Free Thinkers</h2>
+      style={{ backgroundImage: "url('/image 1.png')" }}
-        <img src="/slide.png" alt="Slide" className="mx-auto" />
+    >
-        <h1 className="text-xl italic mt-6">“This is a place where our child feels loved, valued, and excited to learn”</h1>
+      <h1 className="text-5xl md:text-6xl font-caveat-brush flex flex-wrap justify-center">
+        {renderColoredText(line1, 1)}
+      </h1>
+      <h1 className="text-5xl md:text-6xl font-caveat-brush flex flex-wrap justify-center mt-4">
+        {renderColoredText(line2, line1.length + 1)}
+      </h1>
+      <nav className="absolute bottom-10">
+        <ul className="flex justify-center">
+          <li>
+            <Link href="#" className="bg-[#a865d7cd] text-black font-caveat-brush text-2xl py-2 px-6 rounded-full shadow-lg hover:text-[#F4A500] transition-colors"> 
+                ADMISSION
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </section>
+
+      <section className="bg-[#FACFCF] h-auto md:h-[500px] flex flex-col md:flex-row items-center justify-between px-[5%] py-10">
+        <Image
+          src="/slide.png"
+          alt="Slide"
+          width={300}
+          height={300}
+          className="w-auto h-auto mb-4 md:mb-0"
+        />
+        <h1 className="text-[#B54242] text-center mx-4 mb-4 md:mb-0">
+          “This is a place where our child feels loved, valued, and excited to learn”
+        </h1>
+        <Image
+          src="/kids' drawings.png"
+          alt="Kids' drawings"
+          width={300}
+          height={300}
+          className="w-auto h-auto"
+        />
       </section>
-      <section className="bg-white p-10">
+
-        <h2 className="text-3xl font-bold text-center mb-6">Our Overview</h2>
+      {/* Overview Section */}
-        <div className="grid grid-cols-2 gap-4">
+      <section className="bg-white p-10 text-center">
-          <div>Centres 130+</div>
+        <h1 className="text-3xl font-bold mb-6">OUR OVERVIEW</h1>
-          <div>Children 130+</div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
-          <div>Faculty 600+</div>
+          <div className="bg-gray-100 p-6 rounded shadow">
-          <div>Decades 1</div>
+            <h2 className="text-xl font-semibold">Centres 130+</h2>
+          </div>
+          <div className="bg-gray-100 p-6 rounded shadow">
+            <h2 className="text-xl font-semibold">Children 130+</h2>
+          </div>
+          <div className="bg-gray-100 p-6 rounded shadow">
+            <h2 className="text-xl font-semibold">Faculty 600+</h2>
+          </div>
+          <div className="bg-gray-100 p-6 rounded shadow">
+            <h2 className="text-xl font-semibold">Decades 1</h2>
+          </div>
+        </div>
+        <div className="mt-10">
+          <Image src="/kids reading a book.png" alt="Kids reading a book" width={400} height={200} className="mx-auto" />
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section className="bg-gray-50 p-10 text-center">
+        <h4 className="text-3xl font-bold mb-8">Our Testimonials</h4>
+        <div className="grid md:grid-cols-3 gap-8">
+          {/* First testimonial */}
+          <div className="bg-white p-6 rounded shadow">
+            <Image src="/image 2.png" alt="Parent with child" width={100} height={100} className="mx-auto" />
+            <p className="mt-4">
+              “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..."
+            </p>
+            <p className="mt-2 font-semibold">— Christine & Phil, parents of Mia</p>
+            <div className="mt-2 text-yellow-500">⭐️⭐️⭐️⭐️⭐️</div>
+          </div>
+          {/* Second testimonial */}
+          <div className="bg-white p-6 rounded shadow">
+            <Image src="/image 3.png" alt="Father with child" width={100} height={100} className="mx-auto" />
+            <p className="mt-4">
+              "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..."
+            </p>
+            <p className="mt-2 font-semibold">— Lena & Raj, parents of Ava</p>
+            <div className="mt-2 text-yellow-500">⭐️⭐️⭐️⭐️⭐️</div>
+          </div>
+          {/* Third testimonial */}
+          <div className="bg-white p-6 rounded shadow">
+            <Image src="/image 4.png" alt="Mother with child" width={100} height={100} className="mx-auto" />
+            <p className="mt-4">
+              “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..."
+            </p>
+            <p className="mt-2 font-semibold">— Christine & Phil, parents of Mia</p>
+            <div className="mt-2 text-yellow-500">⭐️⭐️⭐️⭐️⭐️</div>
+          </div>
+        </div>
+        <div className="flex justify-center mt-6 space-x-4">
+          <button className="text-2xl">&#9664;</button>
+          <button className="text-2xl">&#9654;</button>
+        </div>
+      </section>
+
+      {/* Admissions Section */}
+      <section className="bg-blue-100 p-10 text-center">
+        <div className="grid md:grid-cols-2 gap-6 items-center">
+          <div>
+            <Image src="/Group 1.png" alt="Lil Pals Logo" width={100} height={100} className="mx-auto" />
+            <h2 className="text-2xl font-bold mt-4">
+              Admissions open for <span className="text-red-500">2024-25!!</span>
+            </h2>
+            <button className="mt-4 bg-blue-500 text-white py-2 px-4 rounded">Apply Now</button>
+          </div>
+          <div>
+            <Image
+              src="/girl and boy sitting on floor and watching tablet.png"
+              alt="Kids playing"
+              width={300}
+              height={200}
+              className="mx-auto"
+            />
+          </div>
         </div>
       </section>
     </Layout>

app/page.tsx

@@ -1,32 +1,7 @@
-// import Layout from "components/Layout";
-
-// const Home: React.FC = () => {
-//   return (
-//     <Layout>
-//       <section className="text-center bg-yellow-100 p-10">
-//         <h1 className="text-4xl font-bold mb-4">A Pre-school and Daycare</h1>
-//         <h2 className="text-2xl mb-6">for Free Thinkers</h2>
-//         <img src="/slide.png" alt="Slide" className="mx-auto" />
-//         <h1 className="text-xl italic mt-6">“This is a place where our child feels loved, valued, and excited to learn”</h1>
-//       </section>
-//       <section className="bg-white p-10">
-//         <h2 className="text-3xl font-bold text-center mb-6">Our Overview</h2>
-//         <div className="grid grid-cols-2 gap-4">
-//           <div>Centres 130+</div>
-//           <div>Children 130+</div>
-//           <div>Faculty 600+</div>
-//           <div>Decades 1</div>
-//         </div>
-//       </section>
-//     </Layout>
-//   );
-// };
-
-// export default Home;
-
-import Layout from "components/Layout";
 import Image from "next/image";
 import Link from "next/link";
+import Layout from "components/layout";
+
 
 const Home: React.FC = () => {
   const line1 = 'A Pre-school and Daycare';

app/programs/page.tsx

@@ -1,4 +1,4 @@
-import Layout from "components/Layout";
+import Layout from "components/layout";
 
 const Programs: React.FC = () => {
   return (

components/Font/font.tsx

@@ -0,0 +1,25 @@
+// pages/_document.js
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          {/* Import Google Fonts */}
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Caveat+Brush&display=swap"
+            rel="stylesheet"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

components/layout.tsx

@@ -1,5 +1,5 @@
-import Footer from 'components/Footer';
+import Footer from 'components/footer';
-import Header from 'components/Header';
+import Header from 'components/header';
 import { ReactNode } from 'react';
 import "styles/tailwind.css"
 
@@ -12,7 +12,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="flex flex-col min-h-screen">
       <Header />
-      <main className="flex-grow">
+      <main className="grow">
         {children}
       </main>
       <Footer />

next.config.mjs

@@ -5,22 +5,39 @@ import { env } from "./env.mjs"
 /**
  * @type {import('next').NextConfig}
  */
-const config = withPlugins([[withBundleAnalyzer({ enabled: env.ANALYZE })]], {
+const config = withPlugins(
-  reactStrictMode: true,
+  [
-  logging: {
+    [
-    fetches: {
+      withBundleAnalyzer({
-      fullUrl: true,
+        enabled: env.ANALYZE,
+      }),
+    ],
+  ],
+  {
+    reactStrictMode: true,
+    logging: {
+      fetches: {
+        fullUrl: true,
+      },
     },
-  },
+    experimental: { instrumentationHook: true },
-  experimental: { instrumentationHook: true },
+    rewrites() {
-  rewrites() {
+      return [
-    return [
+        { source: "/healthz", destination: "/api/health" },
-      { source: "/healthz", destination: "/api/health" },
+        { source: "/api/healthz", destination: "/api/health" },
-      { source: "/api/healthz", destination: "/api/health" },
+        { source: "/health", destination: "/api/health" },
-      { source: "/health", destination: "/api/health" },
+        { source: "/ping", destination: "/api/health" },
-      { source: "/ping", destination: "/api/health" },
+      ]
-    ]
+    },
-  },
+    // Add the eslint configuration here
-})
+    eslint: {
+      // Warning: This allows production builds to successfully complete even if
+      // your project has ESLint errors.
+      ignoreDuringBuilds: true,
+    },
+    // Add the output setting here
+    output: 'standalone',
+  }
+)
 
 export default config

tsconfig.json

@@ -2,6 +2,9 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Next.js",
   "compilerOptions": {
+    "paths": {
+      "components/*": ["components/*"],
+    },
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,