invert prop added to social links, navbar and index route updated

devsanantonio · Dec 20, 2024 · b4e0483 · b4e0483
1 parent 755034b
commit b4e0483
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 66 deletions.
diff --git a/app/components/CTA/DiscordCommunity.tsx b/app/components/CTA/DiscordCommunity.tsx
@@ -4,7 +4,7 @@ import { Link } from '@remix-run/react';
 
 export function DiscordCommunity() {
    return (
-      <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48 md:pt-32">
+      <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48">
          <Container className="">
             <FadeIn>
                <h2 className="font-display mx-auto mt-6 block max-w-5xl text-balance text-4xl font-medium tracking-tight text-neutral-950 md:text-5xl lg:text-center lg:text-7xl">

diff --git a/app/components/CTA/ExpandingNetwork.jsx b/app/components/CTA/ExpandingNetwork.jsx
@@ -43,7 +43,7 @@ export function ExpandingNetwork() {
                for our YouTube/Twitch channels and GitHub
             </p>
          </SectionIntro>
-         <Container className="mt-16">
+         <Container className="">
             <FadeInStagger className="grid grid-cols-1 gap-8 lg:grid-cols-3">
                {collaborativeChannels.map((channel) => (
                   <FadeIn key={channel.href} className="flex">

diff --git a/app/components/CTA/Geekdom.tsx b/app/components/CTA/Geekdom.tsx
@@ -5,7 +5,7 @@ import { Link } from '@remix-run/react';
 
 export function Geekdom() {
    return (
-      <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48 md:pt-32">
+      <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48">
          <Container className="">
             <FadeIn>
                <div className="mx-auto max-w-3xl">

diff --git a/app/components/CTA/Hero.tsx b/app/components/CTA/Hero.tsx
@@ -5,12 +5,12 @@ import { FadeIn } from '../ui/FadeIn';
 
 export function Hero() {
    return (
-      <div className="overflow-hidden pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48 md:pt-32">
+      <div className="pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48 md:pt-32">
          <Container className="">
             <FadeIn>
                <div className="mx-auto max-w-5xl">
                   <h1 className="font-display text-balance text-6xl/[0.9] font-medium tracking-tight text-neutral-950 sm:text-8xl/[0.8] md:text-9xl/[0.8]">
-                     Learning Networking Community
+                     Learning Networking <span className="bg-gradient-to-r from-purple-500 via-violet-500 to-pink-500 bg-clip-text bg-no-repeat py-4 text-transparent [text-shadow:0_0_rgba(0,0,0,0.1)]">Community</span>
                   </h1>
                   <p className="mt-8 max-w-2xl text-xl/7 font-medium text-neutral-950/75 sm:text-2xl/8">
                      Discover a welcoming community of passionate tech enthusiasts in San Antonio
@@ -30,9 +30,6 @@ export function Hero() {
                         <span className="arrow">→</span>
                      </AltButton>
                   </div>
-                  <div className="mt-8 flex items-center justify-center gap-8 py-3 md:hidden">
-                        <SocialLinks />
-                  </div>
                </div>
             </FadeIn>
          </Container>

diff --git a/app/components/CTA/Sponsors.jsx b/app/components/CTA/Sponsors.jsx
@@ -3,8 +3,8 @@ import { Container } from '../ui/Container';
 
 export function Sponsors() {
    return (
-      <div className="py-24 sm:py-32 lg:py-40">
-         <Container className="mt-16">
+      <div className="mt-24 py-24">
+         <Container className="">
             <FadeIn>
                <div className="max-w-5xl">
                   <h2 className="font-display block text-balance text-4xl font-medium tracking-tight sm:text-5xl">

diff --git a/app/components/ui/Footer.tsx b/app/components/ui/Footer.tsx
@@ -19,7 +19,7 @@ function CallToAction() {
             </p>
          </hgroup>
          <p className="mx-auto mt-6 max-w-xs text-sm/6 text-neutral-950/50">
-            DEVSA is building a stronger ecosystem for the techies in San
+            We're building a stronger ecosystem for the techies in San
             Antonio
          </p>
          <div className="mt-6">

diff --git a/app/components/ui/RootLayout.tsx b/app/components/ui/RootLayout.tsx
@@ -6,7 +6,6 @@ import { Container } from './Container';
 import { Logo } from '../images/Logo';
 import { Footer } from './Footer';
 import { SocialLinks } from './socialLinks';
-import qrCode from '../images/qr-code.svg';
 
 export function RootLayout({ children }: { children: React.ReactNode }) {
    let pathname = useFetcher();
@@ -59,8 +58,10 @@ function NavBar({
             <Link to="/" aria-label="Home">
                <Logo className="-ml-8 h-9 lg:ml-0" />
             </Link>
-            <div className='hidden lg:flex lg:items-center gap-8 py-3'>
-               <SocialLinks />
+            <div className='flex items-center gap-8 py-3'>
+               <div className='flex items-center gap-8 py-3 -ml-8 lg:ml-0'>
+                  <SocialLinks invert={invert} />
+               </div>
                <button
                   ref={toggleRef}
                   type="button"
@@ -118,10 +119,10 @@ function NavigationItem({
 
 function Navigation() {
    return (
-      <nav className="font-display mt-px text-5xl font-medium tracking-tight text-white">
+      <nav className="font-display mt-px text-5xl font-medium tracking-tight text-white lg:text-center">
          <NavigationRow>
             <NavigationItem href="/mission">Our Mission</NavigationItem>
-            <NavigationItem href="#">The Community</NavigationItem>
+            <NavigationItem href="#">Meet The Community</NavigationItem>
          </NavigationRow>
          <NavigationRow>
             <NavigationItem href="#">Create an Event</NavigationItem>
@@ -174,7 +175,6 @@ function RootLayoutInner({ children }: { children: React.ReactNode }) {
             <div
                className="absolute left-0 right-0 top-2 z-40 pt-14"
                aria-hidden={expanded ? 'true' : undefined}
-               //inert={expanded ? '' : undefined}
             >
                <NavBar
                   panelId={panelId}
@@ -198,7 +198,6 @@ function RootLayoutInner({ children }: { children: React.ReactNode }) {
                style={{ height: expanded ? 'auto' : '0.5rem' }}
                className="relative z-50 overflow-hidden bg-neutral-950 pt-2"
                aria-hidden={expanded ? undefined : 'true'}
-               //inert={expanded ? undefined : ''}
             >
                <motion.div layout className="bg-neutral-800">
                   <div ref={navRef} className="bg-neutral-950 pb-16 pt-14">
@@ -219,36 +218,6 @@ function RootLayoutInner({ children }: { children: React.ReactNode }) {
                      />
                   </div>
                   <Navigation />
-                  <div className="relative bg-neutral-950 before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-neutral-800">
-                     <Container className="">
-                        <div className="grid grid-cols-1 gap-y-10 pb-16 pt-10 sm:grid-cols-2 sm:pt-16">
-                           <div>
-                              <h2 className="font-display text-base font-semibold text-white">
-                                 Make a Tax-Deductible Donation
-                              </h2>
-                              <div className="relative mt-3.5 flex h-10 w-10 flex-none items-center justify-center">
-                                 <Link
-                                    to="https://donate.stripe.com/00g3cq2yM2XsbGU144"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                 >
-                                    <img
-                                       src={qrCode}
-                                       alt="Stripe QR code"
-                                       className="h-full w-full bg-white p-1"
-                                    />
-                                 </Link>
-                              </div>
-                           </div>
-                           <div className="sm:border-l sm:border-transparent sm:pl-16">
-                              <h2 className="font-display text-base font-semibold text-white">
-                                 Follow us
-                              </h2>
-                                 <SocialLinks />
-                           </div>
-                        </div>
-                     </Container>
-                  </div>
                </motion.div>
             </motion.div>
          </header>

diff --git a/app/components/ui/socialLinks.tsx b/app/components/ui/socialLinks.tsx
@@ -1,4 +1,5 @@
 import { Link } from '@remix-run/react';
+import clsx from 'clsx';
 
 function SocialIconX(props: React.ComponentPropsWithoutRef<'svg'>) {
    return (
@@ -54,48 +55,59 @@ function SocialIconYoutube(props: React.ComponentPropsWithoutRef<'svg'>) {
    );
 }
 
-export function SocialLinks() {
+export function SocialLinks({ invert = false }: { invert?: boolean }) {
    return (
       <>
          <Link
             to="https://discord.gg/cvHHzThrEw"
             target="_blank"
             aria-label="Connect with us on Discord"
-            className="text-neutral-950 data-[hover]:text-neutral-950/75"
-         >
-            <SocialIconDiscord className="size-4" />
+            className={clsx(
+               "size-4",
+               invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75"
+            )}         >
+            <SocialIconDiscord />
          </Link>
          <Link
             to="https://github.com/devsanantonio"
             target="_blank"
             aria-label="Build with us on GitHub"
-            className="text-neutral-950 data-[hover]:text-neutral-950/75"
+            className={clsx(
+               "size-4",
+               invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75"
+            )}
          >
-            <SocialIconGithub className="size-4" />
+            <SocialIconGithub />
          </Link>
          <Link
             to="https://www.instagram.com/devsatx"
             target="_blank"
             aria-label="Follow us on Instagram"
-            className="text-neutral-950 data-[hover]:text-neutral-950/75"
-         >
-            <SocialIconInstagram className="size-4" />
+            className={clsx(
+               "size-4",
+               invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75"
+            )}         >
+            <SocialIconInstagram />
          </Link>
          <Link
             to="https://twitter.com/devsatx"
             target="_blank"
             aria-label="Follow us on X"
-            className="text-neutral-950 data-[hover]:text-neutral-950/75"
-         >
-            <SocialIconX className="size-4" />
+            className={clsx(
+               "size-4",
+               invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75"
+            )}         >
+            <SocialIconX />
          </Link>
          <Link
             to="https://www.youtube.com/@devSATX"
             target="_blank"
             aria-label="Hit that subscribe button on YouTube"
-            className="text-neutral-950 data-[hover]:text-neutral-950/75"
-         >
-            <SocialIconYoutube className="size-4" />
+            className={clsx(
+               "size-4",
+               invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75"
+            )}         >
+            <SocialIconYoutube />
          </Link>
       </>
    );

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -42,12 +42,12 @@ export default function Index() {
    return (
       <>
          <Hero />
-         <DiscordCommunity />
+         <Geekdom />
          <ExpandableEventCards />
-         <CalendarSection />
          <ExpandingNetwork />
+         <CalendarSection />
          <Sponsors />
-         <Geekdom />
+         <DiscordCommunity />
       </>
    );
 }