brandon/uiowaATR
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

replace remaining pages with new layout

Browse Source
This commit is contained in:
Brandon Egger 2023-08-24 13:39:23 -05:00
parent 2180d798d0
commit 9074f79dee
5 changed files with 53 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/HeaderFooterLayout.tsx
View File

@ -6,7 +6,7 @@ export const HeaderFooterLayout = ({ children }: { children: ReactNode }) => {
return (
<div className="flex h-full min-h-screen flex-col">
<Header />
<main className="mx-auto w-full max-w-6xl grow">{children}</main>
<main className="mx-auto w-full grow">{children}</main>
<Footer />
</div>
);

87
src/pages/about.tsx
View File

@ -1,8 +1,7 @@
import { type NextPage } from "next/types";
import Image from "next/image";
import { HandRaisedIcon } from "@heroicons/react/24/solid";
import Footer from "~/components/Footer";
import Header from "~/components/Header";
import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
type Position = "left" | "right";
interface Biography {
@ -70,60 +69,56 @@ const biographies: Biography[] = [
const About: NextPage = () => {
return (
<>
<Header />
<main>
<HeaderFooterLayout>
<div
style={{
backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
backgroundPosition: `center`,
}}
className="h-96"
>
<div
style={{
backgroundImage: `url("/backdrops/uiowa-aerial.jpeg")`,
backgroundPosition: `center`,
WebkitBackdropFilter: `blur(5px) contrast(50%)`,
backdropFilter: `blur(5px) contrast(50%)`,
}}
className="h-96"
className="grid h-full w-full place-items-center"
>
<div
style={{
WebkitBackdropFilter: `blur(5px) contrast(50%)`,
backdropFilter: `blur(5px) contrast(50%)`,
}}
className="grid h-full w-full place-items-center"
>
<div className="space-y-8">
<h1 className="mx-auto max-w-lg text-center text-5xl font-extrabold text-yellow-200">
About Us
<div className="space-y-8">
<h1 className="mx-auto max-w-lg text-center text-5xl font-extrabold text-yellow-200">
About Us
</h1>
</div>
</div>
</div>
<div className="w-full">
<div className="mx-auto max-w-7xl">
<div className="sm:p-8">
{/** Small screens */}
<div className="w-full border-b-2 border-yellow-400 bg-neutral-900 p-4 sm:hidden">
<h1 className="text-center text-4xl font-bold text-white">
Meet the Team
<HandRaisedIcon className="animate-hand_pop ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
</h1>
</div>
{/** Large screens */}
<div className="mx-auto mx-auto mb-20 mt-8 hidden w-max rounded-xl border-2 border-neutral-300 bg-neutral-900 p-4 shadow-xl sm:block">
<h1 className="text-center text-4xl font-bold text-white">
Meet the Team
<HandRaisedIcon className="ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
</h1>
</div>
</div>
</div>
<div className="w-full">
<div className="mx-auto max-w-7xl">
<div className="sm:p-8">
{/** Small screens */}
<div className="w-full border-b-2 border-yellow-400 bg-neutral-900 p-4 sm:hidden">
<h1 className="text-center text-4xl font-bold text-white">
Meet the Team
<HandRaisedIcon className="animate-hand_pop ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
</h1>
</div>
{/** Large screens */}
<div className="mx-auto mx-auto mb-20 mt-8 hidden w-max rounded-xl border-2 border-neutral-300 bg-neutral-900 p-4 shadow-xl sm:block">
<h1 className="text-center text-4xl font-bold text-white">
Meet the Team
<HandRaisedIcon className="ml-4 inline w-12 rotate-12 animate-hand_wave text-yellow-200" />
</h1>
</div>
{/** Biographies (both small & large screens) */}
<div className="grid grid-cols-2 sm:my-16 sm:mt-4 sm:space-y-12 lg:grid-cols-3 lg:space-y-24">
{biographies.map((biography, index) => {
return <Biopgraphy key={index} {...biography} />;
})}
</div>
{/** Biographies (both small & large screens) */}
<div className="grid grid-cols-2 sm:my-16 sm:mt-4 sm:space-y-12 lg:grid-cols-3 lg:space-y-24">
{biographies.map((biography, index) => {
return <Biopgraphy key={index} {...biography} />;
})}
</div>
</div>
</div>
</main>
<Footer />
</>
</div>
</HeaderFooterLayout>
);
};

13
src/pages/contact.tsx
View File

@ -1,9 +1,8 @@
import { type NextPage } from "next/types";
import Footer from "~/components/Footer";
import Image from "next/image";
import Header from "~/components/Header";
import { TopLabel } from "~/components/Labels";
import { ArrowUpRightIcon } from "@heroicons/react/24/outline";
import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
interface ContactDetails {
name: string;
@ -59,9 +58,8 @@ const ContactForm = ({ details }: { details: ContactDetails }) => {
const Contact: NextPage = () => {
return (
<>
<Header />
<main>
<HeaderFooterLayout>
<div>
<section className="mx-auto mb-4 mt-4 space-y-2 text-center sm:mt-8 sm:space-y-4">
<h1 className="text-2xl font-bold">
Have any Suggestions or Feedback?
@ -98,9 +96,8 @@ const Contact: NextPage = () => {
})}
</div>
</section>
</main>
<Footer />
</>
</div>
</HeaderFooterLayout>
);
};

2
src/pages/resources/index.tsx
View File

@ -62,7 +62,7 @@ const Resources = () => {
return (
<HeaderFooterLayout>
<div className="mb-12 mt-6 md:px-2">
<div className="mx-auto mb-12 mt-6 w-full max-w-6xl md:px-2">
<div className="mb-2 flex flex-row justify-between p-2 print:hidden sm:mb-4 sm:p-4">
<section className="space-y-2">
<h1 className="text-3xl font-bold">All Resources</h1>

19
src/pages/resources/search.tsx
View File

@ -1,10 +1,9 @@
import Footer from "~/components/Footer";
import Header from "~/components/Header";
import {
GuidedSearch,
type Question,
type QuestionTypes,
} from "~/components/Search";
import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
const questions: Question<QuestionTypes>[] = [
{
@ -108,19 +107,11 @@ const questions: Question<QuestionTypes>[] = [
const SearchPage = () => {
return (
<>
<div className="snap max-h-screen snap-y snap-mandatory overflow-y-scroll">
<div className="snap-start snap-always">
<Header />
</div>
<div className="mx-auto mb-4 mt-4 w-full max-w-xl snap-center snap-always overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 drop-shadow-md">
<GuidedSearch questions={questions} />
</div>
<div className="snap-end snap-always">
<Footer />
</div>
<HeaderFooterLayout>
<div className="mx-auto my-8 w-full max-w-xl overflow-hidden rounded-xl border border-neutral-400 bg-neutral-200 drop-shadow-md">
<GuidedSearch questions={questions} />
</div>
</>
</HeaderFooterLayout>
);
};