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

Refactor layout and styling for PublicFooter, PublicNavbar, History, Landing, and MissionValues components for improved responsiveness and visual consistency

Browse Source
This commit is contained in:
kayela
2025-12-18 12:02:32 -06:00
parent f7fef8572a
commit a9bdd1d0a6
5 changed files with 130 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/PublicFooter.js
View File

@@ -9,11 +9,11 @@ const PublicFooter = () => {
<> <>
{/* Main Footer */} {/* Main Footer */}
<footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 px-2 lg:px-10 flex items-center justify-between"> <footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 px-2 lg:px-10 flex items-center justify-between">
<div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-40 items-center text-left md:justify-between w-full max-w-7xl mx-auto"> <div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-32 xl:gap-40 items-center justify-center text-left md:justify-between w-full max-w-7xl mx-auto">
<div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0"> <div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
<img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" /> <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
</div> </div>
<nav className="flex flex-col sm:flex-row sm:flex-nowrap gap-8 md:gap-4 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto"> <nav className="flex flex-col sm:flex-row sm:flex-nowrap gap-8 sm:gap-4 lg:gap-20 xl:gap-28 items-start justify-center w-full lg:w-auto">
<div className="md:flex hidden flex-col gap-2 items-start text-left w-full sm:w-auto sm:min-w-[163px]"> <div className="md:flex hidden flex-col gap-2 items-start text-left w-full sm:w-auto sm:min-w-[163px]">
<div className="pb-2 lg:pb-4"> <div className="pb-2 lg:pb-4">
@@ -32,15 +32,15 @@ const PublicFooter = () => {
<Link to="/resources" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link> <Link to="/resources" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
</div> </div>
<div className="flex flex-col gap-2 items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]"> <div className="flex flex-col gap-2 items-center justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
<div className="pb-4 w-full flex justify-center sm:justify-start md:justify-center lg:justify-start"> <div className="pb-4 w-full flex justify-center lg:justify-start">
<Link to="/donate" className="block"> <Link to="/donate" className="block">
<Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium "> <Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
Donate Donate
</Button> </Button>
</Link> </Link>
</div> </div>
<p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF is supported by<br />the Hollyfield Foundation LOAF is supported by<br />the Hollyfield Foundation
</p> </p>
</div> </div>

7
src/components/PublicNavbar.js
View File

@@ -72,7 +72,9 @@ const PublicNavbar = () => {
return ( return (
<> <>
{/* Top Header - Auth Actions */} {/* Top Header - Auth Actions */}
<header className="bg-gradient-to-r from-[#644c9f] to-[#48286e] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6"> <div className='sticky top-0 inset-x-0 z-40'>
<header className="bg-gradient-to-r flex-wrap from-[#644c9f] to-[#48286e] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
<div className='flex gap-4 sm:gap-6'> <div className='flex gap-4 sm:gap-6'>
<button <button
@@ -103,7 +105,7 @@ const PublicNavbar = () => {
</header> </header>
{/* Main Header - Navigation */} {/* Main Header - Navigation */}
<header className="sticky top-0 inset-x-0 z-40 bg-[#664fa3] px-[20px] py-2 flex justify-between items-center"> <header className=" bg-[#664fa3] px-[20px] py-2 flex justify-between items-center">
<Link to="/"> <Link to="/">
<img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" /> <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
</Link> </Link>
@@ -191,6 +193,7 @@ const PublicNavbar = () => {
</nav> </nav>
</header> </header>
</div>
{/* Mobile Menu Drawer */} {/* Mobile Menu Drawer */}
{isMobileMenuOpen && ( {isMobileMenuOpen && (
<div className="fixed inset-0 z-50 lg:hidden"> <div className="fixed inset-0 z-50 lg:hidden">

12
src/pages/History.js
View File

@@ -9,7 +9,7 @@ import { LuArrowDown } from "react-icons/lu";
const CardSection = ({ children, className = '', arrow = true }) => ( const CardSection = ({ children, className = '', arrow = true }) => (
<section className={` ${className}`}> <section className={` ${className}`}>
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<Card className="p-14 bg-white rounded-2xl"> <Card className="p-14 bg-white rounded-3xl">
{children} {children}
</Card> </Card>
</div> </div>
@@ -49,14 +49,14 @@ const History = () => {
<main className="bg-gradient-to-br from-[#F9FAFB] to-[#DCD7EA] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12"> <main className="bg-gradient-to-br from-[#F9FAFB] to-[#DCD7EA] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
{/* Hero Section */} {/* Hero Section */}
<section className="py-12"> <section className="py-12">
<div className="max-w-3xl mx-auto flex justify-between "> <div className="max-w-3xl mx-auto flex justify-around mb-12 flex-col gap-6 items-center lg:flex-row">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-4" <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-[#48286e] "
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
History of LOAF History of LOAF
</h1> </h1>
<div className="flex items-center justify-center gap-2 text-[#48286e]"> <div className="flex items-center justify-center gap-6 text-[#48286e]">
<Pen className="h-5 w-5" /> <Pen className="size-7" />
<p className="text-md" style={{ fontFamily: "'Nunito Sans', sans-serif" }}> <p className="text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
By Arden Eversmeyer By Arden Eversmeyer
</p> </p>
</div> </div>

4
src/pages/Landing.js
View File

@@ -15,7 +15,7 @@ const Landing = () => {
const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`; const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`;
const InfoCard = ({ iconSrc, infoTitle, description }) => ( 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] md:max-w-none lg:max-w-[363px]"> <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]">
<div className="absolute -top-20 md:-top-40 flex justify-center w-full"> <div className="absolute -top-20 md:-top-40 flex justify-center w-full">
<img <img
src={iconSrc} src={iconSrc}
@@ -110,7 +110,7 @@ const Landing = () => {
</section> </section>
{/* Feature Cards 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 md: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-[#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">
{infoCardData.map((card) => ( {infoCardData.map((card) => (
<InfoCard key={card.infoTitle} {...card} /> <InfoCard key={card.infoTitle} {...card} />
))} ))}

20
src/pages/MissionValues.js
View File

@@ -10,33 +10,31 @@ const MissionValues = () => {
<div className="min-h-screen bg-white"> <div className="min-h-screen bg-white">
<PublicNavbar /> <PublicNavbar />
<main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-12 md:py-16"> <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-4 sm:px-6 py-8 sm:py-12 md:py-20">
<div className="max-w-6xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8"> <div className="flex md:flex-row flex-col gap-10">
{/* Left Card - Mission (Purple Gradient) */} {/* Left Card - Mission (Purple Gradient) */}
<Card className="bg-gradient-to-br from-[#664fa3] to-[#48286e] p-8 rounded-2xl shadow-lg"> <Card className="bg-gradient-to-br from-[#664fa3] to-[#48286e] p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between md:flex-1">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6" <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF Mission LOAF Mission
</h2> </h2>
<p className="text-white text-lg text-center leading-relaxed" <p className="text-white text-xl text-center leading-relaxed"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF's mission is to alleviate isolation and enrich the lives of lesbians LOAF’s mission is to alleviate isolation and enrich the lives of lesbians over the age of 50 by providing several social networking events every month in Houston and the surrounding areas.
over the age of 50 by providing several social networking events every month
in Houston and the surrounding areas.
</p> </p>
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-6">
<img src={loafLogo} alt="LOAF Logo" className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-64 lg:h-64 object-contain" /> <img src={loafLogo} alt="LOAF Logo" className="size-32 sm:size-40 md:size-64 lg:size-96 object-contain" />
</div> </div>
</Card> </Card>
{/* Right Card - Values */} {/* Right Card - Values */}
<Card className="bg-white p-8 rounded-2xl shadow-lg"> <Card className="bg-white p-16 rounded-2xl shadow-lg md:flex-1 ">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] text-center mb-6" <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] text-center mb-6"
style={{ fontFamily: "'Poppins', sans-serif" }}> style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF Values LOAF Values
</h2> </h2>
<ol className="list-decimal list-inside space-y-3 text-lg text-[#48286e]" <ol className="list-decimal list-inside space-y-8 text-lg text-[#48286e]"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}> style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li> <li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li>
<li>Social support for lesbians.</li> <li>Social support for lesbians.</li>