andika/membership-fe
2
1
Fork 1
Code Issues Pull Requests 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

74
src/pages/BecomeMember.js
View File

@@ -19,7 +19,7 @@ const BecomeMember = () => {
<PublicNavbar />
{/* Decorative shooting star element */}
<div className="absolute left-[88px] top-[974px] w-[195px] h-[1135px] pointer-events-none opacity-50">
<div className="hidden lg:block absolute left-[88px] top-[974px] w-[195px] h-[1135px] pointer-events-none opacity-50">
<img
src={imgShootingStar}
alt=""
@@ -31,13 +31,13 @@ const BecomeMember = () => {
<div className="relative bg-gray-50 pt-20 pb-24">
<div className="max-w-7xl mx-auto px-6 text-center">
<h1
className="text-[48px] font-bold text-[#48286e] mb-8 leading-[1.2] tracking-[-0.96px]"
className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Become a Member
</h1>
<p
className="text-[19px] font-medium text-[#48286e] max-w-[689px] mx-auto leading-[1.6]"
className="text-base sm:text-lg font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
>
Become a member to receive our monthly newsletter and find out about all the activities LOAF has planned each month. LOAF hosts over 40 social activities each year and occasionally covers the costs for members only
@@ -46,24 +46,24 @@ const BecomeMember = () => {
</div>
{/* Annual Administrative Fees Section */}
<div className="max-w-[1340px] mx-auto px-6 mb-16">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<div className="max-w-[1340px] mx-auto px-6 mb-12 sm:mb-16">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
<div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
<img
src={imgIconAdminFee1}
alt="Admin Fee Icon"
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-[#eeebf4] rounded-[25px] px-8 py-8">
<div className="flex-1 bg-[#eeebf4] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-[32px] font-semibold text-[#48286e] mb-5 leading-[1.49]"
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Annual Administrative Fees
</h3>
<p
className="text-[19px] font-medium text-[#48286e] leading-[1.6]"
className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
>
Annual Administrative Fees for all members are $30 per person. These fees help cover general business expenses (website, advertising, e-newsletter).
@@ -76,13 +76,13 @@ const BecomeMember = () => {
<div className="relative bg-gray-50 py-16">
<div className="max-w-7xl mx-auto px-6 text-center">
<h2
className="text-[40px] font-bold text-[#48286e] mb-8 leading-[1.2] tracking-[-0.8px]"
className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Membership Process
</h2>
<p
className="text-[19px] font-medium text-[#48286e] max-w-[689px] mx-auto leading-[1.6]"
className="text-base sm:text-lg font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
>
Becoming a member is easy, but for the safety and privacy of our membership, there are a few steps:
@@ -91,24 +91,24 @@ const BecomeMember = () => {
</div>
{/* Step 1 */}
<div className="max-w-[1340px] mx-auto px-6 mb-8">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
<div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
<img
src={imgIconAdminFee2}
alt="Step 1 Icon"
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-white rounded-[25px] px-8 py-8">
<div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-[32px] font-semibold text-[#48286e] mb-5 leading-[1.49]"
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Step 1: Application & Email Confirmation
</h3>
<p
className="text-[19px] font-medium text-[#48286e] leading-[1.6]"
className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
>
Complete the online application form and submit it. Check your email for a confirmation link and use it to verify your email. You will then begin to receive LOAF's monthly e-newsletter where all of the social events are listed. Your application will remain pending, and you won't be able to log into the Members Only section of the website until step 2 is complete and you are approved by an admin.
@@ -123,24 +123,24 @@ const BecomeMember = () => {
</div>
{/* Step 2 */}
<div className="max-w-[1340px] mx-auto px-6 mb-8">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
<div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
<img
src={imgIconAdminFee3}
alt="Step 2 Icon"
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-white rounded-[25px] px-8 py-8">
<div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-[32px] font-semibold text-[#48286e] mb-5 leading-[1.49]"
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Step 2: Attend an event and meet us!
</h3>
<p
className="text-[19px] font-medium text-[#48286e] leading-[1.6]"
className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
>
You have 3 months to attend a LOAF event and introduce yourself to a board member. If you do not attend an event within 3 months, you will no longer receive the e-newsletter. (This step can be skipped if you have been referred from a current member and list her on your registration form).
@@ -155,24 +155,24 @@ const BecomeMember = () => {
</div>
{/* Step 3 */}
<div className="max-w-[1340px] mx-auto px-6 mb-8">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<div className="max-w-[1340px] mx-auto px-6 mb-6 sm:mb-8">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
<div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
<img
src={imgIconAdminFee4}
alt="Step 3 Icon"
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-white rounded-[25px] px-8 py-8">
<div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-[32px] font-semibold text-[#48286e] mb-5 leading-[1.49]"
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Step 3: Login and pay the annual fee
</h3>
<p
className="text-[19px] font-medium text-[#48286e] leading-[1.6]"
className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
>
Once we know that you are indeed you, an admin will approve your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
@@ -187,24 +187,24 @@ const BecomeMember = () => {
</div>
{/* Step 4 - With Gradient Background */}
<div className="max-w-[1340px] mx-auto px-6 mb-16">
<div className="flex gap-5 items-center">
<div className="w-[153px] h-[138px] flex-shrink-0">
<div className="max-w-[1340px] mx-auto px-6 mb-12 sm:mb-16">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-5 items-center">
<div className="w-24 h-24 sm:w-32 sm:h-32 md:w-[153px] md:h-[138px] flex-shrink-0">
<img
src={imgIconAdminFee5}
alt="Step 4 Icon"
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-gradient-to-r from-[#48286e] to-[#664fa3] rounded-[25px] px-8 py-8">
<div className="flex-1 bg-gradient-to-r from-[#48286e] to-[#664fa3] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-[32px] font-semibold text-white mb-5 leading-[1.49]"
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-white mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Step 4: Welcome to LOAF!
</h3>
<p
className="text-[19px] font-medium text-white leading-[1.6]"
className="text-base sm:text-lg font-medium text-white leading-[1.6]"
style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
>
Congratulations! Your application is complete, and you now have access to Members Only content. We hope to see you at future events soon!
@@ -217,14 +217,14 @@ const BecomeMember = () => {
<div className="relative bg-gray-50 py-16">
<div className="max-w-7xl mx-auto px-6 text-center">
<h2
className="text-[40px] font-bold text-[#48286e] mb-8 leading-[1.2] tracking-[-0.8px]"
className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Ready to Join Us?
</h2>
<Link to="/register">
<Button
className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-[35px] px-16 py-6 text-[18px] font-medium tracking-[-0.09px] h-[50px]"
className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-base sm:text-lg font-medium tracking-[-0.09px] h-auto"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Register Now!