Build hero section for main pages (#11)

JumboCode · Jan 9, 2025 · d0e6290 · d0e6290
1 parent df01303
commit d0e6290
Show file tree

Hide file tree

Showing 14 changed files with 247 additions and 69 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always",
+    "source.organizeImports": "always"
+  }
+}
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -0,0 +1,18 @@
+import Hero from "@/components/hero";
+
+export default function AboutPage() {
+  return (
+    <div>
+      <Hero
+        title={<>About</>}
+        subtitle={
+          <>
+            JumboCode is a student-run digital agency at Tufts University that
+            provides custom and high-quality software to nonprofits through
+            year-long pro bono projects.
+          </>
+        }
+      />
+    </div>
+  );
+}
diff --git a/app/apply/page.tsx b/app/apply/page.tsx
@@ -0,0 +1,24 @@
+import Button from "@/components/button";
+import Hero from "@/components/hero";
+
+export default function ApplyPage() {
+  return (
+    <div>
+      <Hero
+        title={<>Apply</>}
+        subtitle={
+          <>
+            Join us — we’re a passionate community of developers and designers
+            committed to building meaningful products for non-profits.
+          </>
+        }
+        buttons={
+          <>
+            <Button text="For students" href="/" variant="secondary" />
+            <Button text="For non-profits" href="/" variant="secondary" />
+          </>
+        }
+      />
+    </div>
+  );
+}
diff --git a/app/components/button.tsx b/app/components/button.tsx
diff --git a/app/dev/buttons/page.tsx b/app/dev/buttons/page.tsx
@@ -6,26 +6,26 @@ export default function Home() {
     <div className="p-4 space-y-4 bg-black">
       <Button
         text="Email Us"
-        route="/testing"
+        href="/testing"
         variant="primary"
         icon={EnvelopeIcon}
       />
 
       <Button
         text="Email Us"
-        route="/testing"
+        href="/testing"
         variant="secondary"
         icon={EnvelopeIcon}
       />
 
       <Button
         text="Email Us"
-        route="/testing"
+        href="/testing"
         variant="ghost"
         icon={EnvelopeIcon}
       />
 
-      <Button text="Email Us" route="/testing" variant="primary" />
+      <Button text="Email Us" href="/testing" variant="primary" />
     </div>
   );
 }
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,9 +1,11 @@
+import Nav from "@/components/nav";
 import type { Metadata } from "next";
+import Link from "next/link";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "JumboCode",
+  description: "TODO: description",
 };
 
 export default function RootLayout({
@@ -13,7 +15,21 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="antialiased">{children}</body>
+      <body className="antialiased bg-gray-950">
+        <div className="max-w-screen-lg mx-auto px-4 pt-4 sm:pt-8 pb-24">
+          {/* Gradient background */}
+          <div className="absolute inset-0 h-[85vh] bg-gradient-to-b from-brand/25 to-gray-950 -z-10" />
+
+          <header className="flex justify-between items-center">
+            <Link href="/">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src="/logo.svg" alt="JumboCode" className="h-8" />
+            </Link>
+            <Nav />
+          </header>
+          <main>{children}</main>
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,31 +1,23 @@
-import Button from "@/app/components/button";
-import { EnvelopeIcon } from "@heroicons/react/24/outline";
+import Button from "@/components/button";
+import Hero from "@/components/hero";
 
-export default function Home() {
+export default function HomePage() {
   return (
-    <div className="p-4 space-y-4 bg-black">
-      <Button
-        text="Email Us"
-        route="/testing"
-        variant="primary"
-        icon={EnvelopeIcon}
+    <div>
+      <Hero
+        title={
+          <>
+            Jumbo<span className="text-brand">Code</span>
+          </>
+        }
+        subtitle={<>Empowering students, Elevating non-profits.</>}
+        buttons={
+          <>
+            <Button text="What we do" href="/about" variant="secondary" />
+            <Button text="Get involved" href="/apply" variant="primary" />
+          </>
+        }
       />
-
-      <Button
-        text="Email Us"
-        route="/testing"
-        variant="secondary"
-        icon={EnvelopeIcon}
-      />
-
-      <Button
-        text="Email Us"
-        route="/testing"
-        variant="ghost"
-        icon={EnvelopeIcon}
-      />
-
-      <Button text="Email Us" route="/testing" variant="primary" />
     </div>
   );
 }
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -0,0 +1,20 @@
+import Button from "@/components/button";
+import Hero from "@/components/hero";
+
+export default function ProjectsPage() {
+  return (
+    <div>
+      <Hero
+        title={<>Projects</>}
+        subtitle={<>Check out our current and past projects!</>}
+        buttons={
+          <Button
+            text="View our GitHub"
+            href="https://github.com/jumbocode"
+            variant="secondary"
+          />
+        }
+      />
+    </div>
+  );
+}
diff --git a/components/button.tsx b/components/button.tsx
@@ -1,20 +1,22 @@
 import clsx from "clsx";
+import Link from "next/link";
 
 export default function Button({
   text,
-  route,
+  href,
   variant,
   icon = undefined,
 }: {
   text: string;
-  route: string;
+  href: string;
   variant: "primary" | "secondary" | "ghost";
   icon?: React.ElementType;
 }) {
+  const Element = href.startsWith("/") ? Link : "a";
   const Icon = icon;
   return (
-    <a
-      href={route}
+    <Element
+      href={href}
       className={clsx(
         "block max-w-max px-4 py-2 rounded-lg font-semibold",
         "flex items-center gap-2",
@@ -26,6 +28,6 @@ export default function Button({
     >
       {Icon && <Icon className="w-4 h-4" />}
       <span>{text}</span>
-    </a>
+    </Element>
   );
 }
diff --git a/components/hero.tsx b/components/hero.tsx
@@ -0,0 +1,21 @@
+export default function Hero({
+  title,
+  subtitle,
+  buttons,
+}: {
+  title: React.ReactNode;
+  subtitle: React.ReactNode;
+  buttons?: React.ReactNode;
+}) {
+  return (
+    <div className="py-24 sm:py-48">
+      <h1 className="text-white font-semibold text-4xl">{title}</h1>
+
+      <h2 className="mt-4 text-white/70 text-xl font-medium max-w-screen-md">
+        {subtitle}
+      </h2>
+
+      {buttons && <div className="mt-8 flex gap-x-4">{buttons}</div>}
+    </div>
+  );
+}
diff --git a/components/nav.tsx b/components/nav.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import clsx from "clsx";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function Nav() {
+  return (
+    <nav className="flex gap-x-6">
+      <NavLink href="/" label="Home" />
+      <NavLink href="/about" label="About" />
+      <NavLink href="/projects" label="Projects" />
+      <NavLink href="/apply" label="Apply" />
+    </nav>
+  );
+}
+
+function NavLink({ href, label }: { href: string; label: string }) {
+  const location = usePathname();
+  const isCurrent = location === href;
+  return (
+    <Link
+      href={href}
+      className={clsx(
+        "font-medium",
+        isCurrent ? "text-white" : "text-white/60"
+      )}
+    >
+      {label}
+    </Link>
+  );
+}
diff --git a/public/logo.svg b/public/logo.svg