Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP landing page and created page for Team #126

Merged
merged 12 commits into from
Mar 15, 2024
Merged

WIP landing page and created page for Team #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3abb114
created footer
wu-ada Feb 19, 2024
14e193e
Add Footer
nickbar01234 Feb 19, 2024
cee4bc9
Work on landing page
nickbar01234 Feb 22, 2024
c057467
Finished landing footer. Started on formatting for 'Everyone has a st…
wu-ada Mar 3, 2024
0b30070
Finished styling for first box of landing page. Matched padding for m…
wu-ada Mar 8, 2024
4e64189
Deleted font-serif to allow new auto font
wu-ada Mar 8, 2024
320c038
added team page. moved LandingFooter into public layout
wu-ada Mar 10, 2024
5e1a5b9
fixed line height and removed font responsiveness
wu-ada Mar 10, 2024
b7d205f
changed button radius
wu-ada Mar 13, 2024
5ca0084
merged with main
wu-ada Mar 14, 2024
2f30a50
merged with main again
wu-ada Mar 15, 2024
b10e70b
merged with main again again
wu-ada Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const RootLayout = async ({ children }: IRootLayout) => {
<html lang="en">
<SessionProvider session={session}>
<body
className={`${merriweather.className} h-screen w-screen items-center overscroll-none bg-white`}
className={`${merriweather.className} h-screen w-screen items-center overscroll-none bg-[#F4F0EB]`}
>
{children}
</body>
Expand Down
15 changes: 11 additions & 4 deletions src/app/public/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,22 @@
import Navbar from "@components/Navbar";
import { Footer } from "@components/Layout";
import LandingFooter from "@components/LandingFooter";

interface IPublicLayout {
children: React.ReactNode;
}

const PublicLayout = ({ children }: IPublicLayout) => {
return (
<>
<Navbar />
{children}
</>
<div className="flex h-full flex-col justify-between">
<div>
<Navbar />
<div className="px-[93px] pb-[105px] pt-[88px]">
{children} <LandingFooter />
</div>
</div>
<Footer />
</div>
);
};

Expand Down
224 changes: 83 additions & 141 deletions src/app/public/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
import Head from "next/head";

import PhotoCarousel from "@components/PhotoCarousel";
import LandingFooter from "@components/LandingFooter";
import FlowerBox from "@components/FlowerBox";

import Button from "@components/Button";
import Image from "next/legacy/image";
import Link from "next/link";
import Logo from "@public/icons/logo.svg";

const HomePage = () => {
// TODO: make env variables
Expand All @@ -16,152 +16,94 @@ const HomePage = () => {
"https://drive.google.com/drive/folders/1vw8rc5sU0bYJkgH75VZOjI6IF-XAWEmG?usp=share_link";
const legacyInstagram =
"https://instagram.com/thelegacyprojectus?igshid=MzRlODBiNWFlZA==";
const MEET_TLP = "/public/team/";
const START_A_CHAPTER = "/public/start-chapter";

return (
<>
<main className="z-0 flex min-h-screen w-screen flex-col px-[40px]">
<FlowerBox>
{/* Hero Section and Action Items Buttons */}
<div className="flex w-full flex-row items-center md:px-[40px] lg:px-[60px]">
<div className="flex flex-col items-center gap-[20px] lg:mr-[20px] lg:items-start">
<h1 className="mb-[10px] text-center text-3xl font-semibold lg:text-left lg:text-4xl">
Everyone has a story that&apos;s worth preserving.
</h1>
<p className="text-md text-center tracking-easy md:text-lg lg:text-left xl:text-xl">
The Legacy Project, Inc. (TLP) connects college students with
local elders in their community with the purpose of building
strong intergenerational relationships and documenting the life
histories of seniors, ensuring that their legacies are preserved
for years to come.
</p>

<p className="text-md text-center tracking-easy md:text-lg lg:text-left xl:text-xl">
Join an ever-growing network of college students across the
country passionate about telling stories, and form a Legacy
Project chapter at your school or university today. Fill out the
form below and we will be in touch soon about next steps!
</p>
</div>

<span className="relative hidden aspect-square h-[200px] w-[200px] grow-0 lg:flex">
<Image
src="/landing/legacy-logo.png"
alt="A drawing of an older woman and a young boy enjoying ice cream cones together."
layout="fill"
objectFit="cover"
/>
</span>
</div>
{/* Action Items Buttons */}

<div className="flex w-full flex-row flex-wrap place-items-center justify-center gap-[20px]">
<h3>
<Button
text="Start a Chapter"
color="bg-tag-rust"
hover="hover:bg-dark-rust"
link="/public/start-chapter"
/>
</h3>

<Button
text="TLP Chapter Resources"
color="bg-tag-rust"
hover="hover:bg-dark-rust"
link={chapterResources}
/>
<Button
text="TLP Instagram"
color="bg-tag-rust"
hover="hover:bg-dark-rust"
link={legacyInstagram}
/>
</div>
</FlowerBox>
<div className="flex w-full flex-col justify-center gap-y-4 px-[40px] py-[20px]">
<span className="text-center text-3xl font-semibold sm:text-left sm:text-4xl">
About Us
</span>
<p className="leading-7">
The concept of The Legacy Project (TLP) began in 2018, when Arielle
Galinsky, a high school junior at the time, spent her time working
at a local senior community in her Massachusetts hometown. Her role
allowed her to interact with the residents, which she greatly
enjoyed, yet she always left her shift with a strong desire to learn
more about the stories of the seniors she met. With this strong
curiosity, paired with a deep sense of regret she felt having lost
her own grandfathers at a young age, Arielle decided to spearhead
TLP as a personal project. The initiative encompassed conducting
thorough interviews of 18 residents living in the community, with
the intention to hold a ceremony at the finale of the project to
provide her older friends with the opportunity to share their
stories with their families. When the COVID-19 pandemic hit, Arielle
pivoted, and decided the best way to preserve the 18 captivating
stories of the seniors she interviewed was through prose. Arielle
published Their Lives Reflected: A Treasury of Life Stories Captured
Through The Legacy Project in 2021 to showcase and celebrate their
life accounts, both for the seniors themselves and their families.
</p>

<p className="leading-7">
Little did she know that, in the state right next over, Katie Furey,
a sophomore in college home for the pandemic, started a similar
project of her own. Katie had always been close with her
grandmother, Mary, who was living in a nursing home at the time of
the pandemic. When Katie and her family would visit Mary and her
neighbors from outside the window of the nursing home, waving
frantically through the glass and chatting on the phone, Katie
wished there was a way for young people like herself to connect more
deeply with these wonderful people on the other side of the glass
who were experiencing a loneliness perhaps even more pronounced than
the loneliness Katie and her peers were facing as the pandemic
ramped up. The United Nations Millennium Fellowship being hosted
through Tufts University presented a perfect opportunity for Katie
to put her idea into action. Using the program’s framework, Katie
partnered with the Little Sisters of the Poor home in Enfield,
Connecticut. Katie met around ten older adults from the home on
Zoom, connecting with them and learning tidbits of their life
stories, which she is working on compiling as a series of vignettes.
</p>

<div className="flex flex-col gap-y-4 bg-light-moss p-[20px]">
<p className="leading-7">
Arielle and Katie met in 2020, quickly connecting over their
aligned passions to build intergenerational connections provide a
platform for local seniors to share their stories, and preserve
such histories through their collective love for writing. They
decided to start the Tufts Legacy Project, a chapter of The Legacy
Project based out of Tufts University in Medford, Massachusetts
which seeks to bond college students 1:1 with older adults living
in the host communities of Medford and Somerville. When Katie
decided to join the Millennium Fellowship for a second year, she
met Wanda Schlumpf, a sophomore at Tufts, who was similarly
dedicated to the value of storytelling. Wanda took on the project
with her and joined the Tufts TLP chapter as a founding member.
Together, the three women helped to build it into an organization
of nearly 30 students passionate about empowering local seniors
with the platform to amplify their stories.
</p>

<p className="leading-7">
Having watched the Tufts chapter grow over the past two years,
Arielle, Katie, and Wanda decided to establish TLP as a nonprofit
organization with the goal of spreading TLP’s mission across the
country - preserving stories of seniors who might not otherwise
have the opportunity. TLP seeks to build sustainable,
intergenerational connections as a means to combat social
isolation, preserve the life histories of older adults, engage
young individuals in revolutionizing perspectives on aging, and
ensure that every old adult- regardless of background - has the
opportunity to share their experiences.
<main className="flex flex-col">
<div className="relative z-10 flex flex-col content-center items-center gap-y-6 overflow-hidden rounded bg-[#E7DCD0] px-12 py-[80px]">
{/* Hero Section and Action Items Buttons */}
<div className="h-28 w-72 self-start">
<Image src={Logo} alt="logo" className="object-contain" />
</div>
<div className="flex w-full flex-row items-center">
<div className="flex flex-col items-center gap-[24px] lg:mr-[20px] lg:items-start">
<h1 className="mb-[10px] text-left text-6xl/[75px] font-semibold">
Everyone has a story that&apos;s worth preserving.
</h1>
<p className="text-md text-left tracking-easy md:text-lg lg:text-left xl:text-xl">
The Legacy Project documents the stories of the elder generation
to ensure that their legacies are preserved for years to come.
</p>
</div>
</div>
{/* Action Items Buttons */}
<div className="flex justify-center">
<Link
className="w-fit gap-[20px] rounded-xl bg-dark-teal px-6 py-4 text-white hover:-translate-y-0.5 hover:bg-dark-teal"
href={START_A_CHAPTER}
>
Start A Chapter
</Link>
</div>
</div>
<div className="flex w-full flex-col justify-center gap-y-4 py-6">
<span className="text-center text-3xl font-semibold sm:text-left sm:text-4xl">
About Us
</span>
<p className="leading-7">
The Legacy Project, Inc. (TLP) connects college students with local
elders in their community with the purpose of building strong
intergenerational relationships and documenting the life histories of
seniors, ensuring that their legacies are preserved for years to come.
</p>

<p className="leading-7">
Join an ever-growing network of college students across the country
passionate about telling stories, and form a Legacy Project chapter at
your school today.
</p>
<PhotoCarousel />
<LandingFooter />
</main>
</>
<div className="flex justify-center">
<Link
className="w-fit rounded-xl bg-dark-teal px-6 py-4 text-white hover:-translate-y-0.5 hover:bg-dark-teal"
href={MEET_TLP}
>
Meet TLP
</Link>
</div>
<span className="pt-6 text-center text-3xl font-semibold sm:text-left sm:text-4xl">
Our Story
</span>
<p className="leading-7">
The concept of{" "}
<span className="font-bold text-[#742B1A]">
The Legacy Project (TLP)
</span>{" "}
began in 2018, when{" "}
<span className="font-bold text-[#742B1A]">Arielle Galinsky</span>, a
high school junior at the time, spent her time working at a local
senior community in her Massachusetts hometown. Her role allowed her
to interact with the residents, which she greatly enjoyed, yet she
always left her shift with a strong desire to learn more about the
stories of the seniors she met. With this strong curiosity, paired
with a deep sense of regret she felt having lost her own grandfathers
at a young age, Arielle decided to spearhead{" "}
<span className="font-bold text-[#742B1A]">TLP</span> as a personal
project.
</p>

<p className="leading-7">
The initiative encompassed conducting thorough interviews of 18
residents living in the community, with the intention to hold a
ceremony at the finale of the project to provide her older friends
with the opportunity to share their stories with their families. When
the COVID-19 pandemic hit, Arielle pivoted, and decided the best way
to preserve the 18 captivating stories of the seniors she interviewed
was through prose.
</p>
</div>
</main>
);
};

Expand Down
26 changes: 26 additions & 0 deletions src/app/public/team/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
const PublicLayout = async () => {
return (
<div className="flex w-full flex-col justify-center gap-y-4 py-6">
<span className="pt-6 text-center text-3xl font-semibold sm:text-left sm:text-4xl">
Meet TLP
</span>
<p className="leading-7">
The Legacy Project, Inc. (TLP) connects college students with local
elders in their community with the purpose of building strong
intergenerational relationships and documenting the life histories of
seniors, ensuring that their legacies are preserved for years to come.
Join an ever-growing network of college students across the country
passionate about telling stories, and form a Legacy Project chapter at
your school today.
</p>
<div className="rounded-full "></div>
<span className="pt-6 text-center text-3xl font-semibold sm:text-left sm:text-4xl">
Our Team
</span>
<span className="pt-6 text-center text-3xl font-semibold sm:text-left sm:text-4xl">
Press
</span>
</div>
);
};
export default PublicLayout;
8 changes: 4 additions & 4 deletions src/components/FlowerBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ interface FlowerBoxProps {
const FlowerBox = ({ children }: FlowerBoxProps) => {
return (
<div
className="\ relative z-10 mt-[40px] flex flex-col content-center overflow-hidden border border-dark-tan
bg-med-tan p-[20px] text-center sm:p-[40px] md:mx-[40px]"
className="relative z-10 flex flex-col content-center overflow-hidden rounded
bg-med-tan px-[24px] py-[40px] text-center"
>
<span className="z-10 flex flex-col gap-[20px]">{children}</span>

<span className="absolute -left-10 -top-6 aspect-square h-[140px] rotate-45 opacity-60">
{/* <span className="absolute -left-10 -top-6 aspect-square h-[140px] rotate-45 opacity-60">
<Image
src="/landing/pink-flower.png"
layout="fill"
Expand Down Expand Up @@ -43,7 +43,7 @@ const FlowerBox = ({ children }: FlowerBoxProps) => {
objectFit="cover"
alt="Pink flower bottom right frame"
/>
</span>
</span> */}
</div>
);
};
Expand Down
Loading