Initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.github/workflows/build-deploy-firebase.yml

@@ -0,0 +1,29 @@
+name: Build and Deploy to Firebase Hosting
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Next.js app
+        run: npm run build
+
+      - name: Deploy to Firebase Hosting
+        uses: FirebaseExtended/action-hosting-deploy@v1
+        with:
+          repoToken: "${{ secrets.GH_TOKEN }}"
+          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
+          channelId: live

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/globals.css

@@ -0,0 +1,53 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply h-full antialiased dark:bg-neutral-950 dark:text-neutral-50;
+  }
+    /* For light theme */
+    .theme-light ::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .theme-light ::-webkit-scrollbar-track {
+      background: #f1f1f1;
+    }
+
+    .theme-light ::-webkit-scrollbar-thumb {
+      background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 100%);
+      border-radius: 4px;
+    }
+
+    .theme-light ::-webkit-scrollbar-thumb:hover {
+      background: linear-gradient(to bottom, #e0e0e0 0%, #c0c0c0 100%);
+    }
+
+    /* For dark theme */
+    .theme-dark ::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    .theme-dark ::-webkit-scrollbar-track {
+      background: #888;
+      border-radius: 5px;
+    }
+
+    .theme-dark ::-webkit-scrollbar-thumb {
+      background: linear-gradient(
+        to bottom,
+        #222 0%,
+        #000 100%
+      );
+      border-radius: 5px;
+    }
+
+    .theme-dark ::-webkit-scrollbar-thumb:hover {
+      background: linear-gradient(
+        to bottom,
+        #555 0%,
+        #333 100%
+      );
+    }
+}

app/layout.tsx

@@ -0,0 +1,61 @@
+import { ThemeProvider } from "@/components/Theme/ThemeProvider";
+import localFont from "next/font/local";
+import "./globals.css";
+import { siteConfig } from "@/config/site-config";
+
+const sfPRO = localFont({
+  src: [
+    {
+      path: "./fonts/sf-pro-display_thin.woff2",
+      weight: "100",
+      style: "normal",
+    },
+    {
+      path: "./fonts/sf-pro-display_light.woff2",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "./fonts/sf-pro-display_regular.woff2",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "./fonts/sf-pro-display_medium.woff2",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "./fonts/sf-pro-display_semibold.woff2",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "./fonts/sf-pro-display_bold.woff2",
+      weight: "700",
+      style: "normal",
+    },
+  ],
+  variable: "--font-sfpro",
+});
+
+export const metadata = {
+  title: siteConfig.metadata.title,
+  description: siteConfig.metadata.description,
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html className="h-full" lang="en" suppressHydrationWarning>
+      <body className={sfPRO.className}>
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <div className="flex flex-col h-full">{children}</div>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,24 @@
+import Footer from "@/components/Footer";
+import LeftPanel from "@/components/LeftPanel";
+import RightPanel from "@/components/RightPanel";
+
+export default function Home() {
+  return (
+    <main className="relative flex flex-col items-center flex-1 w-full h-full">
+      {/* Pattern */}
+      <div className="absolute inset-0 z-0 bg-light-pattern dark:bg-dark-pattern bg-verySmall" />
+      {/* Overlay */}
+      <div className="absolute inset-0 z-10 bg-gradient-to-b from-white via-white/90 to-white dark:from-neutral-950 dark:via-neutral-950/90 dark:to-neutral-950" />
+      <div className="container relative z-20 flex flex-col w-full h-full px-6 gap:6 xl:gap-10 xl:flex-row">
+        {/* Left Panel */}
+        <LeftPanel />
+        {/* Right Panel */}
+        <RightPanel />
+        {/* Footer for Mobile */}
+        <div className="flex pb-6 xl:hidden">
+          <Footer />
+        </div>
+      </div>
+    </main>
+  );
+}

components/Footer/index.tsx

@@ -0,0 +1,17 @@
+import { siteConfig } from "@/config/site-config";
+import { ThemeToggle } from "@/components/Theme";
+
+const Footer = () => {
+  return (
+    <div className="flex items-center justify-center w-full pt-6 border-t border-neutral-100 dark:border-neutral-800">
+      <div className="container flex items-center justify-between">
+        <div className="text-xs text-neutral-500">
+          {siteConfig.footerText}
+        </div>
+        <ThemeToggle />
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

components/GridItems/Equipments.tsx

@@ -0,0 +1,38 @@
+import { GridItemInterface } from "@/config/site-config";
+import Image from "next/image";
+import Link from "next/link";
+
+const Equipments = ({ item }: { item: GridItemInterface }) => {
+  return (
+    <div className="flex flex-col items-end justify-end w-full h-full overflow-hidden rounded-3xl">
+      {/* Overlay */}
+      <div className="absolute inset-0 z-10 bg-gradient-to-b from-transparent via-neutral-950/60 to-neutral-950/90" />
+      {/* Image */}
+      <Image
+        className="z-0 object-cover object-center w-full h-full"
+        src={item.image ?? ""}
+        alt="equipments"
+        fill
+      />
+      {/* Content */}
+      <div className="relative z-20 w-full p-4 space-y-3 md:p-8">
+        <div className="text-sm font-medium text-white">{item.title}</div>
+        <div className="flex flex-wrap items-center gap-3">
+          {item.equipments?.map((equipment, index) => {
+            return (
+              <Link
+                className="px-2 py-1 text-sm font-medium bg-white rounded-lg dark:bg-neutral-900"
+                key={equipment.link + index}
+                href={equipment.link}
+              >
+                {equipment.title}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Equipments;

components/GridItems/Mentor.tsx

@@ -0,0 +1,33 @@
+import { GridItemInterface } from "@/config/site-config";
+import Link from "next/link";
+import Icon from "@/components/common/Icon";
+
+const Mentor = ({ item }: { item: GridItemInterface }) => {
+  return (
+    <Link
+      href={item.buttonLink ?? ""}
+      className="flex items-center justify-between gap-4"
+    >
+      {item.icon && <Icon type={item.icon} color={item.color} />}
+      <div className="w-full @lg:text-lg font-semibold">{item.title}</div>
+      <div className="">
+        {/* Top Container */}
+        <div className="flex items-center justify-between">
+          <div className="text-xs text-neutral-500 pr-2">{item.intermediateText}</div>
+          <div className="flex items-center gap-1">
+            <div className="text-xs line-through text-neutral-500">
+              {item.oldPrice}
+            </div>
+            <div>{item.price}</div>
+          </div>
+        </div>
+        {/* Bottom Container */}
+        <div className="font-bold text-primary @lg:text-base text-sm">
+          {item.promotion}
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default Mentor;

components/GridItems/Project.tsx

@@ -0,0 +1,22 @@
+import { GridItemInterface } from "@/config/site-config";
+import { Star } from "lucide-react";
+import Link from "next/link";
+import Icon from "@/components/common/Icon";
+
+const Project = ({ item }: { item: GridItemInterface }) => {
+  return (
+    <Link
+      href={item.buttonLink ?? ""}
+      className="flex items-center justify-between gap-4"
+    >
+      {item.icon && <Icon type={item.icon} color={item.color} />}
+      <div className="w-full @lg:text-lg  font-semibold">{item.title}</div>
+      <div className="flex items-center gap-1">
+        <div className="mt-[1px]">{item.stars}</div>
+        <Star fill="currentColor" size={16} />
+      </div>
+    </Link>
+  );
+};
+
+export default Project;