andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming

Browse Source 
- Updated color classes to use CSS variables for better maintainability and theming.
- Refactored component styles in MembersDirectory.js to enhance visual consistency.
- Adjusted loading states and empty states in NewsletterArchive.js for improved user experience.
- Added new brand colors to tailwind.config.js for future use.
This commit is contained in:
kayela
2026-01-12 20:10:33 -06:00
parent a93e2aa863
commit 7694532d53
77 changed files with 2519 additions and 2338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/Landing.js
View File

@@ -15,7 +15,7 @@ const Landing = () => {
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-white 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]">
<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}
@@ -24,7 +24,7 @@ const Landing = () => {
/>
</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" }}>
<h5 className="text-var(--purple-deep) text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
{infoTitle}
</h5>
{description}
@@ -37,7 +37,7 @@ const Landing = () => {
iconSrc: iconMeetGreet,
infoTitle: 'Meet and Greet',
description: (
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-deep) 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{' '}
@@ -49,7 +49,7 @@ const Landing = () => {
iconSrc: iconSocials,
infoTitle: 'Socials',
description: (
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-deep) 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
@@ -61,7 +61,7 @@ const Landing = () => {
iconSrc: iconActive,
infoTitle: 'Active LOAFers',
description: (
<p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-var(--purple-deep) 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.
@@ -71,17 +71,17 @@ const Landing = () => {
];
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-background">
<PublicNavbar />
{/* Hero Section */}
<section className="relative bg-gradient-to-b from-[#48286e] to-[#664fa3] 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">
<section className="relative bg-gradient-to-b from-var(--purple-deep) to-var(--purple-lavender) 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-white/5 backdrop-blur-xs"></div>
<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">
@@ -89,7 +89,7 @@ const Landing = () => {
</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-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full transition-colors">
<Button style={{ fontFamily: "'Nunito sans', sans-serif" }} className="bg-var(--neutral-800) hover:bg-background text-var(--purple-ink) 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>
@@ -105,9 +105,9 @@ const Landing = () => {
</section>
{/* About Section */}
<section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-[#f1eef9] 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">
<section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-var(--lavender-300) 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-[#48286e] 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" }}>
<h3 className="text-var(--purple-deep) 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>
@@ -118,17 +118,17 @@ const Landing = () => {
</section>
{/* Feature Cards Section */}
<section className="bg-gradient-to-b pb-20 from-[#f1eef9] to-[#ddd8eb] 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">
<section className="bg-gradient-to-b pb-20 from-var(--lavender-300) to-var(--neutral-800) 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-[#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">
<section className="bg-gradient-to-b from-var(--purple-amethyst) to-var(--purple-deep) 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-[#DDD8EB] hover:bg-white text-[#422268] rounded-full
<Button className="bg-var(--neutral-800) hover:bg-background text-var(--purple-ink) rounded-full
py-8 text-xl font-normal px-12 sm:w-[392px] transition-colors ">
Become a Member
</Button>