Refactor PublicFooter and PublicNavbar for improved responsiveness and styling; add InfoCard component to Landing page for better content organization
This commit is contained in:
@@ -14,13 +14,68 @@ const Landing = () => {
|
||||
const iconActive = `${process.env.PUBLIC_URL}/icon-active.png`;
|
||||
const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`;
|
||||
|
||||
const InfoCard = ({ iconSrc, infoTitle, description }) => (
|
||||
<Card className="relative bg-white rounded-2xl overflow-visible flex flex-col gap-3.5 items-center pt-16 pb-0 w-full max-w-[363px]">
|
||||
<div className="absolute -top-52 flex justify-center w-full">
|
||||
<img
|
||||
src={iconSrc}
|
||||
alt={infoTitle}
|
||||
className="w-full max-w-[330px] h-auto aspect-[10/9] object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6 flex flex-col pt-10 gap-4.5 w-full">
|
||||
<h5 className="text-[#48286e] text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
||||
{infoTitle}
|
||||
</h5>
|
||||
{description}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const infoCardData = [
|
||||
{
|
||||
iconSrc: iconMeetGreet,
|
||||
infoTitle: 'Meet and Greet',
|
||||
description: (
|
||||
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations
|
||||
with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually
|
||||
take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
|
||||
<a href="mailto:info@loaftx.org" className="underline">info@loaftx.org</a> for upcoming times and locations.
|
||||
</p>
|
||||
),
|
||||
},
|
||||
{
|
||||
iconSrc: iconSocials,
|
||||
infoTitle: 'Socials',
|
||||
description: (
|
||||
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past
|
||||
social events include bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board
|
||||
games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is
|
||||
something for everyone.
|
||||
</p>
|
||||
),
|
||||
},
|
||||
{
|
||||
iconSrc: iconActive,
|
||||
infoTitle: 'Active LOAFers',
|
||||
description: (
|
||||
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included
|
||||
hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling
|
||||
through the botanic gardens or the Arboretum.
|
||||
</p>
|
||||
),
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
<PublicNavbar />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 md:py-12 lg:py-0 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center">
|
||||
<div className="py-8 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
|
||||
<section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center">
|
||||
<div className="py-20 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
|
||||
<div className="flex flex-col gap-6 items-center">
|
||||
<img src={heroLoaf} alt="LOAF" className="w-full max-w-[334px] h-auto object-contain" />
|
||||
</div>
|
||||
@@ -41,7 +96,7 @@ const Landing = () => {
|
||||
</section>
|
||||
|
||||
{/* About Section */}
|
||||
<section id="about" className="bg-gradient-to-b from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-12 sm:pt-16 md:pt-20 lg:pt-30 pb-0 flex flex-col gap-6 sm:gap-8">
|
||||
<section id="about" className="bg-gradient-to-b pb-44 from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-12 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col gap-6 sm:gap-8">
|
||||
<div className="flex flex-col items-center pt-12">
|
||||
<h3 className="text-[#48286e] text-3xl sm:text-4xl md:text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Welcome to LOAF
|
||||
@@ -55,54 +110,22 @@ const Landing = () => {
|
||||
|
||||
{/* Feature Cards Section */}
|
||||
<section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex flex-col md:flex-row gap-6 sm:gap-8 items-stretch justify-center">
|
||||
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
|
||||
<img src={iconMeetGreet} alt="Meet and Greet" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
|
||||
<div className="p-6 flex flex-col gap-4.5 w-full">
|
||||
<h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Meet and Greet
|
||||
</h5>
|
||||
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
|
||||
<a href="mailto:info@loaftx.org" className="underline">info@loaftx.org</a> for upcoming times and locations.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
|
||||
<img src={iconSocials} alt="Socials" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
|
||||
<div className="p-6 flex flex-col gap-4.5 w-full">
|
||||
<h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Socials
|
||||
</h5>
|
||||
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past social events include, bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is something for everyone.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
|
||||
<img src={iconActive} alt="Active LOAFers" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
|
||||
<div className="p-6 flex flex-col gap-4.5 w-full">
|
||||
<h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
Active LOAFers
|
||||
</h5>
|
||||
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included, hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling through the botanic gardens or the Arboretum.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
{infoCardData.map((card) => (
|
||||
<InfoCard key={card.infoTitle} {...card} />
|
||||
))}
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="bg-gradient-to-b from-[#644c9f] to-[#48286e] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
|
||||
<div className="flex flex-col lg:flex-row gap-8 sm:gap-10 md:gap-12 items-center justify-center w-full max-w-6xl">
|
||||
<Link to="/register" className="w-full sm:w-auto">
|
||||
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full sm:w-[392px] transition-colors">
|
||||
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-3
|
||||
py-7 text-base sm:text-lg font-medium w-full sm:w-[392px] transition-colors ">
|
||||
Become a Member
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<h4 className="text-white text-2xl sm:text-3xl md:text-4xl font-bold text-center lg:text-left max-w-[718px]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<h4 className="text-white text-3xl font-bold text-center lg:text-left max-w-[718px]" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
||||
No matter your age or ability, there is something for everyone.
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user