andika/membership-fe
3
1
Fork 1
Code Issues 21 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

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>