diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..d7d22c2 --- /dev/null +++ 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 new file mode 100644 index 0000000..b75763b --- /dev/null +++ b/app/about/page.tsx @@ -0,0 +1,18 @@ +import Hero from "@/components/hero"; + +export default function AboutPage() { + return ( +
+ 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. + + } + /> +
+ ); +} diff --git a/app/apply/page.tsx b/app/apply/page.tsx new file mode 100644 index 0000000..0a55132 --- /dev/null +++ b/app/apply/page.tsx @@ -0,0 +1,24 @@ +import Button from "@/components/button"; +import Hero from "@/components/hero"; + +export default function ApplyPage() { + return ( +
+ Apply} + subtitle={ + <> + Join us — we’re a passionate community of developers and designers + committed to building meaningful products for non-profits. + + } + buttons={ + <> +
+ ); +} diff --git a/app/components/button.tsx b/app/components/button.tsx deleted file mode 100644 index 6e1dc26..0000000 --- a/app/components/button.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import clsx from "clsx"; - -export default function Button({ - text, - route, - variant, - icon = undefined, -}: { - text: string; - route: string; - variant: "primary" | "secondary" | "ghost"; - icon?: React.ElementType; -}) { - const Icon = icon; - return ( - - {Icon && } - {text} - - ); -} diff --git a/app/dev/buttons/page.tsx b/app/dev/buttons/page.tsx index efb15ad..07174b4 100644 --- a/app/dev/buttons/page.tsx +++ b/app/dev/buttons/page.tsx @@ -6,26 +6,26 @@ export default function Home() {
); } diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/layout.tsx b/app/layout.tsx index 6560121..8880b96 100644 --- 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 ( - {children} + +
+ {/* Gradient background */} +
+ +
+ + {/* eslint-disable-next-line @next/next/no-img-element */} + JumboCode + +
+
{children}
+
+ ); } diff --git a/app/page.tsx b/app/page.tsx index a812f3a..664f909 100644 --- 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 ( -
-
); } diff --git a/app/projects/page.tsx b/app/projects/page.tsx new file mode 100644 index 0000000..b5c2818 --- /dev/null +++ b/app/projects/page.tsx @@ -0,0 +1,20 @@ +import Button from "@/components/button"; +import Hero from "@/components/hero"; + +export default function ProjectsPage() { + return ( +
+ Projects} + subtitle={<>Check out our current and past projects!} + buttons={ +
+ ); +} diff --git a/components/button.tsx b/components/button.tsx index 6e1dc26..34fec99 100644 --- 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 ( - {Icon && } {text} - + ); } diff --git a/components/hero.tsx b/components/hero.tsx new file mode 100644 index 0000000..cba802c --- /dev/null +++ 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 ( +
+

{title}

+ +

+ {subtitle} +

+ + {buttons &&
{buttons}
} +
+ ); +} diff --git a/components/nav.tsx b/components/nav.tsx new file mode 100644 index 0000000..8eb5ea9 --- /dev/null +++ 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 ( + + ); +} + +function NavLink({ href, label }: { href: string; label: string }) { + const location = usePathname(); + const isCurrent = location === href; + return ( + + {label} + + ); +} diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..08d262d --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tailwind.config.ts b/tailwind.config.ts index 9a52c29..c7571f6 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,5 +1,6 @@ import type { Config } from "tailwindcss"; import colors from "tailwindcss/colors"; + const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", @@ -9,11 +10,12 @@ const config: Config = { theme: { extend: { colors: { - gray: colors.slate, + gray: colors.zinc, brand: "#32C89E", }, }, }, plugins: [], }; + export default config;