From 4b96a688097f53ef3b007f99cec483c0c2884025 Mon Sep 17 00:00:00 2001 From: Jesse Hernandez Date: Tue, 7 Jan 2025 23:17:15 -0600 Subject: [PATCH] footer nav geekdom component updates --- app/components/CTA/CommunityMarquee.jsx | 91 ------ app/components/CTA/Geekdom.tsx | 2 +- app/components/CTA/card-carousel.tsx | 413 ------------------------ app/components/ui/AltButton.tsx | 4 +- app/components/ui/AnimatedIntro.tsx | 15 +- app/components/ui/Footer.tsx | 18 +- app/components/ui/NavBar.tsx | 2 +- app/components/ui/PlusGrid.tsx | 12 +- app/components/ui/RootLayout.tsx | 2 +- app/components/ui/socialLinks.tsx | 10 +- app/routes/_index.tsx | 2 +- app/routes/coworking-space/route.tsx | 4 +- package-lock.json | 16 + package.json | 1 + 14 files changed, 59 insertions(+), 533 deletions(-) delete mode 100644 app/components/CTA/CommunityMarquee.jsx delete mode 100644 app/components/CTA/card-carousel.tsx diff --git a/app/components/CTA/CommunityMarquee.jsx b/app/components/CTA/CommunityMarquee.jsx deleted file mode 100644 index d8c8894..0000000 --- a/app/components/CTA/CommunityMarquee.jsx +++ /dev/null @@ -1,91 +0,0 @@ -import { Container } from '~/components/ui/Container'; -import { FadeIn } from '~/components/ui/FadeIn'; - -export function MarqueeSection() { - let rotations = [ - 'rotate-2', - '-rotate-2', - 'rotate-2', - 'rotate-2', - '-rotate-2', - 'rotate-2', - '-rotate-2', - ]; - - return ( - <> - - -
- {imageArray.map((image, index) => ( -
-
- {image.alt} -
- ))} -
- - - - - ); -} - -const imageArray = [ - { - name: 'LLM', - href: 'https://res.cloudinary.com/jessebubble/image/upload/v1724200523/logo-llm_eplec3.svg', - alt: 'LLM Logo', - }, - { - name: 'A11Y', - href: 'https://res.cloudinary.com/jessebubble/image/upload/v1724200522/a11y_1_dktqom.svg', - alt: 'A11Y Logo', - }, - { - name: 'GDG San Antonio', - href: 'https://res.cloudinary.com/jessebubble/image/upload/v1724200522/gdg-sa-logo_nzbffh.svg', - alt: 'GDG San Antonio Logo', - }, - { - name: 'Alamo Python', - href: 'https://res.cloudinary.com/jessebubble/image/upload/v1724200522/devsa-ap-meetup_xj3y3p.svg', - alt: 'Alamo Python Logo', - }, - { - name: 'GGS', - href: 'https://res.cloudinary.com/jessebubble/image/upload/v1724200522/ggs_jtxwpv.svg', - alt: 'GGS Logo', - }, - { - name: 'Digital Canvas', - href: 'https://res.cloudinary.com/jessebubble/image/upload/v1724200525/digital-canvas-ymas_zcscwq.svg', - alt: 'Digital Canvas Logo', - }, - { - name: 'Science de los Datos', - href: 'https://res.cloudinary.com/jessebubble/image/upload/v1724200524/science-de-los-datos_-_dark_ryvkhi.svg', - alt: 'Science de los Datos Logo', - }, -]; diff --git a/app/components/CTA/Geekdom.tsx b/app/components/CTA/Geekdom.tsx index f79b9ae..3e69868 100644 --- a/app/components/CTA/Geekdom.tsx +++ b/app/components/CTA/Geekdom.tsx @@ -6,7 +6,7 @@ import { AnimatedIntro } from '../ui/AnimatedIntro'; export function Geekdom() { return ( -
+
diff --git a/app/components/CTA/card-carousel.tsx b/app/components/CTA/card-carousel.tsx deleted file mode 100644 index ad3e2c8..0000000 --- a/app/components/CTA/card-carousel.tsx +++ /dev/null @@ -1,413 +0,0 @@ -import React, { - useEffect, - useRef, - useState, - createContext, - useContext, -} from 'react'; -import { - ArrowLeftCircleIcon, - ArrowRightCircleIcon, - XCircleIcon, -} from '@heroicons/react/20/solid'; -import { AnimatePresence, motion } from 'motion/react'; -import { Container } from '~/components/ui/Container'; -import { FadeIn } from '~/components/ui/FadeIn'; -import clsx from 'clsx'; -import { SectionIntro } from '../ui/SectionIntro'; - -interface CarouselProps { - items: JSX.Element[]; - initialScroll?: number; -} - -type Card = { - src: string; - title: string; - category: string; - content: React.ReactNode; -}; - -export function CardCarousel() { - const cards = data.map((card, index) => ( - - )); - - return ( -
- -

- Stay up-to-date with the latest news, events, and updates from - the DEVSA community. Click on the cards below to learn more about - each announcement -

- - - - - - -
- ); -} - -const CarouselContext = createContext<{ - onCardClose: (index: number) => void; - currentIndex: number; -}>({ - onCardClose: () => {}, - currentIndex: 0, -}); - -const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => { - const carouselRef = React.useRef(null); - const [canScrollLeft, setCanScrollLeft] = React.useState(false); - const [canScrollRight, setCanScrollRight] = React.useState(true); - const [currentIndex, setCurrentIndex] = useState(0); - - useEffect(() => { - if (carouselRef.current) { - carouselRef.current.scrollLeft = initialScroll; - checkScrollability(); - } - }, [initialScroll]); - - const checkScrollability = () => { - if (carouselRef.current) { - const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current; - setCanScrollLeft(scrollLeft > 0); - setCanScrollRight(scrollLeft < scrollWidth - clientWidth); - } - }; - - const scrollLeft = () => { - if (carouselRef.current) { - carouselRef.current.scrollBy({ left: -300, behavior: 'smooth' }); - } - }; - - const scrollRight = () => { - if (carouselRef.current) { - carouselRef.current.scrollBy({ left: 300, behavior: 'smooth' }); - } - }; - - const handleCardClose = (index: number) => { - if (carouselRef.current) { - const cardWidth = isMobile() ? 230 : 384; // (md:w-96) - const gap = isMobile() ? 4 : 8; - const scrollPosition = (cardWidth + gap) * (index + 1); - carouselRef.current.scrollTo({ - left: scrollPosition, - behavior: 'smooth', - }); - setCurrentIndex(index); - } - }; - - const isMobile = () => { - return window && window.innerWidth < 768; - }; - - return ( - -
-
-
- -
- {items.map((item, index) => ( - - {item} - - ))} -
-
-
- - -
-
- - ); -}; - -const Card = ({ - card, - index, - layout = false, -}: { - card: Card; - index: number; - layout?: boolean; -}) => { - const [open, setOpen] = useState(false); - const containerRef = useRef(null); - const { onCardClose, currentIndex } = useContext(CarouselContext); - - useEffect(() => { - function onKeyDown(event: KeyboardEvent) { - if (event.key === 'Escape') { - handleClose(); - } - } - - if (open) { - document.body.style.overflow = 'hidden'; - } else { - document.body.style.overflow = 'auto'; - } - - window.addEventListener('keydown', onKeyDown); - return () => window.removeEventListener('keydown', onKeyDown); - }, [open]); - - useOutsideClick(containerRef, () => handleClose()); - - const handleOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - onCardClose(index); - }; - - return ( - <> - - {open && ( -
- - - - - {card.category} - - - {card.title} - -
{card.content}
- -
- )} - - -
-
- - {card.category} - - {/* - {card.title} - */} -
- {card.title} - - - ); -}; - -const useOutsideClick = ( - ref: React.RefObject, - callback: Function -) => { - useEffect(() => { - const listener = (event: any) => { - if (!ref.current || ref.current.contains(event.target)) { - return; - } - callback(event); - }; - - document.addEventListener('mousedown', listener); - document.addEventListener('touchstart', listener); - - return () => { - document.removeEventListener('mousedown', listener); - document.removeEventListener('touchstart', listener); - }; - }, [ref, callback]); -}; - -const data = [ - { - category: 'Co-Working Space is coming!', - title: 'DEVSA Co-Working Space is coming to Geekdom!', - src: 'https://res.cloudinary.com/jessebubble/image/upload/v1724271938/devsa-aug-13-geekdom_i3mjpe.png', - content: ( -
-

- This dedicated space on the 6th floor will be free to access for - the DEVSA community. We are aiming for this space to go live in - September 2024. More details to come as we get closer. -

- Poster announcing the Co-Working Space. DEVSA and Geekdom logos are present. -
- ), - }, - { - category: 'September Event Announced', - title: 'Say Goodbye to SQLite Mockups', - src: 'https://res.cloudinary.com/jessebubble/image/upload/v1724271938/devsa-aug-2-dotnet_d1oync.png', - content: ( -
-

- ​Join DEVSA and the San Antonio .NET User Group for an in-depth - exploration of integration testing with EF Core and - TestContainers. This interactive session will delve into the - challenges of traditional testing methods and introduce the - TestContainers library as a reliable alternative. -

- Poster announcing DEVSA's September event. DEVSA, Project Quest and dotnet logos are present. -
- ), - }, - { - category: 'First Event with UTSA announced', - title: 'Unleashing the Power of Unreal Engine', - src: 'https://res.cloudinary.com/jessebubble/image/upload/v1724271938/unreal-sept-4-square_g6v4uz.png', - content: ( -
-

- Join DEVSA and UTSA University College for an interactive talk - exploring the diverse applications of Unreal Engine, the world's - leading real-time creation tool. -

- Poster announcing the DEVSA's event with UTSA UC. DEVSA, Unreal Engine and UTSA logos are present. -
- ), - }, - { - category: 'Discord Updates | August 2024', - title: 'Community Spaces have been updated! and more...', - src: 'https://res.cloudinary.com/jessebubble/image/upload/v1724274946/unreal-sept-3_d4xzux.png', - content: ( -
-

- We've revamped our Discord to make it even more user-friendly and - informative. Check out these new features: - Community-Spaces Updated: - Discover news, updates, and events from active tech organizations - in San Antonio. - - Dedicated Partner Channels: - {' '} - Our community partners now have their own channels to directly - reach you with announcements and opportunities. - - Join us on Discord to connect with like-minded tech - enthusiasts and stay up-to-date on the latest happenings in - our community. - -

- Poster announcing new updates to the DEVSA discord server. DEVSA and Discord logos are present. -
- ), - }, -]; diff --git a/app/components/ui/AltButton.tsx b/app/components/ui/AltButton.tsx index 16c8e67..e5f84a5 100644 --- a/app/components/ui/AltButton.tsx +++ b/app/components/ui/AltButton.tsx @@ -26,9 +26,9 @@ const variants = { ), outline: clsx( 'inline-flex items-center justify-center px-4 py-[calc(theme(spacing.[1.5])-1px)]', - 'rounded-full border border-neutral-950 hover:border-neutral-900 shadow ring-1 ring-black/10', + 'rounded-full bg-centroYellow/90 hover:bg-centroYellow border border-neutral-950 hover:border-neutral-900 shadow ring-1 ring-black/10', 'whitespace-nowrap text-sm font-medium text-neutral-950 hover:text-neutral-900', - 'data-[disabled]:bg-transparent data-[hover]:bg-gray-50 data-[disabled]:opacity-40' + 'data-[disabled]:bg-centroYellow data-[hover]:bg-gray-50 data-[disabled]:opacity-40' ), }; diff --git a/app/components/ui/AnimatedIntro.tsx b/app/components/ui/AnimatedIntro.tsx index b462b4e..b267054 100644 --- a/app/components/ui/AnimatedIntro.tsx +++ b/app/components/ui/AnimatedIntro.tsx @@ -3,11 +3,12 @@ import { motion, useInView, useScroll, useTransform } from 'motion/react' interface SectionIntroProps { logo: React.ReactNode; + title: string; children: React.ReactNode; className?: string; } -export function AnimatedIntro({ logo, children, className = '' }: SectionIntroProps) { +export function AnimatedIntro({ logo, title, children, className = '' }: SectionIntroProps) { const containerRef = useRef(null) const isInView = useInView(containerRef, { once: true, margin: "-100px" }) const { scrollYProgress } = useScroll({ @@ -45,6 +46,18 @@ export function AnimatedIntro({ logo, children, className = '' }: SectionIntroPr > {logo} + + {/* Title */} + + {title} + {/* Content */}
- Nonprofit -

+ Nonprofit +

Your Support Matters
Tax-Deductible Donations

-

+

We're building a stronger ecosystem for the techies in San Antonio

Donate Today @@ -36,7 +36,7 @@ function CallToAction() { function SitemapHeading({ children }: { children: React.ReactNode }) { return ( -

{children}

+

{children}

); } @@ -49,7 +49,7 @@ function SitemapLink(props: React.ComponentPropsWithoutRef) {
    • ); @@ -98,7 +98,7 @@ function Sitemap() { function Copyright() { return ( -
    +
    © {new Date().getFullYear()} DEVSA
    ); @@ -106,7 +106,7 @@ function Copyright() { export function Footer() { return ( -
    +
    @@ -131,7 +131,7 @@ export function Footer() {
    - +
    diff --git a/app/components/ui/NavBar.tsx b/app/components/ui/NavBar.tsx index 7f9f012..daa6a89 100644 --- a/app/components/ui/NavBar.tsx +++ b/app/components/ui/NavBar.tsx @@ -65,7 +65,7 @@ export function NavBar({ 'size-4', invert ? 'fill-white group-hover:fill-neutral-200' - : 'fill-spursPink group-hover:fill-neutral-700' + : 'fill-neutral-950 group-hover:fill-neutral-700' )} /> diff --git a/app/components/ui/PlusGrid.tsx b/app/components/ui/PlusGrid.tsx index fb827ec..66cbdcc 100644 --- a/app/components/ui/PlusGrid.tsx +++ b/app/components/ui/PlusGrid.tsx @@ -28,10 +28,10 @@ export function PlusGridRow({ aria-hidden="true" className="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2" > -
    -
    -
    -
    +
    +
    +
    +
    {children}
    @@ -83,12 +83,12 @@ export function PlusGridIcon({ aria-hidden="true" className={clsx( className, - 'absolute size-[15px] fill-black/10', + 'absolute size-[15px] fill-white/10', yClass, xClass )} > - + ); } diff --git a/app/components/ui/RootLayout.tsx b/app/components/ui/RootLayout.tsx index cf57b61..f0ec4ea 100644 --- a/app/components/ui/RootLayout.tsx +++ b/app/components/ui/RootLayout.tsx @@ -1,6 +1,6 @@ import { useFetcher } from '@remix-run/react'; import { createContext, useEffect, useId, useRef, useState } from 'react'; -import { motion, MotionConfig, useReducedMotion } from 'framer-motion'; +import { motion, MotionConfig, useReducedMotion } from 'motion/react'; import { Footer } from './Footer'; import { NavBar } from './NavBar'; import { Navigation } from './Navigation'; diff --git a/app/components/ui/socialLinks.tsx b/app/components/ui/socialLinks.tsx index ff1ec86..72bcac5 100644 --- a/app/components/ui/socialLinks.tsx +++ b/app/components/ui/socialLinks.tsx @@ -64,7 +64,7 @@ export function SocialLinks({ invert = false }: { invert?: boolean }) { aria-label="Connect with us on Discord" className={clsx( "size-4", - invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75" + invert ? "text-neutral-50/75 data-[hover]:text-centroYellow/75" : "hidden" )} > @@ -74,7 +74,7 @@ export function SocialLinks({ invert = false }: { invert?: boolean }) { aria-label="Build with us on GitHub" className={clsx( "size-4", - invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75" + invert ? "text-neutral-50/75 data-[hover]:text-centroYellow/75" : "hidden" )} > @@ -85,7 +85,7 @@ export function SocialLinks({ invert = false }: { invert?: boolean }) { aria-label="Follow us on Instagram" className={clsx( "size-4", - invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75" + invert ? "text-neutral-50/75 data-[hover]:text-centroYellow/75" : "hidden" )} > @@ -95,7 +95,7 @@ export function SocialLinks({ invert = false }: { invert?: boolean }) { aria-label="Follow us on X" className={clsx( "size-4", - invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75" + invert ? "text-neutral-50/75 data-[hover]:text-centroYellow/75" : "hidden" )} > @@ -105,7 +105,7 @@ export function SocialLinks({ invert = false }: { invert?: boolean }) { aria-label="Hit that subscribe button on YouTube" className={clsx( "size-4", - invert ? "text-centroYellow data-[hover]:text-centroYellow/75" : "text-neutral-950 data-[hover]:text-neutral-950/75" + invert ? "text-neutral-50/75 data-[hover]:text-centroYellow/75" : "hidden" )} > diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index 6676b3c..f40fb29 100644 --- a/app/routes/_index.tsx +++ b/app/routes/_index.tsx @@ -42,11 +42,11 @@ export default function Index() { <> + - ); } \ No newline at end of file diff --git a/app/routes/coworking-space/route.tsx b/app/routes/coworking-space/route.tsx index cf55364..1bc818e 100644 --- a/app/routes/coworking-space/route.tsx +++ b/app/routes/coworking-space/route.tsx @@ -67,8 +67,8 @@ export default function Index() {
    DEVSA Coworking Space logo
    diff --git a/package-lock.json b/package-lock.json index da45fb5..0f7bff8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "motion": "^11.15.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-intersection-observer": "^9.14.1", "react-use-measure": "^2.1.1", "tiny-invariant": "^1.3.3" }, @@ -10151,6 +10152,21 @@ "react": "^18.3.1" } }, + "node_modules/react-intersection-observer": { + "version": "9.14.1", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.14.1.tgz", + "integrity": "sha512-k1xIUn3sCQi3ugNeF64FJb3zwve5mcetvAUR9JazXeOmtap4IP2evN8rs+yf6SQ7F1QydsOGiqTmt+lySKZ9uA==", + "license": "MIT", + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index a5e2cbb..f891421 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "motion": "^11.15.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-intersection-observer": "^9.14.1", "react-use-measure": "^2.1.1", "tiny-invariant": "^1.3.3" },