From 3efbf4c03ffa0b2657f10b41cabc1af93b7efb26 Mon Sep 17 00:00:00 2001 From: Kalidou Diagne Date: Sat, 9 Nov 2024 17:07:05 +0100 Subject: [PATCH] mobile + desktop view devcon page --- app/[lang]/devcon-7/page.tsx | 14 +- .../devcon-7/sections/Devcon7Booths.tsx | 63 ++++ .../devcon-7/sections/Devcon7Section.tsx | 149 +++++++--- components/icons.tsx | 45 +++ data/events/devcon-7.ts | 274 ++++++++++++++---- hooks/useAppSettings.ts | 2 +- public/images/cryptographic-connections.svg | 9 + public/images/impact-booth.svg | 14 + tailwind.config.js | 22 +- 9 files changed, 483 insertions(+), 109 deletions(-) create mode 100644 app/[lang]/devcon-7/sections/Devcon7Booths.tsx create mode 100644 public/images/cryptographic-connections.svg create mode 100644 public/images/impact-booth.svg diff --git a/app/[lang]/devcon-7/page.tsx b/app/[lang]/devcon-7/page.tsx index 0689747..ae1bc4b 100644 --- a/app/[lang]/devcon-7/page.tsx +++ b/app/[lang]/devcon-7/page.tsx @@ -1,6 +1,7 @@ import React from "react" import { Metadata } from "next" +import { Devcon7Booths } from "./sections/Devcon7Booths" import { Devcon7Header } from "./sections/Devcon7Header" import { Devcon7Section } from "./sections/Devcon7Section" @@ -20,9 +21,14 @@ export const metadata: Metadata = { export default async function DevconPage() { return ( -
- - -
+ <> +
+ +
+ + +
+
+ ) } diff --git a/app/[lang]/devcon-7/sections/Devcon7Booths.tsx b/app/[lang]/devcon-7/sections/Devcon7Booths.tsx new file mode 100644 index 0000000..43c231d --- /dev/null +++ b/app/[lang]/devcon-7/sections/Devcon7Booths.tsx @@ -0,0 +1,63 @@ +import Image from "next/image" +import { booths } from "@/data/events/devcon-7" + +import { AppContent } from "@/components/ui/app-content" +import { Icons } from "@/components/icons" + +export const Devcon7Booths = () => { + return ( + +
+

+ {`We're excited to connect and collaborate on building meaningful tools + with cryptography.`} +

+
+ {booths?.map((booth, index) => { + return ( +
+
+ {`booth +
+
+ + BOOTH + + + {booth?.title} + + + {booth?.description} + +
+
+ + + {booth?.date} + +
+
+ + + {booth?.location} + +
+
+
+
+ ) + })} +
+
+ + ) +} diff --git a/app/[lang]/devcon-7/sections/Devcon7Section.tsx b/app/[lang]/devcon-7/sections/Devcon7Section.tsx index 5e3f93f..4f161ed 100644 --- a/app/[lang]/devcon-7/sections/Devcon7Section.tsx +++ b/app/[lang]/devcon-7/sections/Devcon7Section.tsx @@ -1,59 +1,132 @@ -import Image from "next/image" +"use client" + +import { useState } from "react" import Link from "next/link" -import events from "@/data/events/devcon-7" +import { events } from "@/data/events/devcon-7" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" -import { AppContent } from "@/components/ui/app-content" +import { Icons } from "@/components/icons" const tableSection = cva("lg:grid lg:grid-cols-[200px_1fr_80px_20px] lg:gap-8") const tableSectionTitle = cva( - "text-anakiwa-500 text-xs font-sans leading-5 tracking-[2.5px] uppercase font-bold pb-3" + "text-anakiwa-500 text-base lg:text-xs font-sans leading-5 tracking-[2.5px] uppercase font-bold lg:pb-3" ) + +const EventCard = ({ event = {}, speakers = [], location = "" }: any) => { + const [isOpen, setIsOpen] = useState(false) + + return ( +
+
+ + {event?.date} + +
+
+
+ + + {event?.time} + +
+
+ + + {location} + +
+
+
+
+
+
+ + {event?.title} + + +
+ +
+ + {event?.description} + +
+
+
+ {speakers?.map((speaker: any, index: number) => { + return ( + + {speaker.label} + + ) + })} +
+
+ +
+
+ ) +} + export const Devcon7Section = () => { return ( -
+
-
Details
-
Talks
-
Speakers
-
+
+ Details +
+
+ Talks +
+
+ Speakers +
+
- {events?.map((event, index) => { + {events?.map(({ event, speakers, location }, index) => { return ( -
-
- - {event?.date} - - {event?.time} - {event?.location} -
-
- - {event?.title} - - - {event?.description} - -
-
-
-
+ event={event} + speakers={speakers} + location={location} + /> ) })}
diff --git a/components/icons.tsx b/components/icons.tsx index 1325685..4899305 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -12,7 +12,52 @@ export type Icon = LucideIcon export const Icons = { sun: SunMedium, + time: (props: LucideProps) => ( + + + + ), + eventLocation: (props: LucideProps) => ( + + + + ), moon: Moon, + line: (props: LucideProps) => ( + + + + ), twitter: (props: LucideProps) => ( + + + + + + + + diff --git a/public/images/impact-booth.svg b/public/images/impact-booth.svg new file mode 100644 index 0000000..f5eb9f4 --- /dev/null +++ b/public/images/impact-booth.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/tailwind.config.js b/tailwind.config.js index 20d1d3a..f9b7ee6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -5,16 +5,15 @@ module.exports = { darkMode: ["class"], content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"], theme: { - container: { - center: true, - padding: "2rem", - - }, extend: { + container: { + center: true, + padding: "16px", + }, screens: { "2xl": "1400px", "3xl": "1600px", - "medium": "978px", + medium: "978px", }, translate: { center: "translate(-50%, -50%)", @@ -22,9 +21,12 @@ module.exports = { backgroundImage: { "main-gradient": "radial-gradient(114.29% 42.52% at 103.66% 58.94%, #D0F8F1 0%, #D1F3FF 18.23%, #ECF8FF 51.28%, #E1FFFA 80.21%, #D0F2FF 93.23%)", - "cover-gradient": "linear-gradient(84deg, #FFF -1.95%, #C2E8F5 59.98%, #FFF 100.64%)", - "classic-gradient": "radial-gradient(325.52% 79.63% at 100% -0.02%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(205.45% 61.89% at 2.34% 99.98%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)", - "project-page-gradient": "linear-gradient(180deg, #C2E8F5 -17.44%, #FFF 17.72%)" + "cover-gradient": + "linear-gradient(84deg, #FFF -1.95%, #C2E8F5 59.98%, #FFF 100.64%)", + "classic-gradient": + "radial-gradient(325.52% 79.63% at 100% -0.02%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(205.45% 61.89% at 2.34% 99.98%, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)", + "project-page-gradient": + "linear-gradient(180deg, #C2E8F5 -17.44%, #FFF 17.72%)", }, colors: { corduroy: "#4A5754", @@ -33,6 +35,7 @@ module.exports = { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", + black: "#01030A", anakiwa: { default: "#D0F2FF", 50: "#F2FAFD", @@ -135,4 +138,3 @@ module.exports = { }, plugins: [require("tailwindcss-animate")], } -