diff --git a/ipcwebsite/.gitignore b/.gitignore
similarity index 100%
rename from ipcwebsite/.gitignore
rename to .gitignore
diff --git a/README.md b/README.md
index 7394f5a..e215bc4 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,36 @@
-# ipcwebsite
\ No newline at end of file
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun 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/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## 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/app/building-your-application/deploying) for more details.
diff --git a/app/about/page.tsx b/app/about/page.tsx
new file mode 100644
index 0000000..0b121a1
--- /dev/null
+++ b/app/about/page.tsx
@@ -0,0 +1,87 @@
+export default function About() {
+  return (
+    <div className="min-h-screen bg-shark-900">
+      <main>
+        {/* Hero */}
+        <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
+          <div className="max-w-5xl mx-auto relative">
+            <div className="border-l-4 border-sunglo-500 pl-8 mb-12">
+              <div className="text-sm text-sunglo-400 font-mono mb-4 tracking-wider uppercase">
+                Who We Are
+              </div>
+              <h1 className="text-6xl sm:text-7xl font-black text-alto-50 leading-none">
+                About<span className="text-sunglo-500"> Us</span>
+              </h1>
+            </div>
+
+            <div className="max-w-3xl">
+              <p className="text-2xl sm:text-3xl text-storm-dust-300 leading-relaxed">
+                A community of builders, creators, and problem solvers.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Section 1 */}
+        <section className="py-16 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <img
+              src="/content/club1.jpeg"
+              alt="Programming Club"
+              className="rounded-lg shadow-xl border border-shark-700 w-full"
+            />
+
+            <div className="bg-shark-800 border-l-4 border-sunglo-500 p-8">
+              <p className="text-lg text-storm-dust-300 leading-relaxed">
+                The Programming Club is a student-led community dedicated to
+                exploring software development, robotics, and computer science.
+                Whether you’re a curious beginner or an experienced coder, we
+                provide a welcoming space to grow and experiment.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Section 2 */}
+        <section className="py-16 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            
+            {/* Reverse order on large screens */}
+            <div className="order-2 lg:order-1 bg-shark-800 border-l-4 border-sunglo-500 p-8">
+              <p className="text-lg text-storm-dust-300 leading-relaxed">
+                We host weekly workshops, hands-on coding sessions, collaborative
+                projects, and mentorship opportunities. Students are encouraged to
+                explore their interests and build real skills alongside teammates.
+              </p>
+            </div>
+    
+            <img
+              src="/content/club2.jpeg"
+              alt="Workshops"
+              className="order-1 lg:order-2 rounded-lg shadow-xl border border-shark-700 w-full"
+            />
+          </div>
+        </section>
+
+        {/* Section 3 */}
+        <section className="py-16 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+            <img
+              src="/content/club3.jpeg"
+              alt="Community"
+              className="rounded-lg shadow-xl border border-shark-700 w-full"
+            />
+
+            <div className="bg-shark-800 border-l-4 border-sunglo-500 p-8">
+              <p className="text-lg text-sunglo-300 font-semibold leading-relaxed">
+                Our mission is to create a community where students learn at their
+                own pace while working together, building connections, and becoming
+                confident problem solvers.
+              </p>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/app/apcsa/page.tsx b/app/apcsa/page.tsx
new file mode 100644
index 0000000..7b25da5
--- /dev/null
+++ b/app/apcsa/page.tsx
@@ -0,0 +1,75 @@
+
+export default function APCSA() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-black font-sans text-zinc-200">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-start py-32 px-10 sm:items-start">
+        
+        {/* Header */}
+        <div className="flex flex-col items-center gap-3 text-center sm:items-start sm:text-left mb-16">
+          <h1 className="text-3xl font-semibold leading-10 tracking-tight text-zinc-50">
+            Programming Club — AP Computer Science A
+          </h1>
+          <p className="text-zinc-500">
+            Where experience, teamwork, and proven results meet.
+          </p>
+        </div>
+
+        {/* Stats Section */}
+        <section className="border-l-4 border-[#E26D5A] pl-6 mb-16">
+          <div className="text-5xl font-extrabold text-[#E26D5A]">
+            99% → 5
+          </div>
+          <p className="mt-3 text-zinc-300">
+            99% of students who prepared for the AP Computer Science A exam through our Programming Club earned a top score of{" "}
+            <span className="text-[#E26D5A] font-bold">5</span>.
+          </p>
+          <p className="text-zinc-400">
+            While 1% <span className="text-[#E26D5A] font-bold">didn't</span> want to learn
+          </p>
+        </section>
+
+        {/* What We Do */}
+        <section className="mb-16">
+          <h2 className="text-3xl font-semibold leading-10 tracking-tight text-[#E26D5A] mb-4">
+            What We Do
+          </h2>
+          <p className="max-w-lg text-lg leading-7 text-zinc-300">
+            Our AP CSA section helps students build strong foundations in Java and computer science principles. We mix{" "}
+            <span className="text-[#E26D5A] font-bold">concept practice</span>,{" "}
+            <span className="text-[#E26D5A] font-bold">exam-style questions</span>, and{" "}
+            <span className="text-[#E26D5A] font-bold">hands-on projects</span> that strengthen understanding and confidence for the AP exam and beyond.
+          </p>
+        </section>
+
+        {/* Why Take It With Us */}
+        <section className="mb-20">
+          <h2 className="text-3xl font-semibold leading-10 tracking-tight text-[#E26D5A] mb-4">
+            Why Take It With Us
+          </h2>
+          <ul className="list-none space-y-3 text-zinc-300">
+            <li>
+              <span className="text-[#E26D5A] font-bold">Experienced Instructors</span> — Our student teachers have aced AP CSA themselves and have real coding experience.
+            </li>
+            <li>
+              <span className="text-[#E26D5A] font-bold">Reliable Teaching</span> — We focus on making everybody understand and master what they need for the test.
+            </li>
+            <li>
+              <span className="text-[#E26D5A] font-bold">Supportive Community</span> — Learn in a collaborative, friendly environment where you can ask anything.
+            </li>
+            <li>
+              <span className="text-[#E26D5A] font-bold">Growth Beyond AP</span> — We encourage students to think independently and learn smartly.
+            </li>
+          </ul>
+
+          <a
+            href="/contact"
+            className="inline-block mt-6 rounded-lg bg-[#E26D5A] px-6 py-3 font-semibold text-white hover:bg-zinc-600 transition"
+          >
+            Join a Session
+          </a>
+        </section>
+
+      </main>
+    </div>
+  );
+}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..19c6c0d
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,51 @@
+//dima work here
+//dima work here
+export default function Contact() {
+  return (
+    <div className="min-h-screen bg-shark-900">
+      <main>
+        {/* Hero */}
+        <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
+          <div className="max-w-5xl mx-auto relative">
+            <div className="border-l-4 border-sunglo-500 pl-8 mb-12">
+              <div className="text-sm text-sunglo-400 font-mono mb-4 tracking-wider uppercase">Get In Touch</div>
+              <h1 className="text-6xl sm:text-7xl font-black text-alto-50 leading-none">
+                Contact<span className="text-sunglo-500"> Us</span>
+              </h1>
+            </div>
+            <div className="max-w-3xl">
+              <p className="text-2xl sm:text-3xl text-storm-dust-300 leading-relaxed">
+                Have questions? Want to get involved? We&apos;d love to hear from you.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Contact Sections */}
+        <section className="py-20 px-4 sm:px-6 lg:px-8">
+          <div className="max-w-5xl mx-auto space-y-12">
+            <div className="bg-shark-800 border-l-4 border-sunglo-500 p-8">
+              <h2 className="text-3xl font-bold text-alto-50 mb-4">Email</h2>
+              <p className="text-storm-dust-300 text-lg">interlakeprogrammingclub@gmail.com</p>
+            </div>
+
+            <div className="bg-shark-800 border-l-4 border-sunglo-500 p-8">
+              <h2 className="text-3xl font-bold text-alto-50 mb-4">Instagram</h2>
+              <p className="text-storm-dust-300 text-lg">@interlake_programming</p>
+            </div>
+
+            <div className="bg-shark-800 border-l-4 border-sunglo-500 p-8">
+              <h2 className="text-3xl font-bold text-alto-50 mb-4">Meeting Location</h2>
+              <p className="text-storm-dust-300 text-lg">Room 1809 every Thursday after school at 3:30 pm</p>
+            </div>
+
+            <div className="bg-shark-800 border-l-4 border-sunglo-500 p-8">
+              <h2 className="text-3xl font-bold text-alto-50 mb-4">Advisor</h2>
+              <p className="text-storm-dust-300 text-lg">Dan Peterson - PetersonD@bsd405.org</p>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..5ccd208
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,209 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --shark-50: #f4f4f4;
+  --shark-100: #e8e8e8;
+  --shark-200: #c7c6c6;
+  --shark-300: #a5a4a4;
+  --shark-400: #616060;
+  --shark-500: #1d1c1c;
+  --shark-600: #1a1919;
+  --shark-700: #111111;
+  --shark-800: #0d0d0d;
+  --shark-900: #090808;
+
+  --sunglo-50: #fef8f8;
+  --sunglo-100: #fdf2f1;
+  --sunglo-200: #fadddc;
+  --sunglo-300: #f7c9c6;
+  --sunglo-400: #f1a19c;
+  --sunglo-500: #eb7871;
+  --sunglo-600: #d46c66;
+  --sunglo-700: #8d4844;
+  --sunglo-800: #6a3633;
+  --sunglo-900: #472422;
+
+  --alto-50: #fdfdfd;
+  --alto-100: #fbfbfb;
+  --alto-200: #f5f5f5;
+  --alto-300: #efefef;
+  --alto-400: #e4e4e4;
+  --alto-500: #d8d8d8;
+  --alto-600: #c2c2c2;
+  --alto-700: #828282;
+  --alto-800: #616161;
+  --alto-900: #414141;
+
+  --storm-dust-50: #f7f7f7;
+  --storm-dust-100: #f0f0f0;
+  --storm-dust-200: #d8d8d8;
+  --storm-dust-300: #c1c1c1;
+  --storm-dust-400: #939393;
+  --storm-dust-500: #646464;
+  --storm-dust-600: #5a5a5a;
+  --storm-dust-700: #3c3c3c;
+  --storm-dust-800: #2d2d2d;
+  --storm-dust-900: #1e1e1e;
+
+  --background: var(--shark-900);
+  --foreground: var(--alto-50);
+  --primary: var(--sunglo-500);
+  --primary-foreground: var(--shark-900);
+  --secondary: var(--shark-700);
+  --secondary-foreground: var(--alto-50);
+  --muted: var(--storm-dust-800);
+  --muted-foreground: var(--storm-dust-300);
+  --accent: var(--sunglo-600);
+  --accent-foreground: var(--alto-50);
+  --border: var(--shark-700);
+  --radius: 0.5rem;
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --font-sans: "Geist", "Geist Fallback";
+  --font-mono: "Geist Mono", "Geist Mono Fallback";
+
+  --color-shark-50: var(--shark-50);
+  --color-shark-100: var(--shark-100);
+  --color-shark-200: var(--shark-200);
+  --color-shark-300: var(--shark-300);
+  --color-shark-400: var(--shark-400);
+  --color-shark-500: var(--shark-500);
+  --color-shark-600: var(--shark-600);
+  --color-shark-700: var(--shark-700);
+  --color-shark-800: var(--shark-800);
+  --color-shark-900: var(--shark-900);
+
+  --color-sunglo-50: var(--sunglo-50);
+  --color-sunglo-100: var(--sunglo-100);
+  --color-sunglo-200: var(--sunglo-200);
+  --color-sunglo-300: var(--sunglo-300);
+  --color-sunglo-400: var(--sunglo-400);
+  --color-sunglo-500: var(--sunglo-500);
+  --color-sunglo-600: var(--sunglo-600);
+  --color-sunglo-700: var(--sunglo-700);
+  --color-sunglo-800: var(--sunglo-800);
+  --color-sunglo-900: var(--sunglo-900);
+
+  --color-alto-50: var(--alto-50);
+  --color-alto-100: var(--alto-100);
+  --color-alto-200: var(--alto-200);
+  --color-alto-300: var(--alto-300);
+  --color-alto-400: var(--alto-400);
+  --color-alto-500: var(--alto-500);
+  --color-alto-600: var(--alto-600);
+  --color-alto-700: var(--alto-700);
+  --color-alto-800: var(--alto-800);
+  --color-alto-900: var(--alto-900);
+
+  --color-storm-dust-50: var(--storm-dust-50);
+  --color-storm-dust-100: var(--storm-dust-100);
+  --color-storm-dust-200: var(--storm-dust-200);
+  --color-storm-dust-300: var(--storm-dust-300);
+  --color-storm-dust-400: var(--storm-dust-400);
+  --color-storm-dust-500: var(--storm-dust-500);
+  --color-storm-dust-600: var(--storm-dust-600);
+  --color-storm-dust-700: var(--storm-dust-700);
+  --color-storm-dust-800: var(--storm-dust-800);
+  --color-storm-dust-900: var(--storm-dust-900);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..8784483
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,30 @@
+import type React from "react";
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Footer, Navigation } from "@/components";
+
+const _geist = Geist({ subsets: ["latin"] });
+const _geistMono = Geist_Mono({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+	title: "Interlake Programming Club | Code, Compete, Create",
+	description:
+		"Join our community of passionate programmers. Compete in USACO, master APCSA, and build amazing projects together.",
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="en">
+			<body className={`font-sans antialiased`}>
+				<Navigation />
+				{children}
+				<Footer />
+			</body>
+		</html>
+	);
+}
diff --git a/app/leadership/page.tsx b/app/leadership/page.tsx
new file mode 100644
index 0000000..61a4f4a
--- /dev/null
+++ b/app/leadership/page.tsx
@@ -0,0 +1,187 @@
+import Image from "next/image";
+import leadershipData from "../../data/leadership.json";
+
+export default function Leadership() {
+	const { currentOfficers, alumni, electionProcess } = leadershipData;
+
+	return (
+		<div className="min-h-screen bg-shark-900">
+			<main>
+				{/* Hero */}
+				<section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
+					<div className="max-w-5xl mx-auto relative">
+						<div className="border-l-4 border-sunglo-500 pl-8 mb-12">
+							<div className="text-sm text-sunglo-400 font-mono mb-4 tracking-wider uppercase">Leadership Development</div>
+							<h1 className="text-6xl sm:text-7xl font-black text-alto-50 leading-none">
+								Build Your<span className="text-sunglo-500"> Leadership</span><br />
+								Journey With Us
+							</h1>
+						</div>
+						<div className="max-w-3xl">
+							<p className="text-2xl sm:text-3xl text-storm-dust-300 leading-relaxed">
+								Take on real responsibility. Lead study sessions, manage projects, mentor others. Build the skills that matter.
+							</p>
+						</div>
+					</div>
+				</section>
+
+				{/* Current Officers */}
+				<section className="py-20 px-4 sm:px-6 lg:px-8">
+					<div className="max-w-5xl mx-auto">
+						<div className="border-l-4 border-sunglo-500 pl-8 mb-16">
+							<div className="text-sm text-sunglo-400 font-mono mb-4 tracking-wider uppercase">Leadership Team 2024-25</div>
+							<h2 className="text-4xl sm:text-5xl font-black text-alto-50 mb-4">
+								Current Officers
+							</h2>
+							<p className="text-lg text-storm-dust-300 max-w-2xl">
+								Meet the dedicated students leading our club this year
+							</p>
+						</div>
+
+						<div className="space-y-6">
+							{currentOfficers.map((officer, index) => (
+								<div key={index} className="p-8 bg-shark-800 border-l-4 border-sunglo-500 hover:border-l-8 hover:bg-shark-700 transition-all duration-300">
+									<div className="flex items-start gap-8">
+										<div className="relative w-32 h-32 shrink-0 bg-shark-700 border border-shark-600 overflow-hidden">
+											{officer.image ? (
+												<Image 
+													src={officer.image} 
+													alt={officer.name}
+													fill
+													className="object-cover"
+												/>
+											) : (
+												<div className="w-full h-full flex items-center justify-center text-4xl text-storm-dust-600">
+													{officer.name.split(' ').map(n => n[0]).join('')}
+												</div>
+											)}
+										</div>
+										<div className="flex-1 min-w-0">
+											<div className="flex items-baseline gap-4 mb-2">
+												<h3 className="text-2xl font-bold text-alto-50">
+													{officer.name}
+												</h3>
+												<span className="text-sm text-storm-dust-500">Grade {officer.grade}</span>
+											</div>
+											<p className="text-sunglo-500 font-semibold mb-3 text-lg">
+												{officer.role}
+											</p>
+											<p className="text-storm-dust-300">
+												{officer.bio}
+											</p>
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				</section>
+
+				{/* Officer Elections */}
+				<section className="py-20 px-4 sm:px-6 lg:px-8 bg-shark-800/30">
+					<div className="max-w-5xl mx-auto">
+						<div className="border-l-4 border-sunglo-500 pl-8 mb-12">
+							<div className="text-sm text-sunglo-400 font-mono mb-4 tracking-wider uppercase">How We Elect Leaders</div>
+							<h2 className="text-4xl sm:text-5xl font-black text-alto-50 mb-4">
+								Officer Elections
+							</h2>
+						</div>
+
+						<div className="space-y-12">
+							<p className="text-xl text-storm-dust-300 leading-relaxed">
+								{electionProcess.overview}
+							</p>
+
+							<div className="bg-shark-900 p-10 border-t-4 border-sunglo-500">
+								<h3 className="text-2xl font-bold text-alto-50 mb-6">
+									What We Look For
+								</h3>
+								<div className="space-y-4">
+									{electionProcess.criteria.map((criterion, index) => (
+										<div key={index} className="flex items-start gap-4">
+											<span className="text-2xl text-sunglo-500 shrink-0">→</span>
+											<span className="text-storm-dust-300 leading-relaxed">{criterion}</span>
+										</div>
+									))}
+								</div>
+							</div>
+
+							<div className="grid md:grid-cols-2 gap-6">
+								<div className="bg-shark-900 p-8 border border-shark-700">
+									<div className="text-sm text-sunglo-400 font-mono mb-4 uppercase">Timeline</div>
+									<p className="text-storm-dust-300 leading-relaxed">
+										{electionProcess.timeline}
+									</p>
+								</div>
+								<div className="bg-sunglo-500/10 p-8 border border-sunglo-500/30">
+									<div className="text-sm text-sunglo-400 font-mono mb-4 uppercase">Key Factor</div>
+									<p className="text-storm-dust-300 leading-relaxed">
+										<strong className="text-sunglo-400">Participation and leadership</strong> are heavily taken into consideration for officer elections. All members who demonstrate commitment are encouraged to run!
+									</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</section>
+
+				{/* Alumni */}
+				<section className="py-20 px-4 sm:px-6 lg:px-8">
+					<div className="max-w-5xl mx-auto">
+						<div className="border-l-4 border-sunglo-500 pl-8 mb-16">
+							<div className="text-sm text-sunglo-400 font-mono mb-4 tracking-wider uppercase">Where Are They Now</div>
+							<h2 className="text-4xl sm:text-5xl font-black text-alto-50 mb-4">
+								Alumni Network
+							</h2>
+						</div>
+
+						{alumni.length > 0 ? (
+							<div className="space-y-8">
+								{alumni.map((alum, index) => (
+									<div key={index} className="pb-12 border-b border-shark-700 last:border-b-0">
+										<div className="flex items-start gap-8 mb-6">
+											<div className="relative w-24 h-24 shrink-0 bg-shark-700 border border-shark-600 overflow-hidden rounded-full">
+												{alum.image ? (
+													<Image 
+														src={alum.image} 
+														alt={alum.name}
+														fill
+														className="object-cover"
+													/>
+												) : (
+													<div className="w-full h-full flex items-center justify-center text-2xl text-storm-dust-600 font-semibold">
+														{alum.name.split(' ').map(n => n[0]).join('')}
+													</div>
+												)}
+											</div>
+											<div className="flex-1 min-w-0">
+												<div className="text-sm text-sunglo-400 font-mono mb-2">Class of {alum.graduationYear}</div>
+												<h3 className="text-3xl font-bold text-alto-50 mb-2">{alum.name}</h3>
+												<p className="text-sunglo-500 font-semibold text-lg">{alum.role}</p>
+											</div>
+										</div>
+										<div className="grid md:grid-cols-2 gap-6">
+											<div>
+												<div className="text-xs text-storm-dust-500 uppercase tracking-wider mb-2">Achievements</div>
+												<p className="text-storm-dust-300">{alum.achievements}</p>
+											</div>
+											<div>
+												<div className="text-xs text-storm-dust-500 uppercase tracking-wider mb-2">Currently</div>
+												<p className="text-storm-dust-300">{alum.current}</p>
+											</div>
+										</div>
+									</div>
+								))}
+							</div>
+						) : (
+							<div className="py-20 text-center border border-shark-700">
+								<p className="text-storm-dust-400 text-xl">
+									Alumni information coming soon!
+								</p>
+							</div>
+						)}
+					</div>
+				</section>
+			</main>
+		</div>
+	);
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..a38a596
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,137 @@
+import Link from "next/link";
+import Image from "next/image";
+import stats from "../data/stats.json";
+import features from "../data/features.json";
+import meeting from "../public/content/meeting.jpeg";
+
+export default function Home() {
+	return (
+		<div className="min-h-screen bg-shark-900">
+			<main>
+				<section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
+					<div className="max-w-7xl mx-auto">
+						<div className="grid lg:grid-cols-2 gap-12 items-center">
+							<div className="max-w-4xl">
+								<div className="inline-block mb-4 px-3 py-1 bg-shark-800 border border-shark-700 text-sunglo-400 text-sm font-mono">
+									{"// Welcome to the club"}
+								</div>
+
+								<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-alto-50 mb-6 leading-tight text-balance">
+									Code, Compete, <span className="text-sunglo-500">Create</span>
+								</h1>
+
+								<p className="text-xl sm:text-2xl text-storm-dust-300 mb-8 leading-relaxed max-w-2xl text-pretty">
+									Join a community of passionate programmers. Master algorithms,
+									compete in USACO, ace APCSA, and build projects that have an
+									impact.
+								</p>
+
+								<div className="flex flex-col sm:flex-row gap-4">
+									<Link
+										href="/contact"
+										className="inline-flex items-center justify-center px-8 py-4 bg-sunglo-500 text-shark-900 font-semibold hover:bg-sunglo-400 transition-colors"
+									>
+										Join the Club
+									</Link>
+									<Link
+										href="/projects"
+										className="inline-flex items-center justify-center px-8 py-4 bg-shark-800 text-alto-50 font-semibold border border-shark-700 hover:border-sunglo-500 transition-colors"
+									>
+										View Projects
+									</Link>
+								</div>
+							</div>
+
+							<div className="hidden lg:block">
+								<div className="w-full aspect-video bg-shark-800 border border-shark-700 rounded-lg flex items-center justify-center">
+									<Image
+										src={meeting}
+										alt="Interlake Programming Club Meeting"
+										className="w-full h-full object-cover rounded-lg"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</section>
+				<section className="py-16 px-4 sm:px-6 lg:px-8 border-y border-shark-700">
+					<div className="max-w-7xl mx-auto">
+						<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+							{stats["main"].map((stat, index) => (
+								<div key={index} className="text-center lg:text-left">
+									<div className="text-4xl sm:text-5xl font-bold text-sunglo-500 mb-2">
+										{stat.value}
+									</div>
+									<div className="text-alto-50 font-semibold mb-1">
+										{stat.label}
+									</div>
+									<div className="text-sm text-storm-dust-400">
+										{stat.sublabel}
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				</section>
+				<section className="py-20 px-4 sm:px-6 lg:px-8">
+					<div className="max-w-7xl mx-auto">
+						<div className="text-center mb-16">
+							<h2 className="text-3xl sm:text-4xl font-bold text-alto-50 mb-4 text-balance">
+								What We Offer
+							</h2>
+							<p className="text-lg text-storm-dust-300 max-w-2xl mx-auto text-pretty">
+								Everything you need to excel in competitive programming and
+								software development
+							</p>
+						</div>
+
+						<div className="grid md:grid-cols-2 gap-6">
+							{features.map((feature, index) => (
+								<Link
+									key={index}
+									href={feature.link}
+									className="group p-8 bg-shark-800 border border-sunglo-500 hover:border-sunglo-400 transition-all rounded-lg"
+								>
+									<div className="text-4xl mb-4">{feature.icon}</div>
+									<h3 className="text-xl font-bold text-alto-50 mb-3 group-hover:text-sunglo-500 transition-colors">
+										{feature.title}
+									</h3>
+									<p className="text-storm-dust-300 leading-relaxed">
+										{feature.description}
+									</p>
+								</Link>
+							))}
+						</div>
+					</div>
+				</section>
+				<section className="py-20 px-4 sm:px-6 lg:px-8">
+					<div className="max-w-7xl mx-auto">
+						<div className="bg-shark-800 border border-shark-700 p-12 sm:p-16 text-center">
+							<h2 className="text-3xl sm:text-4xl font-bold text-alto-50 mb-4 text-balance">
+								Ready to Level Up Your Skills?
+							</h2>
+							<p className="text-lg text-storm-dust-300 mb-8 max-w-2xl mx-auto text-pretty">
+								Join our next meeting and meet fellow programmers who share your
+								passion for code
+							</p>
+							<div className="flex flex-col sm:flex-row gap-4 justify-center">
+								<Link
+									href="/contact"
+									className="inline-flex items-center justify-center px-8 py-4 bg-sunglo-500 text-shark-900 font-semibold hover:bg-sunglo-400 transition-colors"
+								>
+									Get Started
+								</Link>
+								<Link
+									href="/leadership"
+									className="inline-flex items-center justify-center px-8 py-4 bg-transparent text-alto-50 font-semibold border border-shark-600 hover:border-sunglo-500 transition-colors"
+								>
+									Meet the Team
+								</Link>
+							</div>
+						</div>
+					</div>
+				</section>
+			</main>
+		</div>
+	);
+}
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
new file mode 100644
index 0000000..2d3e053
--- /dev/null
+++ b/app/projects/page.tsx
@@ -0,0 +1,33 @@
+// abhi & arthur work here
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-alto-50 font-sans dark:bg-shark-600">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-20 px-10 bg-white dark:bg-shark-600 sm:items-start">
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="text-5xl font-bold text-sunglo-500">
+            Improve, Plan, Create
+          </h1>
+          <p className="text-lg leading-8 text-shark-600 dark:text-alto-300">
+            Join projects to release your creative passion. Come to a place where you can collaborate with others to create whatever you desire, from games to websites and apps. Projects section has many benefits such as freedom of creativity, collaboration skill improvement, as well as strong understanding in applying programming. Make sure to join projects to not miss out on all of these benefits.
+          </p>
+          <h1 className="text-3xl font-bold text-sunglo-500">
+            Past projects
+          </h1>
+          <p className="text-lg leading-8 text-shark-600 dark:text-alto-300">
+            Interlake Inquirer: <a href="" target="_blank" rel="noopener noreferrer">Link here</a>
+          </p>
+          <h1 className="text-3xl font-bold text-sunglo-500">
+            Future Projects
+          </h1>
+          <ul className="text-lg leading-8 text-shark-600 dark:text-alto-300">
+            <li>Chess Club Website with Chess Engine</li>
+            <li>App Building</li>
+            <li>Cryptocurrency</li>
+          </ul>
+        </div>
+      </main>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/usaco/page.tsx b/app/usaco/page.tsx
new file mode 100644
index 0000000..c89542a
--- /dev/null
+++ b/app/usaco/page.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import Link from "next/link";
+import { easeIn, motion } from "framer-motion";
+import stats from "../../data/stats.json";
+
+export default function USACO() {
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.1,
+                delayChildren: 0.2,
+                easeIn:0.5
+            },
+        },
+    };
+
+    const itemVariants = {
+        hidden: { opacity: 0, y: 20 },
+        visible: {
+            opacity: 1,
+            y: 0,
+            transition: {
+                duration: 0.5,
+                easeIn:0.5
+
+            },
+        },
+    };
+
+    const statVariants = {
+        hidden: { opacity: 0, scale: 0.8 },
+        visible: {
+            opacity: 1,
+            scale: 1,
+            transition: {
+                duration: 0.5,
+                easeIn:0.5
+
+            },
+        },
+    };
+
+    return (
+        <div className="min-h-screen bg-shark-900">
+            <main>
+                {/* Hero Section */}
+                <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
+                    <div className="max-w-7xl mx-auto">
+                        <motion.div
+                            className="max-w-4xl"
+                            variants={containerVariants}
+                            initial="hidden"
+                            animate="visible"
+                        >
+                            <motion.div
+                                variants={itemVariants}
+                                className="inline-block mb-4 px-3 py-1 bg-shark-800 border border-shark-700 text-sunglo-400 text-sm font-mono"
+                            >
+                                {"// USACO Training"}
+                            </motion.div>
+
+                            <motion.h1
+                                variants={itemVariants}
+                                className="text-5xl sm:text-6xl lg:text-7xl font-bold text-alto-50 mb-6 leading-tight text-balance"
+                            >
+                                Master <span className="text-sunglo-500">USACO</span> Competitions
+                            </motion.h1>
+
+                            <motion.p
+                                variants={itemVariants}
+                                className="text-xl sm:text-2xl text-storm-dust-300 mb-8 leading-relaxed max-w-2xl text-pretty"
+                            >
+                                Advance through Bronze, Silver, Gold, and Platinum divisions with expert guidance.
+                            </motion.p>
+
+                            <motion.div
+                                variants={itemVariants}
+                                className="flex flex-col sm:flex-row gap-4"
+                            >
+                                <Link
+                                    href="/contact"
+                                    className="inline-flex items-center justify-center px-8 py-4 bg-sunglo-500 text-shark-900 font-semibold hover:bg-sunglo-400 transition-colors"
+                                >
+                                    Join Training
+                                </Link>
+                                <Link
+                                    href="/projects"
+                                    className="inline-flex items-center justify-center px-8 py-4 bg-shark-800 text-alto-50 font-semibold border border-shark-700 hover:border-sunglo-500 transition-colors"
+                                >
+                                    View Resources
+                                </Link>
+                            </motion.div>
+                        </motion.div>
+                    </div>
+                </section>
+
+                {/* Stats Section */}
+                <section className="py-16 px-4 sm:px-6 lg:px-8 border-y border-shark-700">
+                    <div className="max-w-7xl mx-auto">
+                        <motion.div
+                            className="grid grid-cols-2 lg:grid-cols-4 gap-8"
+                            variants={containerVariants}
+                            initial="hidden"
+                            whileInView="visible"
+                            viewport={{ once: true, amount: 0.3 }}
+                        >
+                            {stats["usaco"].map((stat, index) => (
+                                <motion.div
+                                    key={index}
+                                    variants={statVariants}
+                                    className="text-center lg:text-left"
+                                >
+                                    <div className="text-4xl sm:text-5xl font-bold text-sunglo-500 mb-2">
+                                        {stat.value}
+                                    </div>
+                                    <div className="text-alto-50 font-semibold mb-1">
+                                        {stat.label}
+                                    </div>
+                                    <div className="text-sm text-storm-dust-400">
+                                        {stat.sublabel}
+                                    </div>
+                                </motion.div>
+                            ))}
+                        </motion.div>
+                    </div>
+                </section>
+
+                {/* Add more sections: divisions, schedule, resources, success stories */}
+            </main>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..3bb3a9e
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,147 @@
+import Link from "next/link";
+import Image from "next/image";
+import logo from "../public/logo.png";
+
+export function Footer() {
+	const sections = [
+		{
+			title: "Learn",
+			links: [
+				{ label: "APCSA", href: "/apcsa" },
+				{ label: "USACO", href: "/usaco" },
+				{ label: "Projects", href: "/projects" },
+			],
+		},
+		{
+			title: "About",
+			links: [
+				{ label: "Leadership", href: "/leadership" },
+				{ label: "About Us", href: "/about" },
+				{ label: "Contact", href: "/contact" },
+			],
+		},
+	];
+
+	return (
+		<footer className="border-t border-shark-700 py-12 px-4 sm:px-6 lg:px-8">
+			<div className="max-w-7xl mx-auto">
+				<div className="grid md:grid-cols-4 gap-8 mb-8">
+					<div className="md:col-span-2">
+						<Link href="/" className="flex items-center gap-2 mb-4">
+							<div className="w-8 h-8 flex items-center justify-center font-mono font-bold text-shark-900">
+								<Image src={logo} alt="Club Logo" />
+							</div>
+							<span className="font-bold text-lg text-alto-50">
+								Interlake Programming Club
+							</span>
+						</Link>
+						<p className="text-storm-dust-400 max-w-sm leading-relaxed">
+							Empowering students to excel in computer science through
+							competition, collaboration, and creativity.
+						</p>
+					</div>
+
+					{sections.map((section) => (
+						<div key={section.title}>
+							<h3 className="font-semibold text-alto-50 mb-4">
+								{section.title}
+							</h3>
+							<ul className="space-y-2">
+								{section.links.map((link) => (
+									<li key={link.href}>
+										<Link
+											href={link.href}
+											className="text-storm-dust-400 hover:text-sunglo-500 transition-colors"
+										>
+											{link.label}
+										</Link>
+									</li>
+								))}
+							</ul>
+						</div>
+					))}
+				</div>
+
+				<div className="pt-8 border-t border-shark-700 flex flex-col sm:flex-row justify-between items-center gap-4">
+					<p className="text-storm-dust-400 text-sm">
+						© {new Date().getFullYear()} Programming Club. All rights reserved.
+					</p>
+					<div className="flex gap-6">
+						<Link
+							href="https://github.com/InterlakeProgrammingClub"
+							target="_blank"
+							className="text-gray-400 hover:text-gray-300 transition-colors"
+						>
+							<span className="sr-only">GitHub</span>
+							<svg
+								className="w-5 h-5"
+								fill="currentColor"
+								viewBox="0 0 24 24"
+								aria-hidden="true"
+							>
+								<path
+									fillRule="evenodd"
+									d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+									clipRule="evenodd"
+								/>
+							</svg>
+						</Link>
+						<Link
+							href="https://discord.gg/kuKRUwjJ"
+							target="_blank"
+							className="text-indigo-500 hover:text-indigo-400 transition-colors"
+						>
+							<span className="sr-only">Discord</span>
+							<svg
+								className="w-5 h-5"
+								fill="currentColor"
+								viewBox="0 0 24 24"
+								aria-hidden="true"
+							>
+								<path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+							</svg>
+						</Link>
+						<Link
+							href="https://www.instagram.com/interlake_programming/"
+							target="_blank"
+							className="transition-colors"
+						>
+							<span className="sr-only">Instagram</span>
+							<svg
+								className="w-5 h-5 bg-linear-to-tr from-[#fdf497] via-[#fd5949] via-50% to-[#285AEB] rounded hover:brightness-120"
+								fill="currentColor"
+								viewBox="0 0 24 24"
+								aria-hidden="true"
+							>
+								<path
+									fillRule="evenodd"
+									d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
+									clipRule="evenodd"
+								/>
+							</svg>
+						</Link>
+						<Link
+							href="https://www.linkedin.com/company/interlakeprogrammingclub/"
+							target="_blank"
+							className="text-blue-600 hover:text-blue-500 transition-colors"
+						>
+							<span className="sr-only">LinkedIn</span>
+							<svg
+								className="w-5 h-5"
+								fill="currentColor"
+								viewBox="0 0 24 24"
+								aria-hidden="true"
+							>
+								<path
+									fillRule="evenodd"
+									d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+									clipRule="evenodd"
+								/>
+							</svg>
+						</Link>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
+}
diff --git a/components/index.tsx b/components/index.tsx
new file mode 100644
index 0000000..cf4fce9
--- /dev/null
+++ b/components/index.tsx
@@ -0,0 +1,4 @@
+import { Footer } from "./footer";
+import { Navigation } from "./navigation";
+
+export { Footer, Navigation };
diff --git a/components/navigation.tsx b/components/navigation.tsx
new file mode 100644
index 0000000..d18f93f
--- /dev/null
+++ b/components/navigation.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+import logo from "../public/logo.png";
+
+export function Navigation() {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const links = [
+		{ href: "/leadership", label: "Leadership" },
+		{ href: "/projects", label: "Projects" },
+		{ href: "/apcsa", label: "APCSA" },
+		{ href: "/usaco", label: "USACO" },
+		{ href: "/about", label: "About" },
+		{ href: "/contact", label: "Contact" },
+	];
+
+	return (
+		<nav className="fixed top-0 left-0 right-0 z-50 bg-shark-900/95 backdrop-blur-sm border-b border-shark-700">
+			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+				<div className="flex items-center justify-between h-16">
+					<Link href="/" className="flex items-center gap-2">
+						<div className="w-8 h-8 flex items-center justify-center font-mono font-bold text-shark-900">
+							<Image src={logo} alt="Club Logo" />
+						</div>
+						<span className="font-bold text-lg text-alto-50">
+							Interlake Programming Club
+						</span>
+					</Link>
+
+					<div className="hidden md:flex items-center gap-8">
+						{links.map((link) => (
+							<Link
+								key={link.href}
+								href={link.href}
+								className="text-storm-dust-300 hover:text-sunglo-500 transition-colors text-sm font-medium"
+							>
+								{link.label}
+							</Link>
+						))}
+					</div>
+
+					<button
+						onClick={() => setIsOpen(!isOpen)}
+						className="md:hidden text-alto-50 p-2"
+						aria-label="Toggle menu"
+					>
+						<svg
+							className="w-6 h-6"
+							fill="none"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth="2"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							{isOpen ? (
+								<path d="M6 18L18 6M6 6l12 12" />
+							) : (
+								<path d="M4 6h16M4 12h16M4 18h16" />
+							)}
+						</svg>
+					</button>
+				</div>
+
+				{isOpen && (
+					<div className="md:hidden py-4 border-t border-shark-700">
+						{links.map((link) => (
+							<Link
+								key={link.href}
+								href={link.href}
+								className="block py-2 text-storm-dust-300 hover:text-sunglo-500 transition-colors"
+								onClick={() => setIsOpen(false)}
+							>
+								{link.label}
+							</Link>
+						))}
+					</div>
+				)}
+			</div>
+		</nav>
+	);
+}
diff --git a/data/features.json b/data/features.json
new file mode 100644
index 0000000..abe73e5
--- /dev/null
+++ b/data/features.json
@@ -0,0 +1,26 @@
+[
+	{
+		"icon": "🏆",
+		"title": "USACO Training",
+		"description": "Structured curriculum and practice sessions to help you advance through Bronze, Silver, Gold, and Platinum divisions.",
+		"link": "/usaco"
+	},
+	{
+		"icon": "📚",
+		"title": "APCSA Support",
+		"description": "Study groups, practice problems, and exam prep to help you ace the AP Computer Science A exam.",
+		"link": "/apcsa"
+	},
+	{
+		"icon": "💻",
+		"title": "Project Development",
+		"description": "Build real-world applications with your peers. From web apps to mobile games, bring your ideas to life.",
+		"link": "/projects"
+	},
+	{
+		"icon": "👥",
+		"title": "Community & Mentorship",
+		"description": "Learn from experienced members, collaborate on challenges, and grow together as programmers.",
+		"link": "/about"
+	}
+]
diff --git a/data/leadership.json b/data/leadership.json
new file mode 100644
index 0000000..174f51c
--- /dev/null
+++ b/data/leadership.json
@@ -0,0 +1,68 @@
+{
+	"currentOfficers": [
+		{
+			"name": "To Be Announced",
+			"role": "President",
+			"grade": "12",
+			"bio": "Leading the club with vision and dedication.",
+			"image": null
+		},
+		{
+			"name": "To Be Announced",
+			"role": "Vice President",
+			"grade": "12",
+			"bio": "Supporting club operations and member engagement.",
+			"image": null
+		},
+		{
+			"name": "To Be Announced",
+			"role": "Secretary",
+			"grade": "11",
+			"bio": "Keeping the club organized and connected.",
+			"image": null
+		},
+		{
+			"name": "To Be Announced",
+			"role": "Treasurer",
+			"grade": "11",
+			"bio": "Managing club resources and finances.",
+			"image": null
+		}
+	],
+	"alumni": [
+		{
+			"name": "Alumni Name",
+			"role": "Former President",
+			"graduationYear": "2024",
+			"achievements": "Key achievements and contributions",
+			"current": "Current pursuits",
+			"image": null
+		}
+	],
+	"electionProcess": {
+		"overview": "Officer elections in the Interlake Programming Club are a democratic process designed to identify and empower students who demonstrate leadership, commitment, and dedication to the club's mission.",
+		"timeline": "Elections typically occur in the spring semester for the following academic year.",
+		"criteria": [
+			"Active participation and attendance at club meetings",
+			"Demonstrated leadership through taking initiative",
+			"Contributions to club activities and projects",
+			"Willingness to help others and mentor members",
+			"Commitment to advancing the club's goals"
+		]
+	},
+	"leadershipOpportunities": {
+		"usaco": {
+			"title": "USACO Leadership",
+			"description": "Members can develop leadership skills by organizing their own study groups, helping others understand complex algorithms, and teaching problem-solving strategies. Leading USACO sessions helps build communication and mentoring abilities."
+		},
+		"projects": {
+			"title": "Project Leadership",
+			"description": "Take charge of project teams and ensure everyone stays on track with timelines. Project leaders coordinate tasks, facilitate collaboration, manage deadlines, and help bring ideas from concept to reality. This provides real-world project management experience."
+		},
+		"participation": {
+			"title": "Active Participation",
+			"description": "Simply showing up, contributing ideas, and helping out is the foundation of leadership. Consistent participation and taking initiative on tasks demonstrates your commitment and leadership potential."
+		}
+	}
+}
+
diff --git a/data/stats.json b/data/stats.json
new file mode 100644
index 0000000..c00b64e
--- /dev/null
+++ b/data/stats.json
@@ -0,0 +1,46 @@
+{
+  "main": [
+    {
+      "value": "100+",
+      "label": "Active Members",
+      "sublabel": "Growing community"
+    },
+    {
+      "value": "20+",
+      "label": "Projects Built",
+      "sublabel": "Real-world experience"
+    },
+    {
+      "value": "25+",
+      "label": "USACO Qualifiers",
+      "sublabel": "Competitive excellence"
+    },
+    {
+      "value": "99%",
+      "label": "APCSA 5 Rate",
+      "sublabel": "Academic success"
+    }
+  ],
+  "usaco": [
+    {
+      "value": "10+",
+      "label": "Silver promotions",
+      "sublabel": "Achieved annually"
+    },
+    {
+      "value": "3+",
+      "label": "Gold promotions",
+      "sublabel": "Achieved annually"
+    },
+    {
+      "value": "5+",
+      "label": "Coding Competitions",
+      "sublabel": "Competitive practice"
+    },
+    {
+      "value": "95%",
+      "label": "Member Satisfaction",
+      "sublabel": "Positive feedback"
+    }
+  ]
+}
diff --git a/ipcwebsite/eslint.config.mjs b/eslint.config.mjs
similarity index 100%
rename from ipcwebsite/eslint.config.mjs
rename to eslint.config.mjs
diff --git a/ipcwebsite/README.md b/ipcwebsite/README.md
deleted file mode 100644
index e215bc4..0000000
--- a/ipcwebsite/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun 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/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## 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/app/building-your-application/deploying) for more details.
diff --git a/ipcwebsite/app/about/page.tsx b/ipcwebsite/app/about/page.tsx
deleted file mode 100644
index 9b56c73..0000000
--- a/ipcwebsite/app/about/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-// divith work here
\ No newline at end of file
diff --git a/ipcwebsite/app/apcsa/page.tsx b/ipcwebsite/app/apcsa/page.tsx
deleted file mode 100644
index b771aae..0000000
--- a/ipcwebsite/app/apcsa/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-// rick work here
\ No newline at end of file
diff --git a/ipcwebsite/app/contact/page.tsx b/ipcwebsite/app/contact/page.tsx
deleted file mode 100644
index 5eba51b..0000000
--- a/ipcwebsite/app/contact/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-//dima work here
\ No newline at end of file
diff --git a/ipcwebsite/app/favicon.ico b/ipcwebsite/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/ipcwebsite/app/favicon.ico and /dev/null differ
diff --git a/ipcwebsite/app/globals.css b/ipcwebsite/app/globals.css
deleted file mode 100644
index a2dc41e..0000000
--- a/ipcwebsite/app/globals.css
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/ipcwebsite/app/layout.tsx b/ipcwebsite/app/layout.tsx
deleted file mode 100644
index 9afa541..0000000
--- a/ipcwebsite/app/layout.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-// michael
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
-    </html>
-  );
-}
diff --git a/ipcwebsite/app/leadership/page.tsx b/ipcwebsite/app/leadership/page.tsx
deleted file mode 100644
index fe095cf..0000000
--- a/ipcwebsite/app/leadership/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-//lucas, alistair work here
\ No newline at end of file
diff --git a/ipcwebsite/app/page.tsx b/ipcwebsite/app/page.tsx
deleted file mode 100644
index 06dcf45..0000000
--- a/ipcwebsite/app/page.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-// michael
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/ipcwebsite/app/projects/page.tsx b/ipcwebsite/app/projects/page.tsx
deleted file mode 100644
index 5001d9f..0000000
--- a/ipcwebsite/app/projects/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-// abhi & arthur work here
\ No newline at end of file
diff --git a/ipcwebsite/app/usaco/page.tsx b/ipcwebsite/app/usaco/page.tsx
deleted file mode 100644
index 194a36b..0000000
--- a/ipcwebsite/app/usaco/page.tsx
+++ /dev/null
@@ -1 +0,0 @@
-// rain work here
\ No newline at end of file
diff --git a/ipcwebsite/public/file.svg b/ipcwebsite/public/file.svg
deleted file mode 100644
index 004145c..0000000
--- a/ipcwebsite/public/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/ipcwebsite/public/globe.svg b/ipcwebsite/public/globe.svg
deleted file mode 100644
index 567f17b..0000000
--- a/ipcwebsite/public/globe.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/ipcwebsite/public/next.svg b/ipcwebsite/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/ipcwebsite/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/ipcwebsite/public/vercel.svg b/ipcwebsite/public/vercel.svg
deleted file mode 100644
index 7705396..0000000
--- a/ipcwebsite/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/ipcwebsite/public/window.svg b/ipcwebsite/public/window.svg
deleted file mode 100644
index b2b2a44..0000000
--- a/ipcwebsite/public/window.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
diff --git a/ipcwebsite/next.config.ts b/next.config.ts
similarity index 100%
rename from ipcwebsite/next.config.ts
rename to next.config.ts
diff --git a/ipcwebsite/package-lock.json b/package-lock.json
similarity index 98%
rename from ipcwebsite/package-lock.json
rename to package-lock.json
index 6e4794a..d71d767 100644
--- a/ipcwebsite/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
       "name": "ipcwebsite",
       "version": "0.1.0",
       "dependencies": {
+        "motion": "^12.23.24",
         "next": "16.0.0",
         "react": "19.2.0",
-        "react-dom": "19.2.0"
+        "react-dom": "19.2.0",
+        "tw-animate-css": "^1.4.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -3350,6 +3352,33 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -4579,6 +4608,47 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.24.tgz",
+      "integrity": "sha512-Rc5E7oe2YZ72N//S3QXGzbnXgqNrTESv8KKxABR20q2FLch9gHLo0JLyYo2hZ238bZ9Gx6cWhj9VO0IgwbMjCw==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.24",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5740,6 +5810,15 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/ipcwebsite/package.json b/package.json
similarity index 76%
rename from ipcwebsite/package.json
rename to package.json
index 0688528..5c86c0c 100644
--- a/ipcwebsite/package.json
+++ b/package.json
@@ -9,18 +9,20 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "motion": "^12.23.24",
+    "next": "16.0.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "next": "16.0.0"
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
-    "eslint-config-next": "16.0.0"
+    "eslint-config-next": "16.0.0",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
diff --git a/ipcwebsite/postcss.config.mjs b/postcss.config.mjs
similarity index 100%
rename from ipcwebsite/postcss.config.mjs
rename to postcss.config.mjs
diff --git a/public/content/club1.jpeg b/public/content/club1.jpeg
new file mode 100644
index 0000000..4f5844a
Binary files /dev/null and b/public/content/club1.jpeg differ
diff --git a/public/content/club2.jpeg b/public/content/club2.jpeg
new file mode 100644
index 0000000..1cad879
Binary files /dev/null and b/public/content/club2.jpeg differ
diff --git a/public/content/club3.jpeg b/public/content/club3.jpeg
new file mode 100644
index 0000000..0a685af
Binary files /dev/null and b/public/content/club3.jpeg differ
diff --git a/public/content/meeting.jpeg b/public/content/meeting.jpeg
new file mode 100644
index 0000000..1cad879
Binary files /dev/null and b/public/content/meeting.jpeg differ
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..12a4a9e
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..9916e45
Binary files /dev/null and b/public/logo.png differ
diff --git a/ipcwebsite/tsconfig.json b/tsconfig.json
similarity index 71%
rename from ipcwebsite/tsconfig.json
rename to tsconfig.json
index 3a13f90..af21167 100644
--- a/ipcwebsite/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,7 +23,9 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
   "include": [
@@ -28,7 +34,11 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts",
-    "**/*.mts"
+    "**/*.mts",
+    ".next\\dev/types/**/*.ts",
+    ".next\\dev/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }