diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js index 29ab0e1..92a0ae5 100644 --- a/src/components/PublicNavbar.js +++ b/src/components/PublicNavbar.js @@ -72,7 +72,7 @@ const PublicNavbar = () => { return ( <> {/* Top Header - Auth Actions */} -
+
diff --git a/src/index.css b/src/index.css index 54659d2..a32db4b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,115 +1,118 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); + +@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"); + @tailwind base; @tailwind components; @tailwind utilities; body { - margin: 0; - font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: - source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; } @layer base { - :root { - --background: 0 0% 100%; - --foreground: 280 47% 27%; - --card: 0 0% 100%; - --card-foreground: 280 47% 27%; - --popover: 0 0% 100%; - --popover-foreground: 280 47% 27%; - --primary: 280 47% 27%; - --primary-foreground: 0 0% 100%; - --secondary: 268 33% 89%; - --secondary-foreground: 280 47% 27%; - --muted: 268 43% 95%; - --muted-foreground: 268 35% 47%; - --accent: 17 100% 73%; - --accent-foreground: 280 47% 27%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --border: 268 33% 89%; - --input: 268 33% 89%; - --ring: 268 35% 47%; - --chart-1: 268 36% 46%; - --chart-2: 17 100% 73%; - --chart-3: 268 33% 89%; - --chart-4: 280 44% 29%; - --chart-5: 268 35% 47%; - --radius: 0.5rem; - } - .dark { - --background: 0 0% 3.9%; - --foreground: 0 0% 98%; - --card: 0 0% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 0 0% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - --secondary: 0 0% 14.9%; - --secondary-foreground: 0 0% 98%; - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 63.9%; - --accent: 0 0% 14.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 0 0% 14.9%; - --input: 0 0% 14.9%; - --ring: 0 0% 83.1%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; - } + :root { + --background: 0 0% 100%; + --foreground: 280 47% 27%; + --card: 0 0% 100%; + --card-foreground: 280 47% 27%; + --popover: 0 0% 100%; + --popover-foreground: 280 47% 27%; + --primary: 280 47% 27%; + --primary-foreground: 0 0% 100%; + --secondary: 268 33% 89%; + --secondary-foreground: 280 47% 27%; + --muted: 268 43% 95%; + --muted-foreground: 268 35% 47%; + --accent: 17 100% 73%; + --accent-foreground: 280 47% 27%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 268 33% 89%; + --input: 268 33% 89%; + --ring: 268 35% 47%; + --chart-1: 268 36% 46%; + --chart-2: 17 100% 73%; + --chart-3: 268 33% 89%; + --chart-4: 280 44% 29%; + --chart-5: 268 35% 47%; + --radius: 0.5rem; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } } @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } } @layer base { - [data-debug-wrapper="true"] { - display: contents !important; - } + [data-debug-wrapper="true"] { + display: contents !important; + } - [data-debug-wrapper="true"] > * { - margin-left: inherit; - margin-right: inherit; - margin-top: inherit; - margin-bottom: inherit; - padding-left: inherit; - padding-right: inherit; - padding-top: inherit; - padding-bottom: inherit; - column-gap: inherit; - row-gap: inherit; - gap: inherit; - border-left-width: inherit; - border-right-width: inherit; - border-top-width: inherit; - border-bottom-width: inherit; - border-left-style: inherit; - border-right-style: inherit; - border-top-style: inherit; - border-bottom-style: inherit; - border-left-color: inherit; - border-right-color: inherit; - border-top-color: inherit; - border-bottom-color: inherit; - } + [data-debug-wrapper="true"] > * { + margin-left: inherit; + margin-right: inherit; + margin-top: inherit; + margin-bottom: inherit; + padding-left: inherit; + padding-right: inherit; + padding-top: inherit; + padding-bottom: inherit; + column-gap: inherit; + row-gap: inherit; + gap: inherit; + border-left-width: inherit; + border-right-width: inherit; + border-top-width: inherit; + border-bottom-width: inherit; + border-left-style: inherit; + border-right-style: inherit; + border-top-style: inherit; + border-bottom-style: inherit; + border-left-color: inherit; + border-right-color: inherit; + border-top-color: inherit; + border-bottom-color: inherit; + } } diff --git a/src/pages/BecomeMember.js b/src/pages/BecomeMember.js index 384a406..33f17d4 100644 --- a/src/pages/BecomeMember.js +++ b/src/pages/BecomeMember.js @@ -14,22 +14,20 @@ const BecomeMember = () => { const imgIconAdminFee5 = `${process.env.PUBLIC_URL}/imgIconAdminFee5.png`; const imgShootingStar = `${process.env.PUBLIC_URL}/imgShootingStar.png`; + const Arrow = ({ ...props }) => ( +
+ +
+ ); return (
- {/* Decorative shooting star element */} -
- -
+ {/* Hero Section */} -
-
+
+

{

{/* Annual Administrative Fees Section */} -
+
{
{/* Membership Process Section */} -
-
+
+ {/* Decorative shooting star element */} +
+ +
+

Membership Process

Becoming a member is easy, but for the safety and privacy of our membership, there are a few steps:

-
- {/* Step 1 */} -
-
-
- Step 1 Icon + + {/* Step 1 */} +
+
+
+ Step 1 Icon +
+
+

+ Step 1: Application & Email Confirmation +

+

+ 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. +

+
-
-

- Step 1: Application & Email Confirmation -

-

- 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. -

+
+ + {/* Arrow Down Icon */} + + + {/* Step 2 */} +
+
+
+ Step 2 Icon +
+
+

+ Step 2: Attend an event and meet us! +

+

+ 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). +

+
+
+
+ + {/* Arrow Down Icon */} + + {/* Step 3 */} +
+
+
+ Step 3 Icon +
+
+

+ Step 3: Login and pay the annual fee +

+

+ 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. +

+
+
+
+ + {/* Arrow Down Icon */} + + + {/* Step 4 - With Gradient Background */} +
+
+
+ Step 4 Icon +
+
+

+ Step 4: Welcome to LOAF! +

+

+ Congratulations! Your application is complete, and you now have access to Members Only content. We hope to see you at future events soon! +

+
- - {/* Arrow Down Icon */} -
- -
- - {/* Step 2 */} -
-
-
- Step 2 Icon -
-
-

- Step 2: Attend an event and meet us! -

-

- 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). -

-
-
-
- - {/* Arrow Down Icon */} -
- -
- - {/* Step 3 */} -
-
-
- Step 3 Icon -
-
-

- Step 3: Login and pay the annual fee -

-

- 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. -

-
-
-
- - {/* Arrow Down Icon */} -
- -
- - {/* Step 4 - With Gradient Background */} -
-
-
- Step 4 Icon -
-
-

- Step 4: Welcome to LOAF! -

-

- Congratulations! Your application is complete, and you now have access to Members Only content. We hope to see you at future events soon! -

-
-
-
- {/* CTA Section */} -
-
+
+

Ready to Join Us?

{/* Accordion Content */}
- + {/* Description */}

{resource.description} @@ -170,7 +175,7 @@ const Resources = () => {

{resource.phone && (
- +