h

README.md

@@ -1 +1,36 @@
-# ipcwebsite
+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.

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}