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

Update Responsive and Contact Us page and function

Browse Source
This commit is contained in:
Koncept Kit
2025-12-13 00:58:39 +07:00
parent 44f2be5d84
commit 12a32b7f3f
22 changed files with 936 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pages/Landing.js
View File

@@ -19,31 +19,31 @@ const Landing = () => {
<PublicNavbar />
{/* Hero Section */}
<section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-16 py-0 flex gap-16 items-center justify-center">
<div className="py-10 flex flex-col gap-8 items-center justify-center w-[420px]">
<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-8 md:py-12 lg:py-0 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center">
<div className="py-8 md:py-10 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
<div className="flex flex-col gap-6 items-center">
<img src={heroLoaf} alt="LOAF" className="w-[334px] h-[105px] object-contain" />
<img src={heroLoaf} alt="LOAF" className="w-full max-w-[334px] h-auto object-contain" />
</div>
<div className="flex flex-col gap-4 items-center justify-center w-full">
<Link to="/register" className="w-full max-w-[339px]">
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-[32px] text-lg font-medium w-full transition-colors">
<div className="flex flex-col gap-4 items-center justify-center w-full max-w-[339px]">
<Link to="/register" className="w-full">
<Button 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">
Become a Member
</Button>
</Link>
</div>
<p className="text-white text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-white text-base sm:text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
LOAF is supported by the Hollyfield Foundation
</p>
</div>
<div className="py-16 flex items-center justify-center w-[594px] h-[636px]">
<img src={taglineImage} alt="LOAF Tagline" className="w-[483px] h-[297px] object-contain" />
<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-[483px] h-auto object-contain" />
</div>
</section>
{/* About Section */}
<section id="about" className="bg-gradient-to-b from-white to-[#f1eef9] px-16 pt-30 pb-0 flex flex-col gap-8">
<section id="about" className="bg-gradient-to-b from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-12 sm:pt-16 md:pt-20 lg:pt-30 pb-0 flex flex-col gap-6 sm:gap-8">
<div className="flex flex-col items-center pt-12">
<h3 className="text-[#48286e] text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-[#48286e] text-3xl sm:text-4xl md:text-5xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Welcome to LOAF
</h3>
</div>
@@ -54,9 +54,9 @@ const Landing = () => {
</section>
{/* Feature Cards Section */}
<section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] px-16 py-30 flex gap-8 items-start justify-center">
<section className="bg-gradient-to-b from-[#f1eef9] to-[#ddd8eb] 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 flex-col md:flex-row gap-6 sm:gap-8 items-start justify-center">
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
<img src={iconMeetGreet} alt="Meet and Greet" className="w-[300px] h-[270px] object-contain" />
<img src={iconMeetGreet} alt="Meet and Greet" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
<div className="p-6 flex flex-col gap-4.5 w-full">
<h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Meet and Greet
@@ -69,7 +69,7 @@ const Landing = () => {
</Card>
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
<img src={iconSocials} alt="Socials" className="w-[300px] h-[270px] object-contain" />
<img src={iconSocials} alt="Socials" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
<div className="p-6 flex flex-col gap-4.5 w-full">
<h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Socials
@@ -81,7 +81,7 @@ const Landing = () => {
</Card>
<Card className="bg-white rounded-2xl overflow-hidden flex flex-col gap-3.5 items-center pt-5 pb-0 w-full max-w-[363px]">
<img src={iconActive} alt="Active LOAFers" className="w-[300px] h-[270px] object-contain" />
<img src={iconActive} alt="Active LOAFers" className="w-full max-w-[300px] h-auto aspect-[10/9] object-contain" />
<div className="p-6 flex flex-col gap-4.5 w-full">
<h5 className="text-[#48286e] text-2xl font-semibold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Active LOAFers
@@ -94,15 +94,15 @@ const Landing = () => {
</section>
{/* CTA Section */}
<section className="bg-gradient-to-b from-[#644c9f] to-[#48286e] px-16 py-30 flex items-center justify-center">
<div className="flex gap-12 items-center justify-center h-[191px]">
<Link to="/register">
<Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-[32px] text-lg font-medium w-[392px] transition-colors">
<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">
<div className="flex 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">
<Button 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 sm:w-[392px] transition-colors">
Become a Member
</Button>
</Link>
<div className="flex-1 flex items-center justify-center">
<h4 className="text-white text-4xl font-bold max-w-[718px]" style={{ fontFamily: "'Inter', sans-serif" }}>
<h4 className="text-white text-2xl sm:text-3xl md:text-4xl font-bold text-center lg:text-left max-w-[718px]" style={{ fontFamily: "'Inter', sans-serif" }}>
No matter your age or ability, there is something for everyone.
</h4>
</div>