:lightning: performance and UX optimizations

app/components/footer.tsx

@@ -6,35 +6,46 @@ export function Footer() {
     {
       id: 'instagram',
       icon: <Instagram className="h-6 w-6" />,
-      url: 'https://www.instagram.com',
+      url: 'https://www.instagram.com/hack_ucf/',
       label: 'Instagram',
     },
     {
       id: 'twitter',
       icon: <Twitter className="h-6 w-6" />,
-      url: 'https://www.twitter.com',
+      url: 'https://x.com/HackUCF',
       label: 'Twitter',
     },
     {
       id: 'github',
       icon: <Github className="h-6 w-6" />,
-      url: 'https://www.github.com',
+      url: 'https://github.com/HackUCF',
       label: 'GitHub',
     },
     {
       id: 'linkedin',
       icon: <Linkedin className="h-6 w-6" />,
-      url: 'https://www.linkedin.com',
+      url: 'https://www.linkedin.com/company/collegiate-cyber-defense-club-at-ucf',
       label: 'LinkedIn',
     },
   ];
 
   const ACTION_LINKS = [
-    { id: 'join-the-fun', text: 'Join the Fun', url: '#' },
-    { id: 'hop-on-discord', text: 'Hop on Discord', url: '#' },
-    { id: 'view-the-calendar', text: 'View the Calendar', url: '#' },
-    { id: 'present-at-meeting', text: 'Present at a Meeting', url: '#' },
-    { id: 'join-mailing-list', text: 'Join the Mailing List', url: '#' },
+    {
+      id: 'join-the-fun',
+      text: 'Join the Fun',
+      url: 'https://join.hackucf.org',
+    },
+    {
+      id: 'hop-on-discord',
+      text: 'Hop on Discord',
+      url: 'https://discord.com/invite/VwkkDcJ',
+    },
+    { id: 'view-the-calendar', text: 'View the Calendar', url: '/calendar' },
+    {
+      id: 'present-at-meeting',
+      text: 'Present at a Meeting',
+      url: '/contact-us',
+    },
   ];
 
   return (

app/components/header.tsx

@@ -119,13 +119,14 @@ export function Header() {
                   className="w-full text-left text-sm text-white hover:text-background hover:bg-white transition-colors px-3 py-2 rounded-md"
                 >
                   {item.href.startsWith('http') ? (
-                    <a
-                      href={item.href}
+                    <Link
+                      to={item.href}
                       target="_blank"
                       rel="noopener noreferrer"
+                      prefetch="intent"
                     >
                       {item.name}
-                    </a>
+                    </Link>
                   ) : (
                     <Link to={item.href} prefetch="intent">
                       {item.name}
@@ -135,10 +136,18 @@ export function Header() {
               ))}
               <Button
                 variant="outline"
+                asChild
                 className="bg-background border-brandGold text-brandGold hover:bg-brandGold hover:text-background text-sm transition-colors w-full"
                 onClick={() => setIsOpen(false)}
               >
-                Join Our Discord
+                <Link
+                  rel="noopener norefferer"
+                  prefetch="intent"
+                  target="_blank"
+                  to="https://discord.com/invite/VwkkDcJ"
+                >
+                  Join Our Discord
+                </Link>
               </Button>
             </div>
           </SheetContent>

app/lib/cardData.ts

@@ -6,11 +6,12 @@ export const INDEX_CARD_DATA = [
       'We hold meetings during the fall and spring semesters. Topics range from current events to security software tools and even hardware. Often special guests from various businesses and organizations will present on advanced special topics like reverse engineering and exploitation.',
     buttonText: 'View Our Calendar',
     imageUrls: [
-      'meetings0.png',
-      'meetings1.png',
-      'meetings2.png',
-      'meetings3.png',
+      'meetings0.webp',
+      'meetings1.webp',
+      'meetings2.webp',
+      'meetings3.webp',
     ],
+    link: '/calendar',
   },
   {
     id: 'cyber-teams',
@@ -19,11 +20,12 @@ export const INDEX_CARD_DATA = [
       "One component of the club involves applying defensive security strategies in order to rigorously protect computers from being compromised. Our competition teams are dedicated to learning the 'ins and outs' of administering and hardening systems to defend against some of today's leading threats.",
     buttonText: 'About CCDC',
     imageUrls: [
-      'cyber-teams0.png',
-      'cyber-teams1.png',
-      'cyber-teams2.png',
-      'cyber-teams3.png',
+      'cyber-teams0.webp',
+      'cyber-teams1.webp',
+      'cyber-teams2.webp',
+      'cyber-teams3.webp',
     ],
+    link: '/ccdc',
   },
   {
     id: 'cyber-games',
@@ -32,11 +34,12 @@ export const INDEX_CARD_DATA = [
       'A second component of the club involves learning how attackers leverage exploits and gain control of systems. At our CTF competitions, students have the opportunity to research, explore, and exploit vulnerabilities. Through collaborating on thought-provoking games and challenges, club members are able to learn the skills necessary to becoming a security professional.',
     buttonText: 'About CTFs',
     imageUrls: [
-      'cyber-games0.png',
-      'cyber-games1.png',
-      'cyber-games2.png',
-      'cyber-games3.png',
+      'cyber-games0.webp',
+      'cyber-games1.webp',
+      'cyber-games2.webp',
+      'cyber-games3.webp',
     ],
+    link: '/ctf',
   },
   {
     id: 'membership',
@@ -45,10 +48,11 @@ export const INDEX_CARD_DATA = [
       "If you like breaking stuff, problem solving, hacker-talk, or even just expressing your true 1337ness, then you definitely want to get involved. It is so neat to be around people with the same interests. It is at our meetings, competitions, and special events that we encourage you to unleash your inner nerd. Joining is a breeze. Don't skip out.",
     buttonText: 'Join Now',
     imageUrls: [
-      'membership0.png',
-      'membership1.png',
-      'membership2.png',
-      'membership3.png',
+      'membership0.webp',
+      'membership1.webp',
+      'membership2.webp',
+      'membership3.webp',
     ],
+    link: 'https://join.hackucf.org/',
   },
 ];

app/routes/_index.tsx

@@ -45,15 +45,19 @@ export default function Index() {
       <section className="min-h-screen w-full flex items-center justify-center px-8 bg-black relative">
         <HackerBg className="absolute inset-0 w-full h-full" />
         <div className="max-w-4xl text-center z-10 mt-16">
+          <h1 className="text-5xl font-bold bg-white text-transparent bg-clip-text drop-shadow-md py-1 animate-fade-in-up">
+            HACK@UCF
+          </h1>
           <h1 className="text-5xl font-bold mb-4 bg-white text-transparent bg-clip-text drop-shadow-md py-1 animate-fade-in-up">
-            Collegiate Cyber Defense Club at UCF
+            Collegiate Cyber Defense Club
           </h1>
           <p className="text-2xl mb-8 text-white font-semibold drop-shadow-md animate-fade-in-up animation-delay-300">
             We are the University of Central Florida's only defensive and
             offensive cybersecurity student organization.
           </p>
           <Link
             to="/about-us"
+            prefetch="intent"
             className="transition-colors border-2 bg-background hover:bg-brandGold text-lg hover:text-background border-brandGold text-brandGold rounded-full py-2 px-4 inline-block animate-fade-in-up animation-delay-500"
             aria-label="Learn more about Collegiate Cyber Defense Club"
           >
@@ -94,8 +98,13 @@ export default function Index() {
                 </CardDescription>
               </CardContent>
               <CardFooter className="py-2 sm:py-3">
-                <Button className="w-full bg-brandGold hover:bg-brandGoldHover text-background text-xs sm:text-sm">
-                  {card.buttonText}
+                <Button
+                  asChild
+                  className="w-full bg-brandGold hover:bg-brandGoldHover text-background text-xs sm:text-sm"
+                >
+                  <Link to={card.link} prefetch="intent" className="">
+                    {card.buttonText}
+                  </Link>
                 </Button>
               </CardFooter>
             </Card>

app/routes/about-us.tsx

@@ -192,7 +192,7 @@ export default function AboutUs() {
           <h2 className="text-3xl font-semibold mb-4 text-brandGold">
             Our Allies
           </h2>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
             {PARTNER_LINKS.map(ally => (
               <a
                 key={ally.id}

app/routes/calendar.tsx

@@ -1,7 +1,7 @@
 export default function Calendar() {
   return (
-    <main className="bg-background text-white min-h-screen mt-20 px-8">
-      <div className="container mx-auto max-w-6xl py-16">
+    <main className="bg-background text-white min-h-screen mt-20">
+      <div className="container py-16">
         <h1 className="text-5xl font-bold mb-16 text-center pb-2">Calendar</h1>
         <iframe
           src="https://calendar.google.com/calendar/embed?src=calendar%40hackucf.org&amp;ctz=America%2FNew_York"

app/routes/ccdc.tsx

@@ -10,8 +10,7 @@ export default function CollegiateCyberDefenseCompetition() {
           </h1>
           <Link
             to="/about-us"
-            className="absolute px-4 top-16 left-4 text-center text-brandGold border-brandGold
-          border-2 py-2 rounded-full bg-background hover:bg-brandGold hover:text-background transition-colors my-8"
+            className="text-center border-2 bg-background hover:bg-brandGold text-lg hover:text-background border-brandGold text-brandGold rounded-full w-screen max-w-6xl mt-16 py-1"
           >
             Back to About Us
           </Link>

app/routes/competitions.tsx

@@ -49,8 +49,7 @@ export default function Competitions() {
           <h1 className="text-5xl font-bold">Competitions</h1>
           <Link
             to="/about-us"
-            className="absolute px-4 top-16 left-4 text-center text-brandGold border-brandGold
-          border-2 py-2 rounded-full bg-background hover:bg-brandGold hover:text-background transition-colors my-8"
+            className="text-center border-2 bg-background hover:bg-brandGold text-lg hover:text-background border-brandGold text-brandGold rounded-full w-screen max-w-6xl mt-16 py-1"
           >
             Back to About Us
           </Link>

app/routes/constitution.tsx

@@ -18,8 +18,7 @@ export default function Constitution() {
           </h1>
           <Link
             to="/about-us"
-            className="absolute px-4 top-16 left-4 text-center text-brandGold border-brandGold
-          border-2 py-2 rounded-full bg-background hover:bg-brandGold hover:text-background transition-colors my-8"
+            className="text-center border-2 bg-background hover:bg-brandGold text-lg hover:text-background border-brandGold text-brandGold rounded-full w-screen max-w-6xl mt-16 py-1"
           >
             Back to About Us
           </Link>

app/routes/ctf.tsx

@@ -8,8 +8,7 @@ export default function CaptureTheFlag() {
           <h1 className="text-5xl font-bold">Capture the Flag</h1>
           <Link
             to="/about-us"
-            className="absolute px-4 top-16 left-4 text-center text-brandGold border-brandGold
-          border-2 py-2 rounded-full bg-background hover:bg-brandGold hover:text-background transition-colors my-8"
+            className="text-center border-2 bg-background hover:bg-brandGold text-lg hover:text-background border-brandGold text-brandGold rounded-full w-screen max-w-6xl mt-16 py-1"
           >
             Back to About Us
           </Link>

app/routes/faq.tsx

@@ -16,8 +16,7 @@ export default function FAQ() {
           <h1 className="text-5xl font-bold">Frequently Asked Questions</h1>
           <Link
             to="/about-us"
-            className="absolute px-4 top-16 left-4 text-center text-brandGold border-brandGold
-          border-2 py-2 rounded-full bg-background hover:bg-brandGold hover:text-background transition-colors my-8"
+            className="text-center border-2 bg-background hover:bg-brandGold text-lg hover:text-background border-brandGold text-brandGold rounded-full w-screen max-w-6xl mt-16 py-1"
           >
             Back to About Us
           </Link>

package.json

@@ -12,16 +12,16 @@
 		"typecheck": "tsc"
 	},
 	"dependencies": {
-		"@radix-ui/react-accordion": "^1.2.0",
-		"@radix-ui/react-dialog": "^1.1.1",
-		"@radix-ui/react-dropdown-menu": "^2.0.6",
+		"@radix-ui/react-accordion": "^1.2.1",
+		"@radix-ui/react-dialog": "^1.1.2",
+		"@radix-ui/react-dropdown-menu": "^2.1.2",
 		"@radix-ui/react-icons": "1.3.0",
 		"@radix-ui/react-slot": "1.0.2",
-		"@remix-run/cloudflare": "^2.12.0",
-		"@remix-run/cloudflare-pages": "^2.12.0",
-		"@remix-run/express": "^2.12.0",
-		"@remix-run/react": "^2.12.0",
-		"@remix-run/serve": "^2.12.0",
+		"@remix-run/cloudflare": "^2.13.1",
+		"@remix-run/cloudflare-pages": "^2.13.1",
+		"@remix-run/express": "^2.13.1",
+		"@remix-run/react": "^2.13.1",
+		"@remix-run/serve": "^2.13.1",
 		"@unpic/react": "^0.1.14",
 		"class-variance-authority": "0.7.0",
 		"clsx": "2.1.0",
@@ -35,7 +35,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.5.3",
-		"@remix-run/dev": "^2.12.0",
+		"@remix-run/dev": "^2.13.1",
 		"@tailwindcss/typography": "0.5.10",
 		"@types/node": "20.11.19",
 		"@types/react": "18.2.56",
@@ -45,7 +45,7 @@
 		"postcss": "8.4.35",
 		"tailwindcss": "3.4.1",
 		"typescript": "5.3.3",
-		"vite": "^5.4.7",
+		"vite": "^5.4.10",
 		"vite-env-only": "2.2.0",
 		"vite-tsconfig-paths": "4.3.1",
 		"wrangler": "3.28.4"