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

refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming

Browse Source 
- Updated color classes to use CSS variables for better maintainability and theming.
- Refactored component styles in MembersDirectory.js to enhance visual consistency.
- Adjusted loading states and empty states in NewsletterArchive.js for improved user experience.
- Added new brand colors to tailwind.config.js for future use.
This commit is contained in:
kayela
2026-01-12 20:10:33 -06:00
parent a93e2aa863
commit 7694532d53
77 changed files with 2519 additions and 2338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/pages/BecomeMember.js
View File

@@ -16,7 +16,7 @@ const BecomeMember = () => {
const Arrow = ({ ...props }) => (
<div className="flex justify-center mb-2">
<ArrowDown className="size-8 text-[#4f378a] font-bold" strokeWidth={2} />
<ArrowDown className="size-8 text---brand-purple font-bold" strokeWidth={2} />
</div>
);
return (
@@ -29,13 +29,13 @@ const BecomeMember = () => {
<div className="relative bg-gray-50 pt-20 px-6 pb-16">
<div className="max-w-7xl mx-auto text-center">
<h1
className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
className="text-3xl sm:text-4xl md:text-5xl font-bold text-var(--purple-deep) mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Become a Member
</h1>
<p
className="text-base sm:text-lg font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
className="text-base sm:text-lg font-medium text-var(--purple-deep) 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
@@ -53,15 +53,15 @@ const BecomeMember = () => {
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-[#eeebf4] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<div className="flex-1 bg-var(--lavender-200) rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Annual Administrative Fees
</h3>
<p
className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
className="text-base sm:text-lg font-medium text-var(--purple-deep) 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).
@@ -71,7 +71,7 @@ const BecomeMember = () => {
</div>
{/* Membership Process Section */}
<div className="relative bg-gray-50 py-32 bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] ">
<div className="relative bg-gray-50 py-32 bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) ">
{/* Decorative shooting star element */}
<div className="hidden lg:block absolute left-0 top-64 w-[195px] h-[1130px] pointer-events-none opacity-50">
<img
@@ -82,13 +82,13 @@ const BecomeMember = () => {
</div>
<div className="max-w-7xl mx-auto px-6 mb-24 text-center">
<h2
className="text-2xl sm:text-3xl md:text-[40px] font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
className="text-2xl sm:text-3xl md:text-[40px] font-bold text-var(--purple-deep) mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
style={{ fontFamily: "'Poppins', sans-serif" }}
>
Membership Process
</h2>
<p
className="text-base sm:text-lg md:text-xl lg:text-2xl lg:font-semibold font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
className="text-base sm:text-lg md:text-xl lg:text-2xl lg:font-semibold font-medium text-var(--purple-deep) 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:
@@ -106,15 +106,15 @@ const BecomeMember = () => {
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) 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-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
className="text-base sm:text-lg font-medium text-var(--purple-deep) 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 validated by an admin.
@@ -136,15 +136,15 @@ const BecomeMember = () => {
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) 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-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
className="text-base sm:text-lg font-medium text-var(--purple-deep) 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).
@@ -165,15 +165,15 @@ const BecomeMember = () => {
className="w-full h-full object-contain"
/>
</div>
<div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) 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-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
className="text-base sm:text-lg font-medium text-var(--purple-deep) 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 validate your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
@@ -195,7 +195,7 @@ const BecomeMember = () => {
className="w-full h-full object-contain"
/>
</div>
<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">
<div className="flex-1 bg-gradient-to-r from-var(--purple-deep) to-var(--purple-lavender) rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
<h3
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" }}
@@ -216,14 +216,14 @@ const BecomeMember = () => {
<div className="relative bg-gray-50 py-16 ">
<div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-center gap-12 text-center">
<h2
className="text-2xl sm:text-3xl md:text-[40px] content-center font-bold text-[#48286e] leading-[1.2] tracking-[-0.8px]"
className="text-2xl sm:text-3xl md:text-[40px] content-center font-bold text-var(--purple-deep) 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-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-[19px] sm:text-lg font-medium tracking-[-0.09px] leading-5 h-auto"
className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-deep) rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-[19px] sm:text-lg font-medium tracking-[-0.09px] leading-5 h-auto"
style={{ fontFamily: "'Inter', sans-serif" }}
>
Register Now!