-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #234 from privacy-scaling-explorations/devcon-7
devcon 7 page
- Loading branch information
Showing
13 changed files
with
607 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from "react" | ||
| import { Metadata } from "next" | ||
|
|
||
| import { Devcon7Booths } from "./sections/Devcon7Booths" | ||
| import { Devcon7Header } from "./sections/Devcon7Header" | ||
| import { Devcon7Section } from "./sections/Devcon7Section" | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: "Devon 7", | ||
| description: "PSE x Devcon 7 Southeast Asia", | ||
| openGraph: { | ||
| images: [ | ||
| { | ||
| url: "/devcon-7-cover.png", | ||
| width: 1200, | ||
| height: 630, | ||
| }, | ||
| ], | ||
| }, | ||
| } | ||
|
|
||
| export default async function DevconPage() { | ||
| return ( | ||
| <> | ||
| <div className="flex flex-col lg:pb-[120px]"> | ||
| <Devcon7Header /> | ||
| <div className="flex flex-col gap-10 lg:gap-14 pt-8 lg:pt-[60px]"> | ||
| <Devcon7Booths /> | ||
| <Devcon7Section /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <AppContent> | ||
| <div className="flex flex-col gap-10 lg:gap-14"> | ||
| <h2 className="lg:max-w-[700px] mx-auto font-bold text-black text-lg lg:text-[32px] leading-[110%] font-display text-center px-6"> | ||
| {`We're excited to connect and collaborate on building meaningful tools | ||
| with cryptography.`} | ||
| </h2> | ||
| <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-14"> | ||
| {booths?.map((booth, index) => { | ||
| return ( | ||
| <div | ||
| key={index} | ||
| className="lg:grid lg:grid-cols-[1.5fr_1fr] flex flex-col rounded-lg overflow-hidden border border-[rgba(8, 27, 26, 0.15)]" | ||
| > | ||
| <div className="min-h-[160px] bg-slate-50 relative order-1 lg:order-2 bg-[lightgray 50% / cover no-repeat]"> | ||
| <Image | ||
| src={booth.image} | ||
| alt={`booth image ${index + 1}`} | ||
| fill | ||
| className="object-cover" | ||
| priority | ||
| /> | ||
| </div> | ||
| <div className="flex flex-col gap-3 bg-anakiwa-50 p-4 lg:p-7 order-2 lg:order-1"> | ||
| <span className="text-anakiwa-500 text-xs font-sans leading-5 tracking-[2.5px] uppercase font-bold"> | ||
| BOOTH | ||
| </span> | ||
| <span className="text-[22px] leading-[24px] text-tuatara-950 font-display font-bold"> | ||
| {booth?.title} | ||
| </span> | ||
| <span className="text-xs lg:text-base lg:leading-6 text-tuatara-950 font-sans font-normal"> | ||
| {booth?.description} | ||
| </span> | ||
| <div className="flex flex-col"> | ||
| <div className="flex items-center gap-[6px]"> | ||
| <Icons.time className="text-tuatara-500" /> | ||
| <span className="font-sans text-tuatara-500 text-xs lg:text-sm leading-5 font-normal"> | ||
| {booth?.date} | ||
| </span> | ||
| </div> | ||
| <div className="flex gap-[6px] items-center"> | ||
| <Icons.eventLocation className="text-tuatara-500" /> | ||
| <span className="font-sans text-tuatara-500 text-xs lg:text-sm leading-5 font-normal"> | ||
| {booth?.location} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| })} | ||
| </div> | ||
| </div> | ||
| </AppContent> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import Image from "next/image" | ||
|
|
||
| export const Devcon7Header = () => { | ||
| return ( | ||
| <div className="relative h-[180px] lg:h-[300px]"> | ||
| <Image | ||
| src="/images/devcon-7-mobile.svg" | ||
| alt="Devcon 7 Banner" | ||
| fill | ||
| className="block object-cover md:hidden" | ||
| priority | ||
| /> | ||
| <Image | ||
| src="/images/devcon-7-desktop.svg" | ||
| alt="Devcon 7 Banner" | ||
| fill | ||
| className="hidden object-cover md:block" | ||
| priority | ||
| /> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| "use client" | ||
|
|
||
| import { useState } from "react" | ||
| import Link from "next/link" | ||
| import { events } from "@/data/events/devcon-7" | ||
| import { cva } from "class-variance-authority" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
| 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-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 ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-col gap-3", | ||
| tableSection(), | ||
| "py-4 px-6 lg:p-0 lg:pt-[30px] lg:pb-5 border-b border-b-tuatara-200" | ||
| )} | ||
| > | ||
| <div className="flex flex-col gap-1 order-3 lg:order-1"> | ||
| <span className="text-sm text-tuatara-950 font-bold font-sans leading-5"> | ||
| {event?.date} | ||
| </span> | ||
| <div className="grid grid-cols-[1fr_16px] lg:grid-cols-1"> | ||
| <div className="flex flex-col"> | ||
| <div className="flex items-center gap-[6px]"> | ||
| <Icons.time className="text-tuatara-500" /> | ||
| <span className="font-sans text-tuatara-500 text-xs lg:text-sm leading-5 font-normal"> | ||
| {event?.time} | ||
| </span> | ||
| </div> | ||
| <div className="flex gap-[6px] items-center"> | ||
| <Icons.eventLocation className="text-tuatara-500" /> | ||
| <span className="font-sans text-tuatara-500 text-xs lg:text-sm leading-5 font-normal"> | ||
| {location} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-col gap-[10px] lg:order-2 order-2"> | ||
| <Link | ||
| href={event?.url ?? "#"} | ||
| target="_blank" | ||
| className="text-[22px] leading-[24px] text-tuatara-950 underline font-display hover:text-anakiwa-500 font-bold duration-200" | ||
| > | ||
| {event?.title} | ||
| </Link> | ||
| <div | ||
| className={cn( | ||
| "lg:max-h-none lg:opacity-100 lg:block", | ||
| "transition-all duration-300 overflow-hidden", | ||
| isOpen ? "max-h-[200px] opacity-100" : "max-h-0 opacity-0", | ||
| "lg:transition-none lg:overflow-visible" | ||
| )} | ||
| > | ||
| <span className="text-base leading-6 text-tuatara-950 font-sans font-normal"> | ||
| {event?.description} | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="lg:order-3 order-1 grid gap-5 pb-3 lg:pb-0 grid-cols-[1fr_32px] lg:grid-cols-1"> | ||
| <div className="flex flex-wrap lg:flex-col gap-1"> | ||
| {speakers?.map((speaker: any, index: number) => { | ||
| return ( | ||
| <Link | ||
| key={index} | ||
| className="text-sm text-anakiwa-500 underline break-all" | ||
| href={speaker.url ?? "#"} | ||
| > | ||
| {speaker.label} | ||
| </Link> | ||
| ) | ||
| })} | ||
| </div> | ||
| <button | ||
| className="lg:hidden flex" | ||
| onClick={() => { | ||
| setIsOpen(!isOpen) | ||
| }} | ||
| > | ||
| {isOpen ? ( | ||
| <Icons.minus | ||
| className={cn( | ||
| "size-5 ml-auto", | ||
| "transition-transform duration-200" | ||
| )} | ||
| /> | ||
| ) : ( | ||
| <Icons.plus | ||
| className={cn( | ||
| "size-5 ml-auto", | ||
| "transition-transform duration-200" | ||
| )} | ||
| /> | ||
| )} | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className="order-4 lg:flex hidden"> | ||
| <Icons.line /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const Devcon7Section = () => { | ||
| return ( | ||
| <div className="flex flex-col gap-10 relative lg:px-[60px]"> | ||
| <div className="flex flex-col lg:container"> | ||
| <div | ||
| className={cn(tableSection(), "lg:border-b lg:border-anakiwa-200")} | ||
| > | ||
| <div className={cn(tableSectionTitle(), "lg:flex hidden")}> | ||
| Details | ||
| </div> | ||
| <div className={cn(tableSectionTitle(), "lg:text-left text-center")}> | ||
| Talks | ||
| </div> | ||
| <div className={cn(tableSectionTitle(), "lg:flex hidden")}> | ||
| Speakers | ||
| </div> | ||
| <div className="lg:flex hidden"></div> | ||
| </div> | ||
| <div className="flex flex-col"> | ||
| {events?.map(({ event, speakers, location }, index) => { | ||
| return ( | ||
| <EventCard | ||
| key={index} | ||
| event={event} | ||
| speakers={speakers} | ||
| location={location} | ||
| /> | ||
| ) | ||
| })} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.