diff --git a/client/package.json b/client/package.json index 4809d97..28f2fb5 100644 --- a/client/package.json +++ b/client/package.json @@ -17,6 +17,7 @@ "next": "14.2.6", "react": "^18", "react-dom": "^18", + "react-vertical-timeline-component": "^3.6.0", "tailwind-merge": "^2.5.2", "tailwindcss-animate": "^1.0.7", "yarn": "^1.22.22" @@ -25,6 +26,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-vertical-timeline-component": "^3.3.6", "eslint": "^8", "eslint-config-next": "14.2.6", "postcss": "^8", diff --git a/client/src/app/components/timeline/Desktop/Desktop.tsx b/client/src/app/components/timeline/Desktop/Desktop.tsx new file mode 100644 index 0000000..a0e2b9c --- /dev/null +++ b/client/src/app/components/timeline/Desktop/Desktop.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { timelineEvents } from "@/app/config/content/Timeline/timeline"; +import TimelineCard from "./TimelineCard"; +import Image from "next/image"; +import { line } from "@/app/config/content/Timeline/timeline"; +export default function Desktop() { + return ( +
+ {timelineEvents.map((event, index) => + event.date ? ( + + ) : ( +
+ 1 +
+ ) + )} +
+ ); +} diff --git a/client/src/app/components/timeline/Pill.tsx b/client/src/app/components/timeline/Desktop/Pill.tsx similarity index 58% rename from client/src/app/components/timeline/Pill.tsx rename to client/src/app/components/timeline/Desktop/Pill.tsx index 7dcd975..56ca117 100644 --- a/client/src/app/components/timeline/Pill.tsx +++ b/client/src/app/components/timeline/Desktop/Pill.tsx @@ -1,29 +1,22 @@ import Image from "next/image"; import React from "react"; -import { line, rightCurve, leftCurve } from "@/app/config/Timeline/timeline"; +import { + line, + rightCurve, + leftCurve, +} from "@/app/config/content/Timeline/timeline"; +import { PillType } from "@/app/types/timeline"; -export default function Pill({ - align, - curved, - isLast, - midEnd, - corner, -}: { - align: String; - curved: String; - isLast: boolean; - midEnd: String; - corner: String; -}) { +export default function Pill({ align, curved, isLast, corner }: PillType) { return (
-
+
+ {curved && ( )} diff --git a/client/src/app/components/timeline/TimelineCard.tsx b/client/src/app/components/timeline/Desktop/TimelineCard.tsx similarity index 65% rename from client/src/app/components/timeline/TimelineCard.tsx rename to client/src/app/components/timeline/Desktop/TimelineCard.tsx index 7fce26a..2f2e009 100644 --- a/client/src/app/components/timeline/TimelineCard.tsx +++ b/client/src/app/components/timeline/Desktop/TimelineCard.tsx @@ -11,22 +11,22 @@ const TimelineCard = ({ align, curved, isLast, - midEnd, corner, imgPos, imgSize, }: TimelineCardType) => { return ( -
-

{title}

-

{date}

-

{status}

-
+
+

{date}

+

{title}

+

+ {status} +

+
diff --git a/client/src/app/components/timeline/Mobile/Mobile.tsx b/client/src/app/components/timeline/Mobile/Mobile.tsx new file mode 100644 index 0000000..7eb1cd4 --- /dev/null +++ b/client/src/app/components/timeline/Mobile/Mobile.tsx @@ -0,0 +1,39 @@ +"use client"; +import React from "react"; +import { timelineEvents } from "@/app/config/content/Timeline/timeline"; +import { + VerticalTimeline, + VerticalTimelineElement, +} from "react-vertical-timeline-component"; +import "react-vertical-timeline-component/style.min.css"; +import TimelineCard from "./TimelineCard"; +export default function Mobile() { + return ( +
+ + {timelineEvents.map((event, i) => { + if (event.title) + return ( + + + + ); + })} + +
+ ); +} diff --git a/client/src/app/components/timeline/Mobile/TimelineCard.tsx b/client/src/app/components/timeline/Mobile/TimelineCard.tsx new file mode 100644 index 0000000..c5f362b --- /dev/null +++ b/client/src/app/components/timeline/Mobile/TimelineCard.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import Image from "next/image"; +import { TimelineCardType } from "@/app/types/timeline"; +export default function TimelineCard({ + date, + title, + status, + image, +}: TimelineCardType) { + return ( +
+
+
+ {title} +
+

{date}

+

{title}

+

{status}

+
+
+ ); +} diff --git a/client/src/app/components/timeline/Timeline.tsx b/client/src/app/components/timeline/Timeline.tsx index f1b7c65..84ad77b 100644 --- a/client/src/app/components/timeline/Timeline.tsx +++ b/client/src/app/components/timeline/Timeline.tsx @@ -1,38 +1,18 @@ import React from "react"; -import { timelineEvents } from "@/app/config/Timeline/timeline"; -import TimelineCard from "./TimelineCard"; -import Image from "next/image"; +import Desktop from "./Desktop/Desktop"; +import Mobile from "./Mobile/Mobile"; + export default function Timeline() { return ( -
-

+
+

Timeline

-
- {timelineEvents.map((event, index) => - event.date ? ( - - ) : ( -
- 1 -
- ) - )} +
+ +
+
+
); diff --git a/client/src/app/config/Timeline/timeline.ts b/client/src/app/config/content/Timeline/timeline.ts similarity index 97% rename from client/src/app/config/Timeline/timeline.ts rename to client/src/app/config/content/Timeline/timeline.ts index 32d9099..40d3e68 100644 --- a/client/src/app/config/Timeline/timeline.ts +++ b/client/src/app/config/content/Timeline/timeline.ts @@ -27,7 +27,7 @@ export const timelineEvents = [ }, { date: "Sept 20, 2024", - title: "Registration Open for Participants", + title: "Registration Open for", status: "Participants", image: "https://res.cloudinary.com/dmvdbpyqk/image/upload/v1725309320/char3_gembtn.png", align: "center", diff --git a/client/src/app/globals.css b/client/src/app/globals.css index 522c187..d2ff3a3 100644 --- a/client/src/app/globals.css +++ b/client/src/app/globals.css @@ -9,94 +9,83 @@ } .bg { - position: relative; - background: url("https://res.cloudinary.com/dmvdbpyqk/image/upload/v1725313400/1_gk2lzw.png"); - /* background-size: cover; - background-repeat: no-repeat; - background-position: center; */ + background: linear-gradient( + 0deg, + rgba(255, 255, 255, 0.45), + rgba(255, 255, 255, 0.45) + ), + linear-gradient( + 180deg, + rgba(255, 173, 0, 0.2) 44.15%, + rgba(255, 50, 0, 0.08) 100% + ), + url("https://res.cloudinary.com/dmvdbpyqk/image/upload/v1725313400/1_gk2lzw.png"); } -.bg::before { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient( - 180deg, - rgba(255, 173, 0, 0.2) 44.15%, - rgba(255, 50, 0, 0.08) 100% - ); - z-index: -1; - pointer-events: none; -} - -.bg-content { - position: relative; - z-index: 2; +.vertical-timeline-element-content { + box-shadow: none !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%; - } + :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; - } + * { + @apply border-border; + } + body { + @apply bg-background text-foreground; + } } diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx index 124c96b..f09c266 100644 --- a/client/src/app/layout.tsx +++ b/client/src/app/layout.tsx @@ -3,20 +3,20 @@ import { Inter, Jost, Raleway } from "next/font/google"; import "./globals.css"; const inter = Inter({ - subsets: ["latin"], - weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], - variable: "--inter", + subsets: ["latin"], + weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], + variable: "--inter", }); const jost = Jost({ - subsets: ["latin"], - weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], - variable: "--jost", + subsets: ["latin"], + weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], + variable: "--jost", }); const raleway = Raleway({ - subsets: ["latin"], - weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], - variable: "--raleway", + subsets: ["latin"], + weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"], + variable: "--raleway", }); export const metadata: Metadata = { @@ -29,13 +29,14 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { - return ( - - - {children} - - - ); + return ( + + + {children} + + + ); + } diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx index 632b74b..4948228 100644 --- a/client/src/app/page.tsx +++ b/client/src/app/page.tsx @@ -9,17 +9,17 @@ import { HeroMain } from "./components/hero_section/heroMain"; import { AboutMain } from "./components/about_section/aboutMain"; export default function Home() { - return ( -
- - - - - - - - -
-
- ); + return ( +
+ + + + + + + + +
+ ); } diff --git a/client/src/app/types/timeline.ts b/client/src/app/types/timeline.ts index e44ec12..42fbf6f 100644 --- a/client/src/app/types/timeline.ts +++ b/client/src/app/types/timeline.ts @@ -8,6 +8,13 @@ export type TimelineCardType = { isLast?: boolean; midEnd?: string; corner?: string; - imgPos: string; - imgSize: number; + imgPos?: string; + imgSize?: number; +}; + +export type PillType = { + align: String; + curved: String; + isLast: boolean; + corner: String; }; diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts index ed372a8..b9c0e67 100644 --- a/client/tailwind.config.ts +++ b/client/tailwind.config.ts @@ -1,100 +1,110 @@ import type { Config } from "tailwindcss"; const config: Config = { - darkMode: ["class"], - content: [ - "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", - "./src/components/**/*.{js,ts,jsx,tsx,mdx}", - "./src/app/**/*.{js,ts,jsx,tsx,mdx}", - ], - theme: { - extend: { - backgroundImage: { - "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "gradient-conic": - "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", - }, - borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", - }, - colors: { - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", + darkMode: ["class"], + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + backgroundImage: { + "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", + "gradient-conic": + "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", + }, + screens: { + smd: "732px", + slg: "900px", + lg: "1010px", + xl: "1200px", + "2xl": "1450px", + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + colors: { + 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))", + }, + "primary-red": "#F12727", + "text-dark": "#323232", + }, + fontFamily: { + jost: "var(--jost)", + raleway: "var(--raleway)", + inter: "var(--inter)", + }, + spacing: { + "padding-main": "107px", + "margin-large": "100px", + "height-section": "280px", + "width-content": "748px", + }, + fontSize: { + "heading-xl": [ + "48px", + { lineHeight: "69.36px", letterSpacing: "0.04em" }, + ], + "body-lg": [ + "24px", + { lineHeight: "32px", letterSpacing: "0.04em" }, + ], + }, + lineHeight: { + "line-tight": "69.36px", + "line-normal": "32px", + }, + letterSpacing: { + wide: "0.04em", + }, + gap: { + "small-gap": "10px", + "medium-gap": "24px", + }, }, - 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))", - }, - "primary-red": "#F12727", - "text-dark": "#323232", - }, - fontFamily: { - jost: "var(--jost)", - raleway: "var(--raleway)", - inter: "var(--inter)", - }, - spacing: { - "padding-main": "107px", - "margin-large": "100px", - "height-section": "280px", - "width-content": "748px", - }, - fontSize: { - "heading-xl": [ - "48px", - { lineHeight: "69.36px", letterSpacing: "0.04em" }, - ], - "body-lg": ["24px", { lineHeight: "32px", letterSpacing: "0.04em" }], - }, - lineHeight: { - "line-tight": "69.36px", - "line-normal": "32px", - }, - letterSpacing: { - wide: "0.04em", - }, - gap: { - "small-gap": "10px", - "medium-gap": "24px", - }, }, - }, - plugins: [require("tailwindcss-animate")], + plugins: [require("tailwindcss-animate")], }; export default config; diff --git a/client/tsconfig.json b/client/tsconfig.json index 7b28589..89b9f2f 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -1,26 +1,32 @@ { - "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "bundler", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "plugins": [ - { - "name": "next" - } + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./src/*"] + } + }, + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + "src/app/components/timeline/Mobile/Mobile.tsx" ], - "paths": { - "@/*": ["./src/*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "exclude": ["node_modules"] }