bsoc-bitbyte · DjYash007 · Jul 2, 2026
diff --git a/app/globals.css b/app/globals.css
@@ -1,12 +1,15 @@
 @import "tailwindcss";
 
-*,
-::before,
-::after {
+@layer base {
+  *,
+  ::before,
+  ::after {
     margin: 0;
     padding: 0;
+  }
 }
 
+
 @theme {
 
 
@@ -28,5 +31,4 @@
     --text-base: 16px;
     --text-xl: 20px;
 
-
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,20 +1,25 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Poppins, Courier_Prime } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const poppins = Poppins({
+  variable: "--font-poppins",
   subsets: ["latin"],
+  weight: ["400", "500", "600"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const courierPrime = Courier_Prime({
+  variable: "--font-prime",
   subsets: ["latin"],
+  weight: ["400", "700"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "YDO — You Deserve One",
+  description: "A campus matchmaking experience built around privacy, mutual interest & meaningful connections.",
+  other: {
+    "mobile-web-app-capable": "yes",
+  },
 };
 
 export default function RootLayout({
@@ -25,7 +30,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${poppins.variable} ${courierPrime.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,9 @@
-import { redirect } from "next/navigation";
+import LandingPage from "@/components/pages/LandingPage";
 
 export default function Home() {
-  redirect("/login");
-}
+  return (
+    <div className="min-h-screen bg-(--color-background)">
+      <LandingPage />
+    </div>
+  );
+}
diff --git a/components/pages/LandingPage.tsx b/components/pages/LandingPage.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import Image from "next/image";
+import PrimaryButton from "@/components/ui/PrimaryButton";
+import StudentCapsule from "@/components/ui/StudentCapsule";
+
+export default function LandingPage() {
+  return (
+    <main
+      className="min-h-screen w-full relative overflow-x-hidden 
+      bg-(--color-background) flex flex-col 
+      items-center justify-between
+      pt-44 pb-48 px-6 gap-0"
+    >
+        <img
+            src="/assets/Curls.svg"
+            alt=""
+            className="absolute inset-0 
+            w-full h-full 
+            object-fill 
+            pointer-events-none
+            z-0"
+        />
+
+    <div className="flex flex-col items-center gap-2 z-10">
+      <Image
+        src="/assets/YDO.svg"
+        width={273}
+        height={95}
+        alt="YDO"
+        priority
+      />
+      <p className="font-(--font-poppins) 
+      text-(--text-xs) text-(--color-stroke) 
+      tracking-wide">
+        You Deserve One
+      </p>
+    </div>
+
+      <p className="font-(--font-poppins) 
+      text-[16px] text-(--color-stroke) 
+      text-center max-w-[280px] leading-relaxed z-10">
+        A campus matchmaking experience built around privacy, mutual interest & meaningful{" "}
+        <br />
+        <span className="text-(--color-foreground) font-bold">Connections.</span>
+    </p>
+
+     <div className="flex flex-col items-center gap-2 z-10">
+        <PrimaryButton onClick={() => {}}>Get Started →</PrimaryButton>
+        <StudentCapsule />
+    </div>
+
+    </main>
+  );
+}
diff --git a/components/ui/PrimaryButton.tsx b/components/ui/PrimaryButton.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+interface PrimaryButtonProp{
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+export default function PrimaryButton({children, onClick, disabled = false, className,}:PrimaryButtonProp){
+    return (
+        <button
+            onClick={onClick}
+            disabled={disabled}
+            className={`
+                    w-[300px] h-[50px]
+                    bg-(--color-primary) border border-(--color-stroke) rounded-[10px]
+                    font-(--font-poppins) --text-base font-medium text-(--color-stroke)
+                    flex items-center justify-center
+                    transition-opacity duration-150 hover:opacity-85 disabled:opacity-60
+                    ${className}
+                `}
+            >
+            {children}
+            </button>
+    );
+}
diff --git a/components/ui/StudentCapsule.tsx b/components/ui/StudentCapsule.tsx
@@ -0,0 +1,20 @@
+interface StudentCapsuleProps {
+  className?: string;
+}
+
+export default function StudentCapsule({ className = "" }: StudentCapsuleProps) {
+  return (
+    <p
+      className={`
+        bg-white
+        border border-(--color-stroke) 
+        rounded-[12px] 
+        font-(--font-poppins) text-[12px] text-(--color-stroke) 
+        px-6 py-1.5 leading-none whitespace-nowrap w-fit
+        ${className}
+      `}
+    >
+      for iiitdmj students only
+    </p>
+  );
+}
diff --git a/next.config.ts b/next.config.ts
@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  allowedDevOrigins: ["127.0.0.1"],
+  allowedDevOrigins: ["127.0.0.1", "172.20.10.3"],
 };
 
 export default nextConfig;
diff --git a/public/assets/Curls.svg b/public/assets/Curls.svg
diff --git a/public/assets/YDO.svg b/public/assets/YDO.svg