-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
some mobile updates, new marquee component added
- Loading branch information
1 parent
02e8d0f
commit 7e42446
Showing
10 changed files
with
217 additions
and
147 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { motion } from "motion/react" | ||
| import { Marquee } from "./marquee" | ||
|
|
||
| const partners = [ | ||
| { name: "UTSA UC", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/uc-utsa.svg" }, | ||
| { name: "Project Quest", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/project-quest-logo.svg" }, | ||
| { name: "Geekdom", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/geekdom_logo_full.svg" }, | ||
| { name: "Digital Canvas", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/digital-canvas-ymas.svg" }, | ||
| { name: "434 MEDIA", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/434media.svg" }, | ||
| { name: "GDG SA", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/gdg-sa.svg" }, | ||
| { name: "Tech Bloc", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/TB+Full+Logo.png" }, | ||
| { name: "Alamo Python", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/alamo-py.svg" }, | ||
| { name: "A11Y", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/a11y+(1).svg" }, | ||
| { name: "React", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/devsa-star.svg" }, | ||
| { name: "GGS", img: "https://devsa-assets.s3.us-east-2.amazonaws.com/ggs.svg" }, | ||
| ] | ||
|
|
||
| const PartnerImage = ({ img, name }: { img: string; name: string }) => ( | ||
| <motion.div whileHover={{ scale: 1.05 }} className="relative w-40 h-40 overflow-hidden m-4"> | ||
| <img src={img || "/placeholder.svg"} alt={name} className="w-full h-full object-contain" /> | ||
| </motion.div> | ||
| ) | ||
|
|
||
| export function DEVSAHero() { | ||
| return ( | ||
| <div className="relative w-full h-[600px] overflow-hidden bg-neutral-950 mt-16 mb-32"> | ||
| <motion.div | ||
| className="absolute inset-0 flex items-center justify-center z-10" | ||
| initial={{ opacity: 0, scale: 0.5 }} | ||
| animate={{ opacity: 1, scale: 1 }} | ||
| transition={{ duration: 0.5 }} | ||
| > | ||
| <img | ||
| src="https://devsa-assets.s3.us-east-2.amazonaws.com/devsa-community.svg" | ||
| alt="DEVSA Logo" | ||
| className="w-64 h-64 md:w-96 md:h-96" | ||
| /> | ||
| </motion.div> | ||
| <div className="absolute inset-0 flex flex-col justify-center"> | ||
| <Marquee pauseOnHover className="[--duration:40s] blur-sm"> | ||
| {partners.map((partner) => ( | ||
| <PartnerImage key={partner.name} {...partner} /> | ||
| ))} | ||
| </Marquee> | ||
| <Marquee reverse pauseOnHover className="[--duration:40s] blur-sm"> | ||
| {partners.map((partner) => ( | ||
| <PartnerImage key={partner.name} {...partner} /> | ||
| ))} | ||
| </Marquee> | ||
| </div> | ||
| <div className="absolute inset-0 bg-gradient-to-r from-gray-900 via-transparent to-gray-900" /> | ||
| <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-gray-900 to-transparent" /> | ||
| <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-gray-900 to-transparent" /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import type { ComponentPropsWithoutRef } from "react" | ||
| import clsx from "clsx" | ||
|
|
||
| interface MarqueeProps extends ComponentPropsWithoutRef<"div"> { | ||
| className?: string | ||
| reverse?: boolean | ||
| pauseOnHover?: boolean | ||
| children: React.ReactNode | ||
| vertical?: boolean | ||
| repeat?: number | ||
| } | ||
|
|
||
| export function Marquee({ | ||
| className, | ||
| reverse = false, | ||
| pauseOnHover = false, | ||
| children, | ||
| vertical = false, | ||
| repeat = 2, | ||
| ...props | ||
| }: MarqueeProps) { | ||
| return ( | ||
| <div | ||
| {...props} | ||
| className={clsx( | ||
| "group flex overflow-hidden [--duration:40s]", | ||
| { | ||
| "flex-row": !vertical, | ||
| "flex-col": vertical, | ||
| }, | ||
| className, | ||
| )} | ||
| > | ||
| {Array(repeat) | ||
| .fill(0) | ||
| .map((_, i) => ( | ||
| <div | ||
| key={i} | ||
| className={clsx("flex shrink-0 justify-around", { | ||
| "animate-marquee flex-row": !vertical, | ||
| "animate-marquee-vertical flex-col": vertical, | ||
| "group-hover:[animation-play-state:paused]": pauseOnHover, | ||
| "[animation-direction:reverse]": reverse, | ||
| })} | ||
| > | ||
| {children} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,42 @@ | ||
| import { MetaFunction } from '@remix-run/node'; | ||
| import { Board, VisionGrid } from './board'; | ||
| import { Board } from './board'; | ||
| import { DEVSAHero } from '~/components/ui/devsa-hero'; | ||
|
|
||
| export const meta: MetaFunction = () => { | ||
| return [ | ||
| { | ||
| title: 'DEVSA | Focused on Learning, Networking, and Community', | ||
| }, | ||
| { | ||
| property: 'og:url', | ||
| content: 'https://devsanantonio.com/mission', | ||
| }, | ||
| { | ||
| property: 'og:type', | ||
| content: 'website', | ||
| }, | ||
| { | ||
| property: 'og:title', | ||
| content: 'Your Support Matters | Make a Tax-Deductible Donation', | ||
| }, | ||
| { | ||
| name: 'description', | ||
| content: | ||
| "We're building a stronger ecosystem for the techies in San Antonio", | ||
| }, | ||
| { | ||
| property: 'og:image', | ||
| content: | ||
| 'https://devsa-assets.s3.us-east-2.amazonaws.com/flyers-8-ogmeta.png', | ||
| }, | ||
| ]; | ||
| return [ | ||
| { | ||
| title: 'DEVSA | Focused on Learning, Networking, and Community', | ||
| }, | ||
| { | ||
| property: 'og:url', | ||
| content: 'https://devsanantonio.com/mission', | ||
| }, | ||
| { | ||
| property: 'og:type', | ||
| content: 'website', | ||
| }, | ||
| { | ||
| property: 'og:title', | ||
| content: 'Your Support Matters | Make a Tax-Deductible Donation', | ||
| }, | ||
| { | ||
| name: 'description', | ||
| content: | ||
| "We're building a stronger ecosystem for the techies in San Antonio", | ||
| }, | ||
| { | ||
| property: 'og:image', | ||
| content: | ||
| 'https://devsa-assets.s3.us-east-2.amazonaws.com/flyers-8-ogmeta.png', | ||
| }, | ||
| ]; | ||
| }; | ||
|
|
||
| export default function Index() { | ||
| return ( | ||
| <> | ||
| <VisionGrid /> | ||
| <Board /> | ||
| </> | ||
| ); | ||
| return ( | ||
| <> | ||
| <Board /> | ||
| <DEVSAHero /> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.