Skip to content

Commit

Permalink
🔧 refactors to _index
Browse files Browse the repository at this point in the history
  • Loading branch information
parchinski committed Oct 15, 2024
1 parent 7057b3b commit d4ee0f5
Show file tree
Hide file tree
Showing 6 changed files with 1,023 additions and 1,861 deletions.
8 changes: 4 additions & 4 deletions app/components/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@ export function Footer() {

return (
<footer
className="bg-background text-white py-16 px-4 sm:px-6 lg:px-8 snap-end h-screen"
className="bg-background text-white px-4 sm:px-6 lg:px-8 mb-16"
id="connect"
>
<div className="max-w-7xl mx-auto mt-40 flex-col items-center justify-center h-full">
<div className="max-w-7xl mx-auto flex-col items-center justify-center h-full">
<div className="mb-12">
<h2 className="text-3xl font-bold text-center mb-6 text-brandGold">
<h2 className="text-4xl font-bold text-center mb-6 text-white">
Stay Connected
</h2>
<p className="text-center max-w-2xl mx-auto mb-8">
<p className="text-center max-w-2xl mx-auto mb-8 text-white">
You can follow us on social media to stay tuned for job and
internship opportunities, or get updated when we hold a meeting.
Don't forget to join our Discord!
Expand Down
4 changes: 2 additions & 2 deletions app/components/image-carousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export default function ImageCarousel({ imagePaths, alt }: ImageCarouselProps) {
src={`/${image}`}
alt={`${alt} ${index + 1}`}
layout="constrained"
width={1600}
height={900}
width={1112}
height={834}
className="w-full h-auto"
priority={index === 0}
loading={index === 0 ? 'eager' : 'lazy'}
Expand Down
7 changes: 4 additions & 3 deletions app/components/ui/grid-bg.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
'use client';
import type { HTMLProps } from 'react';

interface BackgroundGridProps {
Expand All @@ -18,7 +19,7 @@ const BackgroundGrid = ({
}: Partial<BackgroundGridProps> & HTMLProps<HTMLDivElement>) => {
const svg = `
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' stroke='${color}' stroke-width='${strokeWidth}' fill-opacity='0.4' >
<path d='M 100 200 L 100 0'/>
<path d='M 100 0 L 100 200'/>
<path d='M 0 100 L 200 100'/>
</svg>
`;
Expand All @@ -32,10 +33,10 @@ const BackgroundGrid = ({
backgroundRepeat: 'repeat',
backgroundSize: cellSize,
maskImage: fade
? 'radial-gradient(ellipse at bottom, white, transparent 70%)'
? 'radial-gradient(ellipse at top, white, transparent 70%)'
: undefined,
WebkitMaskImage: fade
? 'radial-gradient(ellipse at bottom, white, transparent 70%)'
? 'radial-gradient(ellipse at top, white, transparent 70%)'
: undefined,
}}
{...props}
Expand Down
64 changes: 44 additions & 20 deletions app/routes/_index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Link } from '@remix-run/react';
import { ChevronDown } from 'lucide-react';
import { useRef } from 'react';

import { Button } from '@/components/ui/button';
import {
Expand All @@ -14,63 +16,85 @@ import BackgroundGrid from '@/components/ui/grid-bg';
import ImageCarousel from '@/components/image-carousel';
import { INDEX_CARD_DATA } from '@/lib/cardData';

function ScrollArrow({ onClick }: { onClick: () => void }) {
return (
<button
onClick={onClick}
type="button"
className="absolute bottom-8 left-3/6 transform -translate-x-1/2 animate-bounce transition-colors duration-600 ease-in-out hover:text-brandGoldHover focus:outline-none focus:ring-2 focus:ring-brandGold focus:ring-opacity-50 rounded-full p-2"
aria-label="Scroll to next section"
>
<ChevronDown className="w-12 h-12 text-brandGold opacity-70" />
</button>
);
}

export default function Index() {
const clubActivitiesRef = useRef<HTMLElement>(null);

const scrollToNextSection = () => {
clubActivitiesRef.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
};

return (
<div className="h-screen w-full overflow-y-auto snap-y snap-mandatory">
<div className="w-full overflow-y-auto scroll-smooth">
{/* Home Section */}
<section
className="h-screen w-full flex items-center justify-center p-8 bg-black relative snap-start"
id="home"
>
<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 mb-4 bg-white text-transparent bg-clip-text drop-shadow-md py-1">
<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
</h1>
<p className="text-2xl mb-8 text-white font-semibold drop-shadow-md">
<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"
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"
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"
>
🌐 Learn More 🌐
</Link>
</div>
<ScrollArrow onClick={scrollToNextSection} />
</section>

{/* Meetings and Membership Section */}
<section
className="h-screen w-full flex flex-col justify-center bg-background px-4 py-8 snap-start relative"
id="meetings"
ref={clubActivitiesRef}
className="min-h-screen w-full flex flex-col justify-center bg-background px-4 sm:px-8 pt-16 relative overflow-hidden"
aria-label="Club Activities section"
>
<BackgroundGrid className="absolute inset-0 w-full h-full" />
<h2 className="text-3xl font-bold text-center mb-10 md:mb-12 text-brandGold relative z-10">
<h2 className="text-3xl sm:text-4xl font-bold text-center mb-16 md:mb-8 text-white relative z-10">
Club Activities
</h2>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-fr relative z-10">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 relative z-10 overflow-y-auto">
{INDEX_CARD_DATA.map(card => (
<Card
key={card.id}
className="bg-background border-brandGold flex flex-col border-2 pb-3"
className="bg-background border-brandGold flex flex-col border-2 pb-3 h-auto"
>
<CardHeader className="py-4">
<CardTitle className="text-brandGold text-lg font-bold">
<CardHeader className="py-3 sm:py-4">
<CardTitle className="text-brandGold sm:text-lg md:text-xl font-bold">
{card.title}
</CardTitle>
</CardHeader>
<CardContent className="flex-grow flex flex-col pb-4 space-y-4">
<ImageCarousel imagePaths={card.imageUrls} alt={card.title} />
<CardDescription className="text-white text-sm">
<CardContent className="flex-grow flex flex-col pb-3 sm:pb-4 space-y-3 sm:space-y-4">
<div className="overflow-hidden">
<ImageCarousel imagePaths={card.imageUrls} alt={card.title} />
</div>
<CardDescription className="text-white text-xs sm:text-sm">
{card.description}
</CardDescription>
</CardContent>
<CardFooter className="py-3">
<Button className="w-full bg-brandGold hover:bg-brandGoldHover text-background text-sm">
<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>
</CardFooter>
Expand Down
Loading

0 comments on commit d4ee0f5

Please sign in to comment.