homepage & user-details page. Along with backend.

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .turbo
-.DS_Store
+.DS_Store
+todo.md

apps/server/.env.example

@@ -8,7 +8,7 @@ GOOGLE_REDIRECT_URI="http://localhost:3000/auth/google/callback"
 CORS_ORIGIN="http://localhost:5173"
 
 # Frontend
-FRONTEND_URL="http://localhost:5000"
+FRONTEND_URL="http://localhost:5173"
 
 # Server
 PORT="3000"

apps/server/src/index.ts

@@ -17,7 +17,7 @@ const baseCorsConfig = {
 
 const fastify = Fastify({
 	logger: true,
-        ignoreTrailingSlash: true
+	ignoreTrailingSlash: true,
 });
 
 fastify.register(fastifyCookie, {

apps/web/.env.example

@@ -1 +1 @@
-VITE_SERVER_URL=
+VITE_BACKEND_API_URL=localhost:3000

apps/web/src/components/LandingPage/hero.tsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router";
 import { Button } from "@/components/ui/button";
 
 const Bee = () => {
@@ -21,29 +22,6 @@ const Hero = () => {
 		<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
 			<div className="absolute inset-0 bg-gradient-to-br from-background via-muted/20 to-background z-0" />
 
-			<div className="absolute inset-0 overflow-hidden pointer-events-none z-10">
-				<div
-					className="absolute top-10 left-10 w-2 h-2 bg-accent rounded-full animate-bounce"
-					style={{ animationDelay: "0s", animationDuration: "3s" }}
-				></div>
-				<div
-					className="absolute top-20 right-20 w-1 h-1 bg-primary rounded-full animate-bounce"
-					style={{ animationDelay: "1s", animationDuration: "4s" }}
-				></div>
-				<div
-					className="absolute top-40 left-1/4 w-1.5 h-1.5 bg-secondary rounded-full animate-bounce"
-					style={{ animationDelay: "2s", animationDuration: "5s" }}
-				></div>
-				<div
-					className="absolute bottom-20 right-10 w-2 h-2 bg-accent rounded-full animate-bounce"
-					style={{ animationDelay: "0.5s", animationDuration: "3.5s" }}
-				></div>
-				<div
-					className="absolute bottom-40 left-16 w-1 h-1 bg-primary rounded-full animate-bounce"
-					style={{ animationDelay: "1.5s", animationDuration: "4.5s" }}
-				></div>
-			</div>
-
 			<div className="container mx-auto px-4 text-center relative z-20">
 				<div className="max-w-4xl mx-auto fade-in-up">
 					<div className="flex justify-center mb-8 space-x-4">
@@ -95,21 +73,23 @@ const Hero = () => {
 						</p>
 					</div>
 
-					<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12 fade-in-up">
-						<Button
-							size="lg"
-							className="neo-brutal-button bg-foreground text-black hover:bg-primary/90 border-primary text-lg px-8 py-6 ghibli-button pixel-font"
-						>
-							🚀 JOIN THE BUZZ
-						</Button>
-						<Button
-							size="lg"
-							variant="outline"
-							className="neo-brutal-button bg-secondary border-primary text-primary hover:bg-secondary  hover:text-black text-lg px-8 py-6 ghibli-button pixel-font"
-						>
-							📖 EXPLORE FIRST
-						</Button>
-					</div>
+					<Link to="/login">
+						<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12 fade-in-up">
+							<Button
+								size="lg"
+								className="neo-brutal-button bg-foreground text-black hover:bg-primary/90 border-primary text-lg px-8 py-6 ghibli-button pixel-font"
+							>
+								🚀 JOIN THE BUZZ
+							</Button>
+							<Button
+								size="lg"
+								variant="outline"
+								className="neo-brutal-button bg-secondary border-primary text-primary hover:bg-secondary  hover:text-black text-lg px-8 py-6 ghibli-button pixel-font"
+							>
+								📖 EXPLORE FIRST
+							</Button>
+						</div>
+					</Link>
 
 					<div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-2xl mx-auto fade-in-up">
 						<div className="neo-brutal-card p-4 bg-primary-20 border-foreground ghibli-feature-card">

apps/web/src/components/ui/button.tsx

@@ -3,6 +3,7 @@ import { Slot as SlotPrimitive } from "radix-ui";
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
+import "@/styles/components/button.css";
 
 const buttonVariants = cva(
 	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",

apps/web/src/components/ui/card.tsx

@@ -1,6 +1,7 @@
 import type * as React from "react";
 
 import { cn } from "@/lib/utils";
+import "@/styles/components/card.css";
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
 	return (

apps/web/src/components/LandingPage/footer.tsx → apps/web/src/components/ui/footer.tsx

@@ -1,4 +1,5 @@
 import { Instagram, Linkedin, Mail, Twitter } from "lucide-react";
+import "@/styles/components/card.css";
 
 const Footer = () => {
 	return (

apps/web/src/components/LandingPage/header.tsx → apps/web/src/components/ui/header.tsx

@@ -7,11 +7,7 @@ const Header = () => {
 		<header className="border-b-4 border-primary bg-background/95 backdrop-blur-sm sticky top-0 z-50">
 			<div className="container mx-auto px-4 py-4 flex items-center justify-between">
 				<Link to="/" className="flex items-center space-x-2">
-					<img
-						src="/public/images/logo.png"
-						alt="IIITBuzz Logo"
-						className="w-8 h-8"
-					/>
+					<img src="/images/logo.png" alt="IIITBuzz Logo" className="w-8 h-8" />
 					<h1 className="pixel-font text-xl text-primary">IIITBuzz</h1>
 				</Link>
 

apps/web/src/index.css

@@ -12,6 +12,7 @@
 	--button-green: #22c55e;
 	--button-yellow: #facc15;
 	--button-red: #ef4444;
+	--brutal-blue: #4281ff;
 	--muted-foreground: #c1cbde;
 	--ring: #c084fc;
 	--footer: #000000b7;
@@ -45,6 +46,7 @@
 	--sidebar-border: #c084fc;
 	--sidebar-ring: #c084fc;
 	--background-image: url("/backgrounds/bg-light.png");
+	--brutal-blue: #4281ff;
 }
 
 .dark {
@@ -76,8 +78,54 @@
 	--sidebar-border: #3c3c4a;
 	--sidebar-ring: #bca4e2;
 	--background-image: url("/backgrounds/bg-dark.png");
+	--brutal-blue: #4281ff;
 }
 
 body {
 	@apply transition-colors duration-500;
 }
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+@layer utilities {
+	.bg-sidebar {
+		background-color: var(--sidebar);
+	}
+	.text-sidebar-foreground {
+		color: var(--sidebar-foreground);
+	}
+	.bg-background {
+		background-color: var(--background);
+	}
+	.bg-surface {
+		background-color: var(--surface);
+	}
+	.text-foreground {
+		color: var(--foreground);
+	}
+	.text-primary {
+		color: var(--text-primary);
+	}
+	.text-secondary {
+		color: var(--text-secondary);
+	}
+	.border-primary {
+		border-color: var(--primary);
+	}
+	.bg-accent {
+		background-color: var(--accent);
+	}
+	.text-accent {
+		color: var(--accent);
+	}
+	.text-muted-foreground {
+		color: var(--muted-foreground);
+	}
+}

apps/web/src/root.tsx

@@ -8,7 +8,7 @@ import {
 } from "react-router";
 import type { Route } from "./+types/root";
 import "./index.css";
-import "./styles/landingpage.css";
+import "./styles/pages/landingpage.css";
 import { ThemeProvider } from "./components/theme-provider";
 import { Toaster } from "./components/ui/sonner";
 

apps/web/src/routes/_index.tsx

@@ -1,15 +1,13 @@
 import FeaturesPage from "@/components/LandingPage/features";
-import Footer from "@/components/LandingPage/footer";
-import Header from "@/components/LandingPage/header";
 import Hero from "@/components/LandingPage/hero";
+import Footer from "@/components/ui/footer";
+import Header from "@/components/ui/header";
 
 export default function HomePage() {
 	return (
 		<div className="flex flex-col min-h-screen">
 			<Header />
 			<div className="relative flex-1">
-				{/* Pattern background covers all main content */}
-				<div className="absolute inset-0 pixel-pattern opacity-10 -z-10" />
 				<main className="relative z-10">
 					<Hero />
 					<FeaturesPage />