diff --git a/frontend/public/logo.png b/frontend/public/logo.png new file mode 100644 index 00000000..7c1ece06 Binary files /dev/null and b/frontend/public/logo.png differ diff --git a/frontend/src/components/.keep b/frontend/src/components/.keep deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/components/Navigation.tsx b/frontend/src/components/Navigation.tsx new file mode 100644 index 00000000..7913cf35 --- /dev/null +++ b/frontend/src/components/Navigation.tsx @@ -0,0 +1,108 @@ +import React, { useEffect } from "react"; +import Link from "next/link"; +import { useRouter } from "next/router"; + +const navigation = [ + { + title: "Home", + href: "/", + icon: ( + + + + ), + }, + { + title: "Programs", + href: "/programs", + icon: ( + + + + ), + }, + { + title: "Profile", + href: "/profile", + icon: ( + + + + ), + }, +]; + +function Navigation({ children }: { children: React.ReactNode }) { + const router = useRouter(); + const [offset, setOffset] = React.useState(0); + + useEffect(() => { + const ordering = navigation.map((item) => item.href); + const idx = ordering.indexOf(router.pathname) | 0; + setOffset(idx * 68); + }, [router.pathname]); + + return ( +
+ +
{children}
+
+ ); +} + +export default Navigation; diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx new file mode 100644 index 00000000..454a3533 --- /dev/null +++ b/frontend/src/pages/_app.tsx @@ -0,0 +1,12 @@ +import { AppProps } from "next/app"; +import Navigation from "../components/Navigation"; +import "../styles/global.css"; + +function MyApp({ Component, pageProps }: AppProps) { + return ( + + + + ); +} +export default MyApp; diff --git a/frontend/src/pages/_document.tsx b/frontend/src/pages/_document.tsx new file mode 100644 index 00000000..ba122ce7 --- /dev/null +++ b/frontend/src/pages/_document.tsx @@ -0,0 +1,16 @@ +import { Head, Html, Main, NextScript } from "next/document"; + +export default function Document() { + return ( + + + + + + +
+ + + + ); +} diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 90b1117c..663dde56 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -1,7 +1,7 @@ export default function Home() { return (
-

Hello PIA!

+

PIA Home Page!

); } diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx new file mode 100644 index 00000000..ec4fb140 --- /dev/null +++ b/frontend/src/pages/profile.tsx @@ -0,0 +1,7 @@ +export default function Profile() { + return ( +
+

PIA Profile Page!

+
+ ); +} diff --git a/frontend/src/pages/programs.tsx b/frontend/src/pages/programs.tsx new file mode 100644 index 00000000..52c5f6ef --- /dev/null +++ b/frontend/src/pages/programs.tsx @@ -0,0 +1,7 @@ +export default function Programs() { + return ( +
+

PIA Programs Page!

+
+ ); +} diff --git a/frontend/src/styles/.keep b/frontend/src/styles/.keep deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/styles/Alternate Gothic No3 D Regular.otf b/frontend/src/styles/Alternate Gothic No3 D Regular.otf new file mode 100644 index 00000000..3d06b42e Binary files /dev/null and b/frontend/src/styles/Alternate Gothic No3 D Regular.otf differ diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css new file mode 100644 index 00000000..84518fd7 --- /dev/null +++ b/frontend/src/styles/global.css @@ -0,0 +1,11 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@font-face { + font-family: "alternate-gothic"; + src: url("./Alternate\ Gothic\ No3\ D\ Regular.otf") format("opentype"); + /* Add other font formats if necessary */ + font-weight: normal; + font-style: normal; +} diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 4a44eb18..27c23c48 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -1,12 +1,7 @@ import type { Config } from "tailwindcss"; const config: Config = { - content: [ - "./src/**/*.{js,ts,jsx,tsx}", - "./src/pages/**/*.{js,ts,jsx,tsx}", - "./src/components/**/*.{js,ts,jsx,tsx}", - "./src/styles/**/*.{js,ts,jsx,tsx}", - ], + content: ["./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { backgroundImage: { @@ -14,6 +9,10 @@ const config: Config = { "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, + colors: { + primaryDarkGreen: "#006867", + accentGreen: "#A1DAD7", + }, }, plugins: [], };