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

Refactor code structure for improved readability and maintainability

Browse Source 
Fixed images and styling for Landing page
This commit is contained in:
kayela
2025-12-19 15:28:19 -06:00
parent b6d25cdab7
commit 8ffa97bcd1
3 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/friendships.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/web_elements_tagline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 KiB

22
src/pages/Landing.js
View File

@@ -7,13 +7,13 @@ import PublicFooter from '../components/PublicFooter';
const Landing = () => {
// LOAF brand assets (local)
const taglineImage = `${process.env.PUBLIC_URL}/tagline-image.png`;
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-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">
@@ -75,10 +75,17 @@ const Landing = () => {
<PublicNavbar />
{/* Hero Section */}
<section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 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">
<div className="lg:py-20 py-7 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
<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">
{/* 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>
{/* 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-[334px] h-auto object-contain" />
<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="/register" className="w-full">
@@ -91,8 +98,9 @@ const Landing = () => {
LOAF is supported by the Hollyfield Foundation
</p>
</div>
<div className="py-8 md:py-12 lg:py-16 flex items-center justify-center w-full lg:w-[594px] h-auto">
<img src={taglineImage} alt="LOAF Tagline" className="w-full max-w-[330px] md:max-w-[483px] h-auto object-contain" />
{/* 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>