feat: Create Landing Page for IIITBuzz [Task 2]

.gitignore

@@ -1,3 +1,3 @@
 node_modules
 .turbo
-Docker
+.DS_Store

apps/web/.gitignore

@@ -29,6 +29,7 @@
 .env*
 !.env.example
 .DS_Store
+
 *.pem
 *.local
 
@@ -49,4 +50,4 @@ next-env.d.ts
 .idea
 
 # Other
-dev-dist
+dev-dist

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

@@ -0,0 +1,88 @@
+import { Link } from "react-router";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+const FeaturesPage = () => {
+	const featuresPage = [
+		{
+			key: "discussion-boards",
+			icon: "💬",
+			title: "Discussion Boards",
+			description:
+				"Engage in meaningful conversations about academics, projects, and campus life with your peers.",
+			color: "border-foreground",
+		},
+		{
+			key: "qa-sections",
+			icon: "❓",
+			title: "Q&A Sections",
+			description:
+				"Get quick answers to your questions from seniors, peers, and subject experts.",
+			color: "border-secondary",
+		},
+		{
+			key: "event-announcements",
+			icon: "📅",
+			title: "Event Announcements",
+			description:
+				"Stay updated with the latest campus events, workshops, and important announcements.",
+			color: "border-accent",
+		},
+		{
+			key: "study-resources",
+			icon: "📚",
+			title: "Study Resources",
+			description:
+				"Access shared notes, previous year papers, and study materials contributed by the community.",
+			color: "border-destructive",
+		},
+	];
+
+	return (
+		<section
+			id="features"
+			className="py-20 bg-transparent relative overflow-hidden"
+		>
+			<div className="container mx-auto px-4 relative z-10">
+				<div className="text-center mb-16">
+					<h2 className="pixel-font text-3xl md:text-4xl mb-4 text-primary ghibli-title">
+						POWER-UP YOUR COLLEGE EXPERIENCE
+					</h2>
+					<p className="text-xl text-grey-200 max-w-2xl mx-auto">
+						Level up your academic journey with features designed for the modern
+						IIIT student
+					</p>
+				</div>
+
+				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-8">
+					{featuresPage.map((feature, index) => (
+						<Link to="/comingsoon" key={feature.key}>
+							<Card
+								className={`neo-brutal-card ${feature.color} hover:scale-105 transition-transform duration-200 ghibli-feature-card relative overflow-hidden cursor-pointer`}
+								style={{ animationDelay: `${index * 0.2}s` }}
+							>
+								<CardHeader className="text-center">
+									<div
+										className="text-4xl mb-4 avatar-float"
+										style={{ animationDelay: `${index * 0.1}s` }}
+									>
+										{feature.icon}
+									</div>
+									<CardTitle className="pixel-font text-foreground text-lg">
+										{feature.title}
+									</CardTitle>
+								</CardHeader>
+								<CardContent>
+									<p className="text-sm text-muted-foreground text-center">
+										{feature.description}
+									</p>
+								</CardContent>
+							</Card>
+						</Link>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default FeaturesPage;

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

@@ -0,0 +1,142 @@
+import { Instagram, Linkedin, Mail, Twitter } from "lucide-react";
+
+const Footer = () => {
+	return (
+		<footer className="bg-background border-t-4 border-primary py-12">
+			<div className="container mx-auto px-4">
+				<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+					<div className="col-span-1 md:col-span-2">
+						<div className="flex items-center space-x-2 mb-4">
+							<div className="w-8 h-8 bg-secondary border-2 border-primary pixel-pulse"></div>
+							<h3 className="pixel-font text-xl text-primary">IIITBuzz</h3>
+						</div>
+						<p className="text-sm text-footer mb-4">
+							The ultimate community platform for IIIT students. Connect, learn,
+							and grow together in our vibrant digital campus ecosystem.
+						</p>
+						<div className="flex space-x-4">
+							<a
+								href="https://www.linkedin.com/company/p-soc"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="w-8 h-8 neo-brutal-card bg-foreground/20 border-foreground flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
+							>
+								<Linkedin className="text-foreground w-4 h-4" />
+							</a>
+
+							<a
+								href="mailto:tech-society@eiiit-bh.ac.in"
+								className="w-8 h-8 neo-brutal-card bg-foreground/20 border-foreground flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
+							>
+								<Mail className="text-foreground w-4 h-4" />
+							</a>
+
+							<a
+								href="https://twitter.com/psociiit"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="w-8 h-8 neo-brutal-card bg-secondary/20 border-secondary flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
+							>
+								<Twitter className="text-secondary w-4 h-4" />
+							</a>
+
+							<a
+								href="https://www.instagram.com/psoc_iiitbh"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="w-8 h-8 neo-brutal-card bg-accent/20 border-accent flex items-center justify-center cursor-pointer hover:scale-110 transition-transform"
+							>
+								<Instagram className="text-accent w-4 h-4" />
+							</a>
+						</div>
+					</div>
+
+					<div>
+						<h4 className="pixel-font text-sm text-primary mb-4">
+							QUICK LINKS
+						</h4>
+						<ul className="space-y-2 text-sm">
+							<li>
+								<a
+									href="#about"
+									className="text-footer hover:text-primary transition-colors"
+								>
+									About Us
+								</a>
+							</li>
+							<li>
+								<a
+									href="#features"
+									className="text-footer hover:text-primary transition-colors"
+								>
+									Features
+								</a>
+							</li>
+							<li>
+								<a
+									href="#contact"
+									className="text-footer hover:text-primary transition-colors"
+								>
+									Contact
+								</a>
+							</li>
+							<li>
+								<a
+									href="#help"
+									className="text-footer hover:text-primary transition-colors"
+								>
+									Help & Support
+								</a>
+							</li>
+						</ul>
+					</div>
+
+					<div>
+						<h4 className="pixel-font text-sm text-primary mb-4">POLICIES</h4>
+						<ul className="space-y-2 text-sm">
+							<li>
+								<a
+									href="#privacy"
+									className="text-footer hover:text-primary transition-colors"
+								>
+									Privacy Policy
+								</a>
+							</li>
+							<li>
+								<a
+									href="#terms"
+									className="text-footer hover:text-primary transition-colors"
+								>
+									Terms of Service
+								</a>
+							</li>
+							<li>
+								<a
+									href="#community"
+									className="text-footer hover:text-primary transition-colors"
+								>
+									Community Guidelines
+								</a>
+							</li>
+							<li>
+								<a
+									href="#cookies"
+									className="text-footer hover:text-primary transition-colors"
+								>
+									Cookie Policy
+								</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+
+				<div className="border-t-2 border-primary/30 pt-8 text-center">
+					<p className="pixel-font text-xs text-footer m-4">© 2025 IIITBuzz</p>
+					<p className="text-xs text-footer mt-2">by- P-Soc IIIT-bh</p>
+				</div>
+			</div>
+		</footer>
+	);
+};
+
+export default Footer;

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

@@ -0,0 +1,35 @@
+import { Link } from "react-router";
+import { Button } from "@/components/ui/button";
+import { ModeToggle } from "../mode-toggle";
+
+const Header = () => {
+	return (
+		<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">
+					<div className="w-8 h-8 bg-secondary border-2 border-primary pixel-pulse"></div>
+					<h1 className="pixel-font text-xl text-primary">IIITBuzz</h1>
+				</Link>
+
+				<div className="flex items-center space-x-3">
+					<ModeToggle />
+					<Link to="/login">
+						<Button
+							variant="outline"
+							className="neo-brutal-button border-primary text-primary bg-secondary hover:bg-secondary hover:text-black"
+						>
+							Log In
+						</Button>
+					</Link>
+					<Link to="/signup">
+						<Button className="neo-brutal-button bg-foreground text-primary hover:bg-primary/90 border-foreground">
+							Sign Up
+						</Button>
+					</Link>
+				</div>
+			</div>
+		</header>
+	);
+};
+
+export default Header;