+
{divisionCards.slice(0, 6)}
-
+
{divisionCards.slice(6)}
diff --git a/src/components/About/Timeline.tsx b/src/components/About/Timeline.tsx
new file mode 100644
index 0000000..a972418
--- /dev/null
+++ b/src/components/About/Timeline.tsx
@@ -0,0 +1,31 @@
+import { timeline } from '../../../config/timeline.config';
+import TimelineItemComponent from './TimelineItem';
+
+export default function Timeline() {
+ return (
+
+
+
+ Our Journey
+
+
+ Fun fact: ACM UTD is the 77th student chapter of ACM founded. ACM's history is a
+ little long, but what do you expect with the largest CS organization at UTD?
+
+
+
+
+
+
+
+ {timeline.map((item, index) => (
+
+
+
+ );
+}
diff --git a/src/components/About/TimelineItem.tsx b/src/components/About/TimelineItem.tsx
new file mode 100644
index 0000000..9073190
--- /dev/null
+++ b/src/components/About/TimelineItem.tsx
@@ -0,0 +1,107 @@
+import { TimelineItem, timeline } from '../../../config/timeline.config';
+import { Calendar } from 'lucide-react';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+
+export default function TimelineItemComponent({
+ item,
+ index,
+}: {
+ item: TimelineItem;
+ index: number;
+}) {
+ const isEven = index % 2 === 0;
+ const isLast = index === timeline.length - 1;
+
+ return (
+
+
+ {isLast && (
+ <>
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ {item.title}
+
+
+
+
+
+
+
+
+ {item.description}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Home/Navbar.tsx b/src/components/Home/Navbar.tsx
index 90eaee9..4017ca6 100644
--- a/src/components/Home/Navbar.tsx
+++ b/src/components/Home/Navbar.tsx
@@ -7,35 +7,69 @@ import Link from 'next/link';
import { useState, useEffect } from 'react';
import {
- HoverCard,
- HoverCardContent,
- HoverCardTrigger,
-} from "@/components/ui/hover-card";
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu';
+import { cn } from '@/lib/utils';
-const navigation = [
- { name: 'about', href: '/about', current: true },
- { name: 'officers', href: '/officers', current: false },
- { name: 'apply', href: '/apply', current: false },
- { name: 'events', href: '/events', current: false },
- { name: 'sponsors', href: '/sponsors', current: false },
- { name: 'connect', href: '/connect', current: false },
-];
+type NavigationItem = {
+ name: string;
+ href: string;
+ submenu?: SubmenuItem[];
+};
+
+type SubmenuItem = {
+ name: string;
+ href: string;
+ submenu?: DivisionItem[];
+};
+
+type DivisionItem = {
+ name: string;
+ href: string;
+};
-const divisions = [
- { name: 'Media', href: '/media' },
- { name: 'Research', href: '/research' },
- { name: 'Development', href: '/development' },
- { name: 'Projects', href: '/projects' },
- { name: 'Education - TIP', href: '/education/tip' },
- { name: 'Education - Mentor', href: '/education/mentor' },
- { name: 'Community', href: '/community' },
- { name: 'HackUTD', href: '/hackutd' },
- { name: 'Industry', href: '/industry' },
+const navigation: NavigationItem[] = [
+ {
+ name: 'about',
+ href: '/about',
+ submenu: [
+ { name: 'About Us', href: '/about' },
+ {
+ name: 'Divisions',
+ href: '/about#divisions',
+ submenu: [
+ { name: 'Media', href: '/media' },
+ { name: 'Research', href: '/research' },
+ { name: 'Development', href: '/development' },
+ { name: 'Projects', href: '/projects' },
+ { name: 'Education - TIP', href: '/education/tip' },
+ { name: 'Education - Mentor', href: '/education/mentor' },
+ { name: 'Community', href: '/community' },
+ { name: 'HackUTD', href: '/hackutd' },
+ { name: 'Industry', href: '/industry' },
+ ],
+ },
+ { name: 'Our Journey', href: '/about#our-journey' },
+ ],
+ },
+ { name: 'officers', href: '/officers' },
+ { name: 'apply', href: '/apply' },
+ { name: 'events', href: '/events' },
+ { name: 'sponsors', href: '/sponsors' },
+ { name: 'connect', href: '/connect' },
];
export default function Navbar() {
const [top, setTop] = useState(true);
useEffect(() => {
+ if (typeof window === 'undefined') return;
+
const handleScroll = () => {
setTop(window.scrollY === 0);
};
@@ -47,80 +81,185 @@ export default function Navbar() {
};
}, []);
- const navStyles = top ? 'md:bg-opacity-0 md:bg-none bg-black/70' : 'bg-black bg-opacity-70 backdrop-blur-xl';
+ const navStyles = top
+ ? 'md:bg-opacity-0 md:bg-none bg-black/70 md:shadow-none shadow-lg md:backdrop-blur-none backdrop-blur-sm'
+ : 'bg-black/80 backdrop-blur-xl border-b border-primary/10 shadow-2xl shadow-black/20 backdrop-saturate-150';
+
return (
{({ open }) => (
<>
-
+
- {/* Mobile menu button*/}
-
+
Open main menu
{open ? (
-
-
-
+
+
+
-
-
- {navigation.map((item) => (
-
-
-
- {item.name === 'about' && (
-
-
- {divisions.map((division) => (
-
- {division.name}
+
+
+
+ {navigation.map((item) => (
+
+ {item.submenu ? (
+ <>
+
+
-
- )}
-
- ))}
-
+
+ {item.submenu.map((submenuItem) => (
+
+ {submenuItem.submenu ? (
+
+
+ {submenuItem.name}
+
+
+ {submenuItem.submenu.map((division) => (
+
+ {division.name}
+
+
+ ))}
+
+
+ ) : (
+
+ {submenuItem.name}
+
+
+ )}
+
+ ))}
+
+
+ ) : (
+ {item.name}
+
+ )}
+
+ ))}
+
+
-
-
+
+
{navigation.map((item) => (
-
- {item.name}
-
- ))}
+
+ {item.submenu ? (
+ <>
+
+ {item.name}
+
+
+ {item.submenu.map((submenuItem) => (
+
+ {submenuItem.submenu ? (
+ <>
+
+ {submenuItem.name}
+
+
+ {submenuItem.submenu.map((division) => (
+
+ {division.name}
+
+ ))}
+
+
+ ) : (
+
+ {submenuItem.name}
+
+ )}
+
+ ))}
+
+
+ ) : (
+
+ {item.name}
+
+ )}
+
+ ))}
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..151f777
--- /dev/null
+++ b/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const NavigationMenu = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}{' '}
+
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+ navigationMenuTriggerStyle,
+ NavigationMenu,
+ NavigationMenuList,
+ NavigationMenuItem,
+ NavigationMenuContent,
+ NavigationMenuTrigger,
+ NavigationMenuLink,
+ NavigationMenuIndicator,
+ NavigationMenuViewport,
+};