andika/membership-fe
3
1
Fork 1
Code Issues Pull Requests 1 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 */}
<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">
<img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
</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="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>
</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="pb-4 w-full flex justify-center sm:justify-start md:justify-center lg:justify-start">
<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 lg:justify-start">
<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 ">
Donate
</Button>
</Link>
</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
</p>
</div>

7
src/components/PublicNavbar.js
View File

@@ -72,7 +72,9 @@ const PublicNavbar = () => {
return (
<>
{/* 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'>
<button
@@ -103,7 +105,7 @@ const PublicNavbar = () => {
</header>
{/* 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="/">
<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>
@@ -191,6 +193,7 @@ const PublicNavbar = () => {
</nav>
</header>
</div>
{/* Mobile Menu Drawer */}
{isMobileMenuOpen && (
<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 }) => (
<section className={` ${className}`}>
<div className="max-w-7xl mx-auto">
<Card className="p-14 bg-white rounded-2xl">
<Card className="p-14 bg-white rounded-3xl">
{children}
</Card>
</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">
{/* Hero Section */}
<section className="py-12">
<div className="max-w-3xl mx-auto flex justify-between ">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-4"
<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-extrabold text-[#48286e] "
style={{ fontFamily: "'Poppins', sans-serif" }}>
History of LOAF
</h1>
<div className="flex items-center justify-center gap-2 text-[#48286e]">
<Pen className="h-5 w-5" />
<p className="text-md" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="flex items-center justify-center gap-6 text-[#48286e]">
<Pen className="size-7" />
<p className="text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
By Arden Eversmeyer
</p>
</div>

4
src/pages/Landing.js
View File

@@ -15,7 +15,7 @@ const Landing = () => {
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] 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">
<img
src={iconSrc}
@@ -110,7 +110,7 @@ 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 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) => (
<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">
<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">
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<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-7xl mx-auto">
<div className="flex md:flex-row flex-col gap-10">
{/* 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"
style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF Mission
</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" }}>
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.
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.
</p>
<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>
</Card>
{/* 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"
style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF Values
</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" }}>
<li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li>
<li>Social support for lesbians.</li>