150 lines
7.9 KiB
JavaScript
150 lines
7.9 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Button } from '../components/ui/button';
|
|
import { Card } from '../components/ui/card';
|
|
import PublicNavbar from '../components/PublicNavbar';
|
|
import PublicFooter from '../components/PublicFooter';
|
|
|
|
const Landing = () => {
|
|
// LOAF brand assets (local)
|
|
const taglineImage = `${process.env.PUBLIC_URL}/web_elements_tagline.png`;
|
|
const shootingStar = `${process.env.PUBLIC_URL}/shooting_star_2.png`;
|
|
const iconMeetGreet = `${process.env.PUBLIC_URL}/icon-meet-greet.png`;
|
|
const iconSocials = `${process.env.PUBLIC_URL}/icon-socials.png`;
|
|
const iconActive = `${process.env.PUBLIC_URL}/icon-active.png`;
|
|
const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`;
|
|
const friendships = `${process.env.PUBLIC_URL}/friendships.png`;
|
|
const InfoCard = ({ iconSrc, infoTitle, description }) => (
|
|
<Card className="relative bg-background rounded-2xl overflow-visible flex flex-col gap-3.5 items-center pt-16 pb-0 w-full max-w-none lg:max-w-[363px]">
|
|
<div className="absolute -top-20 md:-top-40 flex justify-center w-full">
|
|
<img
|
|
src={iconSrc}
|
|
alt={infoTitle}
|
|
className=" w-40 md:w-64 lg: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-foreground 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-foreground 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-foreground 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-foreground 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-background">
|
|
<PublicNavbar />
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative bg-gradient-to-b from-foreground to-muted-foreground 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 w-full">
|
|
{/* Friendships background image */}
|
|
<div className="absolute inset-0 z-0 flex overflow-hidden top-[-32rem] lg:-top-32">
|
|
<img src={friendships} alt="Friendships" className="lg:max-w-screen opacity-15 max-w-full max-h-full object-contain" />
|
|
</div>
|
|
{/* Blur Overlay */}
|
|
<div className="absolute inset-0 z-[1] bg-background/5 backdrop-blur-xs"></div>
|
|
{/* Left column Loaf Image */}
|
|
<div className="relative z-10 lg:py-20 py-7 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[530px] lg:flex-shrink-0">
|
|
<div className="flex flex-col gap-6 items-center">
|
|
<img src={heroLoaf} alt="LOAF" className="w-full max-w-xs md:max-w-[370px] h-auto object-contain" />
|
|
</div>
|
|
<div className="flex flex-col gap-4 items-center justify-center w-full max-w-[339px]">
|
|
<Link to="/become-a-member" className="w-full">
|
|
<Button style={{ fontFamily: "'Nunito sans', sans-serif" }} className="bg-chart-6 hover:bg-background text-primary rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full transition-colors">
|
|
Become a Member
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<p className="text-white text-base sm:text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
LOAF is supported by the Hollyfield Foundation
|
|
</p>
|
|
</div>
|
|
{/* Right Column Loaf Tagline */}
|
|
<div className="relative z-10 py-8 md:py-12 lg:py-16 flex items-center justify-center w-full lg:max-w-[815px] h-auto">
|
|
<img src={taglineImage} alt="LOAF Tagline" className="relative z-10 w-full h-auto object-cover" />
|
|
</div>
|
|
</section>
|
|
|
|
{/* About Section */}
|
|
<section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-muted px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-4 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col">
|
|
<div className="flex flex-col items-center pt-4">
|
|
<h3 className="text-foreground px-4 pb-6 md:py-8 text-4xl leading-[60px] md:text-5xl lg:text-6xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Welcome to LOAF
|
|
</h3>
|
|
</div>
|
|
<p className="text-[rgba(0,0,0,0.55)] text-lg lg:text-2xl text-center font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
LOAF is Houston's social networking group for lesbians who are 50 years of age and older. LOAF hosts three main activities each month, Meet and Greets, Socials, and ActiveLOAFers. TheaterLOAFers coordinate events throughout the year.
|
|
</p>
|
|
<img src={shootingStar} alt="Decorative element" className="w-full h-[197px] object-contain" />
|
|
</section>
|
|
|
|
{/* Feature Cards Section */}
|
|
<section className="bg-gradient-to-b pb-20 from-muted to-chart-6 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 md:py-20 lg:py-30 flex flex-col sm:w-full lg:flex-row gap-40 md:gap-64 lg:gap-8 items-stretch justify-center">
|
|
{infoCardData.map((card) => (
|
|
<InfoCard key={card.infoTitle} {...card} />
|
|
))}
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="bg-gradient-to-b from-dusty-grape to-foreground 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-reverse md: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 flex items-center justify-center">
|
|
<Button className="bg-chart-6 hover:bg-background text-primary rounded-full
|
|
py-8 text-xl font-normal px-12 sm:w-[392px] transition-colors ">
|
|
Become a Member
|
|
</Button>
|
|
</Link>
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<h4 className="text-white text-3xl px-4 font-bold text-center lg:text-left leading-normal max-w-[718px]" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
|
No matter your age or ability, there is something for everyone.
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<PublicFooter />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Landing;
|