diff --git a/app/components/gallery/ImageCarousel.tsx b/app/components/gallery/ImageCarousel.tsx new file mode 100644 index 0000000..338f6db --- /dev/null +++ b/app/components/gallery/ImageCarousel.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import Image from "next/image"; // or your preferred image component +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; + +const ImageCarousel = ({ + title, + images, +}: { + title: string; + images: {src: string}[]; +}) => { + return ( +
+

{title}

+
+ + + {images.map((image, index) => ( + + {`Gallery + + ))} + + + + +
+
+ ); +}; + +export default ImageCarousel; diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx new file mode 100644 index 0000000..36496a2 --- /dev/null +++ b/app/components/ui/button.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx new file mode 100644 index 0000000..ec505d0 --- /dev/null +++ b/app/components/ui/carousel.tsx @@ -0,0 +1,262 @@ +"use client" + +import * as React from "react" +import useEmblaCarousel, { + type UseEmblaCarouselType, +} from "embla-carousel-react" +import { ArrowLeft, ArrowRight } from "lucide-react" + +import { cn } from "@/lib/utils" +import { Button } from "@/components/ui/button" + +type CarouselApi = UseEmblaCarouselType[1] +type UseCarouselParameters = Parameters +type CarouselOptions = UseCarouselParameters[0] +type CarouselPlugin = UseCarouselParameters[1] + +type CarouselProps = { + opts?: CarouselOptions + plugins?: CarouselPlugin + orientation?: "horizontal" | "vertical" + setApi?: (api: CarouselApi) => void +} + +type CarouselContextProps = { + carouselRef: ReturnType[0] + api: ReturnType[1] + scrollPrev: () => void + scrollNext: () => void + canScrollPrev: boolean + canScrollNext: boolean +} & CarouselProps + +const CarouselContext = React.createContext(null) + +function useCarousel() { + const context = React.useContext(CarouselContext) + + if (!context) { + throw new Error("useCarousel must be used within a ") + } + + return context +} + +const Carousel = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & CarouselProps +>( + ( + { + orientation = "horizontal", + opts, + setApi, + plugins, + className, + children, + ...props + }, + ref + ) => { + const [carouselRef, api] = useEmblaCarousel( + { + ...opts, + axis: orientation === "horizontal" ? "x" : "y", + }, + plugins + ) + const [canScrollPrev, setCanScrollPrev] = React.useState(false) + const [canScrollNext, setCanScrollNext] = React.useState(false) + + const onSelect = React.useCallback((api: CarouselApi) => { + if (!api) { + return + } + + setCanScrollPrev(api.canScrollPrev()) + setCanScrollNext(api.canScrollNext()) + }, []) + + const scrollPrev = React.useCallback(() => { + api?.scrollPrev() + }, [api]) + + const scrollNext = React.useCallback(() => { + api?.scrollNext() + }, [api]) + + const handleKeyDown = React.useCallback( + (event: React.KeyboardEvent) => { + if (event.key === "ArrowLeft") { + event.preventDefault() + scrollPrev() + } else if (event.key === "ArrowRight") { + event.preventDefault() + scrollNext() + } + }, + [scrollPrev, scrollNext] + ) + + React.useEffect(() => { + if (!api || !setApi) { + return + } + + setApi(api) + }, [api, setApi]) + + React.useEffect(() => { + if (!api) { + return + } + + onSelect(api) + api.on("reInit", onSelect) + api.on("select", onSelect) + + return () => { + api?.off("select", onSelect) + } + }, [api, onSelect]) + + return ( + +
+ {children} +
+ + ) + } +) +Carousel.displayName = "Carousel" + +const CarouselContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const { carouselRef, orientation } = useCarousel() + + return ( +
+
+
+ ) +}) +CarouselContent.displayName = "CarouselContent" + +const CarouselItem = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const { orientation } = useCarousel() + + return ( +
+ ) +}) +CarouselItem.displayName = "CarouselItem" + +const CarouselPrevious = React.forwardRef< + HTMLButtonElement, + React.ComponentProps +>(({ className, variant = "outline", size = "icon", ...props }, ref) => { + const { orientation, scrollPrev, canScrollPrev } = useCarousel() + + return ( + + ) +}) +CarouselPrevious.displayName = "CarouselPrevious" + +const CarouselNext = React.forwardRef< + HTMLButtonElement, + React.ComponentProps +>(({ className, variant = "outline", size = "icon", ...props }, ref) => { + const { orientation, scrollNext, canScrollNext } = useCarousel() + + return ( + + ) +}) +CarouselNext.displayName = "CarouselNext" + +export { + type CarouselApi, + Carousel, + CarouselContent, + CarouselItem, + CarouselPrevious, + CarouselNext, +} diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx index 5451d28..58113d1 100644 --- a/app/gallery/page.tsx +++ b/app/gallery/page.tsx @@ -2,44 +2,50 @@ import fs from "fs"; import path from "path"; import Image from "next/image"; import { Metadata } from "next"; +import ImageCarousel from "../components/gallery/ImageCarousel"; export const metadata: Metadata = { - title: 'Dallas Formula Racing - Gallery', + title: "Dallas Formula Racing - Gallery", description: ` Explore the Dallas Formula Racing gallery to see our journey through images capturing the excitement of designing, building, and competing with formula-style vehicles. From team events to competition highlights, our gallery showcases the dedication and passion of our members. `, -} +}; export default function Gallery() { - const images = getImages(); + const gallery = getGallery([ + 'UTAutocross', + '2024 Competition Year' + ]); return ( -
-
- {images.map((image, index) => ( -
- {`Gallery -
- ))} +
+
+ {gallery.map(({folderName, images}) => )}
); } -function getImages() { - const galleryPath = path.join(process.cwd(), "public/gallery"); - const imageFiles = fs.readdirSync(galleryPath); - return imageFiles.map((file) => ({ src: `/gallery/${file}` })); +function getGallery(order: string[]) { + const galleryDir = path.join(process.cwd(), "public/gallery"); + const folders = fs.readdirSync(galleryDir).filter(folder => + fs.statSync(path.join(galleryDir, folder)).isDirectory() + ); + + // Sort folders based on custom order + folders.sort((a, b) => order.indexOf(a) - order.indexOf(b)); + + const galleryData = folders.map(folder => { + const folderPath = path.join(galleryDir, folder); + const imageFiles = fs.readdirSync(folderPath); + const images = imageFiles.map(file => ({ src: `/gallery/${folder}/${file}` })); + + return { folderName: folder, images }; + }); + + return galleryData; } + + diff --git a/app/globals.css b/app/globals.css index f78643e..6e4007e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -15,3 +15,68 @@ body, .ant-menu-submenu-selected { background-color: #2d2f34 !important; } + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} + +@layer base { + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/components.json b/components.json new file mode 100644 index 0000000..5896c1a --- /dev/null +++ b/components.json @@ -0,0 +1,20 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + } +} \ No newline at end of file diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 0000000..bd0c391 --- /dev/null +++ b/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/package-lock.json b/package-lock.json index 9c565b4..2b703e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,7 @@ "@heroicons/react": "^2.0.18", "@loaders.gl/gltf": "^3.4.2", "@prisma/client": "^5.2.0", + "@radix-ui/react-slot": "^1.1.0", "@reduxjs/toolkit": "^2.0.1", "@tailwindcss/line-clamp": "^0.4.4", "@tailwindcss/typography": "^0.5.9", @@ -64,13 +65,17 @@ "@webspellchecker/wproofreader-ckeditor5": "^2.2.1", "antd": "^5.9.2", "autoprefixer": "10.4.14", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", "css-loader": "^5.2.7", + "embla-carousel-react": "^8.3.0", "eslint": "8.40.0", "eslint-config-next": "13.4.2", "framer-motion": "^11.0.25", "gltf-loader": "^1.0.0", "heroicons": "^2.0.18", "immer": "^10.0.3", + "lucide-react": "^0.454.0", "next": "^13.4.2", "postcss": "^8.4.32", "postcss-loader": "^4.3.0", @@ -81,7 +86,9 @@ "react-redux": "^9.0.4", "recharts": "^2.12.7", "style-loader": "^2.0.0", + "tailwind-merge": "^2.5.4", "tailwindcss": "3.3.2", + "tailwindcss-animate": "^1.0.7", "three": "^0.152.2", "webpack": "^5.84.1", "webpack-cli": "^4.10.0" @@ -10045,6 +10052,37 @@ "@babel/runtime": "^7.0.0" } }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", + "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", + "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@rc-component/color-picker": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-1.4.1.tgz", @@ -11565,6 +11603,25 @@ "npm": ">=5.7.1" } }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, + "node_modules/class-variance-authority/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/classnames": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.4.0.tgz", @@ -12236,6 +12293,31 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.616.tgz", "integrity": "sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==" }, + "node_modules/embla-carousel": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.3.0.tgz", + "integrity": "sha512-Ve8dhI4w28qBqR8J+aMtv7rLK89r1ZA5HocwFz6uMB/i5EiC7bGI7y+AM80yAVUJw3qqaZYK7clmZMUR8kM3UA==" + }, + "node_modules/embla-carousel-react": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.3.0.tgz", + "integrity": "sha512-P1FlinFDcIvggcErRjNuVqnUR8anyo8vLMIH8Rthgofw7Nj8qTguCa2QjFAbzxAUTQTPNNjNL7yt0BGGinVdFw==", + "dependencies": { + "embla-carousel": "8.3.0", + "embla-carousel-reactive-utils": "8.3.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.1 || ^18.0.0" + } + }, + "node_modules/embla-carousel-reactive-utils": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.3.0.tgz", + "integrity": "sha512-EYdhhJ302SC4Lmkx8GRsp0sjUhEN4WyFXPOk0kGu9OXZSRMmcBlRgTvHcq8eKJE1bXWBsOi1T83B+BSSVZSmwQ==", + "peerDependencies": { + "embla-carousel": "8.3.0" + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", @@ -14476,6 +14558,14 @@ "node": ">=10" } }, + "node_modules/lucide-react": { + "version": "0.454.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz", + "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } + }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -17645,6 +17735,15 @@ "node": ">=10.13.0" } }, + "node_modules/tailwind-merge": { + "version": "2.5.4", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz", + "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz", @@ -17682,6 +17781,14 @@ "node": ">=14.0.0" } }, + "node_modules/tailwindcss-animate": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz", + "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==", + "peerDependencies": { + "tailwindcss": ">=3.0.0 || insiders" + } + }, "node_modules/tailwindcss/node_modules/postcss-import": { "version": "15.1.0", "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", diff --git a/package.json b/package.json index fdc74f6..fcb73cc 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "@heroicons/react": "^2.0.18", "@loaders.gl/gltf": "^3.4.2", "@prisma/client": "^5.2.0", + "@radix-ui/react-slot": "^1.1.0", "@reduxjs/toolkit": "^2.0.1", "@tailwindcss/line-clamp": "^0.4.4", "@tailwindcss/typography": "^0.5.9", @@ -68,13 +69,17 @@ "@webspellchecker/wproofreader-ckeditor5": "^2.2.1", "antd": "^5.9.2", "autoprefixer": "10.4.14", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", "css-loader": "^5.2.7", + "embla-carousel-react": "^8.3.0", "eslint": "8.40.0", "eslint-config-next": "13.4.2", "framer-motion": "^11.0.25", "gltf-loader": "^1.0.0", "heroicons": "^2.0.18", "immer": "^10.0.3", + "lucide-react": "^0.454.0", "next": "^13.4.2", "postcss": "^8.4.32", "postcss-loader": "^4.3.0", @@ -85,7 +90,9 @@ "react-redux": "^9.0.4", "recharts": "^2.12.7", "style-loader": "^2.0.0", + "tailwind-merge": "^2.5.4", "tailwindcss": "3.3.2", + "tailwindcss-animate": "^1.0.7", "three": "^0.152.2", "webpack": "^5.84.1", "webpack-cli": "^4.10.0" diff --git a/public/gallery/24comp.jpg b/public/gallery/2024 Competition Year/24comp.jpg similarity index 100% rename from public/gallery/24comp.jpg rename to public/gallery/2024 Competition Year/24comp.jpg diff --git a/public/gallery/24comp2.jpg b/public/gallery/2024 Competition Year/24comp2.jpg similarity index 100% rename from public/gallery/24comp2.jpg rename to public/gallery/2024 Competition Year/24comp2.jpg diff --git a/public/gallery/24compteam.jpg b/public/gallery/2024 Competition Year/24compteam.jpg similarity index 100% rename from public/gallery/24compteam.jpg rename to public/gallery/2024 Competition Year/24compteam.jpg diff --git a/public/gallery/24compteam2.jpg b/public/gallery/2024 Competition Year/24compteam2.jpg similarity index 100% rename from public/gallery/24compteam2.jpg rename to public/gallery/2024 Competition Year/24compteam2.jpg diff --git a/public/gallery/24driverappreciation.jpg b/public/gallery/2024 Competition Year/24driverappreciation.jpg similarity index 100% rename from public/gallery/24driverappreciation.jpg rename to public/gallery/2024 Competition Year/24driverappreciation.jpg diff --git a/public/gallery/24endurance.jpg b/public/gallery/2024 Competition Year/24endurance.jpg similarity index 100% rename from public/gallery/24endurance.jpg rename to public/gallery/2024 Competition Year/24endurance.jpg diff --git a/public/gallery/24fwsponsors.jpg b/public/gallery/2024 Competition Year/24fwsponsors.jpg similarity index 100% rename from public/gallery/24fwsponsors.jpg rename to public/gallery/2024 Competition Year/24fwsponsors.jpg diff --git a/public/gallery/24goat.jpg b/public/gallery/2024 Competition Year/24goat.jpg similarity index 100% rename from public/gallery/24goat.jpg rename to public/gallery/2024 Competition Year/24goat.jpg diff --git a/public/gallery/24mainsponsors.jpg b/public/gallery/2024 Competition Year/24mainsponsors.jpg similarity index 100% rename from public/gallery/24mainsponsors.jpg rename to public/gallery/2024 Competition Year/24mainsponsors.jpg diff --git a/public/gallery/24utdteaminterviewzheer.jpg b/public/gallery/2024 Competition Year/24utdteaminterviewzheer.jpg similarity index 100% rename from public/gallery/24utdteaminterviewzheer.jpg rename to public/gallery/2024 Competition Year/24utdteaminterviewzheer.jpg diff --git a/public/gallery/UTAutocross/image copy 2.png b/public/gallery/UTAutocross/image copy 2.png new file mode 100644 index 0000000..db55686 Binary files /dev/null and b/public/gallery/UTAutocross/image copy 2.png differ diff --git a/public/gallery/UTAutocross/image copy 3.png b/public/gallery/UTAutocross/image copy 3.png new file mode 100644 index 0000000..85219e2 Binary files /dev/null and b/public/gallery/UTAutocross/image copy 3.png differ diff --git a/public/gallery/UTAutocross/image copy 4.png b/public/gallery/UTAutocross/image copy 4.png new file mode 100644 index 0000000..4ef72e8 Binary files /dev/null and b/public/gallery/UTAutocross/image copy 4.png differ diff --git a/public/gallery/UTAutocross/image copy 5.png b/public/gallery/UTAutocross/image copy 5.png new file mode 100644 index 0000000..b528552 Binary files /dev/null and b/public/gallery/UTAutocross/image copy 5.png differ diff --git a/public/gallery/UTAutocross/image copy 6.png b/public/gallery/UTAutocross/image copy 6.png new file mode 100644 index 0000000..3e05f37 Binary files /dev/null and b/public/gallery/UTAutocross/image copy 6.png differ diff --git a/public/gallery/UTAutocross/image copy 7.png b/public/gallery/UTAutocross/image copy 7.png new file mode 100644 index 0000000..7993c95 Binary files /dev/null and b/public/gallery/UTAutocross/image copy 7.png differ diff --git a/public/gallery/UTAutocross/image copy 8.png b/public/gallery/UTAutocross/image copy 8.png new file mode 100644 index 0000000..34a5d9c Binary files /dev/null and b/public/gallery/UTAutocross/image copy 8.png differ diff --git a/public/gallery/UTAutocross/image copy 9.png b/public/gallery/UTAutocross/image copy 9.png new file mode 100644 index 0000000..e60a7e5 Binary files /dev/null and b/public/gallery/UTAutocross/image copy 9.png differ diff --git a/public/gallery/UTAutocross/image copy.png b/public/gallery/UTAutocross/image copy.png new file mode 100644 index 0000000..91d1322 Binary files /dev/null and b/public/gallery/UTAutocross/image copy.png differ diff --git a/public/gallery/UTAutocross/image.png b/public/gallery/UTAutocross/image.png new file mode 100644 index 0000000..17d8935 Binary files /dev/null and b/public/gallery/UTAutocross/image.png differ diff --git a/tailwind.config.js b/tailwind.config.js index 2fa0217..6fa4fa9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,56 +2,99 @@ const plugin = require("tailwindcss/plugin"); module.exports = { - content: [ + darkMode: ["class"], + content: [ "./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./app/(shared-components)/Navbar.tsx", "./app/team/officers/OfficerCard.tsx", ], theme: { - extend: { - fontSize: { - "10xl": "10rem", - }, - spacing: { - 128: "32rem", - 144: "36rem", - 160: "40rem", - 176: "44rem", - 224: "56rem", - 256: "64rem", - 400: "100rem", - }, - colors: { - "wh-0": "#FFFFFF", - "wh-10": "#F4F4F4", - "wh-50": "#FBFBFB", - "wh-75": "#F7F7F7", - "wh-100": "#C9C9C9", - "wh-300": "#939393", - "wh-500": "#595959", - "wh-900": "#0F0F0F", - "accent-red": "#EA9648", - "accent-orange": "#E87500", - "accent-orange-light": "#ff9933", - "officer-orange": "#EE9740", - "accent-green": "#2D8B49", - "accent-yellow": "#EDCA2C", - "or-10": "#ff841c", - }, - opacity: { - 65: 0.65, - }, - backgroundImage: (theme) => ({ - "gradient-gradual": - "linear-gradient(180deg, rgba(116, 116, 116, 0) 66.15%, #000000 100%)", - }), - }, - screens: { - xs: "480px", - sm: "768px", - md: "1060px", - }, + extend: { + fontSize: { + '10xl': '10rem' + }, + spacing: { + '128': '32rem', + '144': '36rem', + '160': '40rem', + '176': '44rem', + '224': '56rem', + '256': '64rem', + '400': '100rem' + }, + colors: { + 'wh-0': '#FFFFFF', + 'wh-10': '#F4F4F4', + 'wh-50': '#FBFBFB', + 'wh-75': '#F7F7F7', + 'wh-100': '#C9C9C9', + 'wh-300': '#939393', + 'wh-500': '#595959', + 'wh-900': '#0F0F0F', + 'accent-red': '#EA9648', + 'accent-orange': '#E87500', + 'accent-orange-light': '#ff9933', + 'officer-orange': '#EE9740', + 'accent-green': '#2D8B49', + 'accent-yellow': '#EDCA2C', + 'or-10': '#ff841c', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', + card: { + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))' + }, + popover: { + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))' + }, + primary: { + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))' + }, + secondary: { + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))' + }, + muted: { + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))' + }, + accent: { + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))' + }, + destructive: { + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))' + }, + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + chart: { + '1': 'hsl(var(--chart-1))', + '2': 'hsl(var(--chart-2))', + '3': 'hsl(var(--chart-3))', + '4': 'hsl(var(--chart-4))', + '5': 'hsl(var(--chart-5))' + } + }, + opacity: { + '65': '0.65' + }, + backgroundImage: '(theme) => ({\n "gradient-gradual":\n "linear-gradient(180deg, rgba(116, 116, 116, 0) 66.15%, #000000 100%)",\n })', + borderRadius: { + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)' + } + }, + screens: { + xs: '480px', + sm: '768px', + md: '1060px' + } }, plugins: [ plugin(function ({ addComponents }) { @@ -99,5 +142,6 @@ module.exports = { }); }), require("@tailwindcss/typography"), - ], + require("tailwindcss-animate") +], };