Skip to content

Commit

Permalink
update form register
Browse files Browse the repository at this point in the history
  • Loading branch information
sownt committed Jun 19, 2024
1 parent 97ca1c2 commit 5a1a120
Show file tree
Hide file tree
Showing 4 changed files with 218 additions and 49 deletions.
195 changes: 149 additions & 46 deletions app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
TicketIcon,
} from '@heroicons/react/24/solid';
import Button from '@/components/button/Button';
import logo from '@/public/logo.png';
import logo_white from '@/public/logo_white.png';
import hero from '@/public/hero/home_hero.svg';
import hero_dark from '@/public/hero/home_hero_dark.svg';
Expand All @@ -16,52 +15,13 @@ import hero_mobile_dark from '@/public/hero/home_hero_mobile_dark.svg';
import googlefordevelopers from '@/public/googlefordevelopers.svg';
import MobileNavBar from '@/components/navbar/MobileNavBar';
import Link from 'next/link';
import ThemeSwitcher from '@/components/ThemeSwitcher';
import NavBar from '@/components/navbar/NavBar';

export default function Home() {
return (
<div className="relative isolate flex flex-col min-h-svh w-full bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
{/* Nav */}
<div className="inset-x-0 top-0 max-lg:hidden dark:text-white">
<nav className="mx-auto max-w-6xl px-4 flex flex-1 items-center gap-8 py-2.5">
<Link href={'/'}>
<span className="relative">
<Image
className="dark:hidden w-64"
src={logo}
alt="Google I/O Extended Cloud Hanoi 2024"
/>
<Image
className="hidden dark:inline w-64"
src={logo_white}
alt="Google I/O Extended Cloud Hanoi 2024"
/>
</span>
</Link>
<div className="max-lg:hidden h-6 w-px bg-zinc-950/10 dark:bg-white/10"></div>
<div className="max-lg:hidden flex items-center gap-8">
<span className="relative">
<Link href="#info">Thông tin</Link>
</span>
<span className="relative">
<Link href="#">Lịch trình</Link>
</span>
<span className="relative">
<Link href="#">Diễn giả</Link>
</span>
<span className="relative">
<Link href="#">Tham gia</Link>
</span>
<span className="relative">
<Link href="#">Liên hệ</Link>
</span>
</div>
<div className="-ml-4 flex-1"></div>
<div className="flex items-center gap-4">
<ThemeSwitcher />
</div>
</nav>
</div>
<NavBar />
{/* Mobile Nav */}
<MobileNavBar />
{/* Body */}
Expand All @@ -78,10 +38,12 @@ export default function Home() {
rộng của sự kiện Google I/O dành cho các lập trình viên và những
người yêu thích công nghệ tại Việt Nam.
</p>
<Button>
<TicketIcon />
Đăng ký ngay
</Button>
<Link href="#join">
<Button>
<TicketIcon />
Đăng ký ngay
</Button>
</Link>
</div>
<div className="flex justify-end items-end w-full md:w-3/5 mt-[-55px] md:mt-[60px]">
<Image
Expand Down Expand Up @@ -185,6 +147,147 @@ export default function Home() {
</div>
</div>
</div>

<div className="flex mx-auto max-w-6xl">
<div className="flex flex-1">
<Image
src={hero_mobile}
alt="Hero image"
className="block dark:hidden w-full mt-[60px]"
/>
<Image
src={hero_mobile_dark}
alt="Hero image"
className="dark:inline-block dark:md:hidden w-full mt-[60px]"
/>
</div>
<div
id="join"
className="mx-auto flex-1 px-8 mt-24 sm:mt-32 lg:mt-40 text-neutral-950 dark:text-gray-50">
<div className="relative flex w-full flex-col rounded-3xl mt-6 p-6 ring-1 ring-neutral-950/5 transition bg-neutral-50 hover:bg-white dark:bg-zinc-900 dark:hover:bg-zinc-800 sm:p-8">
<div className="border-b border-gray-900/10 pb-12">
<h2 className="text-base font-semibold leading-7 text-gray-900">
Đăng ký tham dự
</h2>
<p className="mt-1 text-sm leading-6 text-gray-600">
Vé sẽ được gửi tới email của bạn trước thời gian diễn ra sự
kiện
</p>

<div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div className="sm:col-span-3">
<label
htmlFor="first-name"
className="block text-sm font-medium leading-6 text-gray-900">
Tên
</label>
<div className="mt-2">
<input
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>

<div className="sm:col-span-3">
<label
htmlFor="last-name"
className="block text-sm font-medium leading-6 text-gray-900">
Họ
</label>
<div className="mt-2">
<input
type="text"
name="last-name"
id="last-name"
autoComplete="family-name"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>

<div className="sm:col-span-6">
<label
htmlFor="email"
className="block text-sm font-medium leading-6 text-gray-900">
Email
</label>
<div className="mt-2">
<input
id="email"
name="email"
type="email"
autoComplete="email"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>

<div className="col-span-full">
<label
htmlFor="street-address"
className="block text-sm font-medium leading-6 text-gray-900">
Địa chỉ
</label>
<div className="mt-2">
<input
type="text"
name="street-address"
id="street-address"
autoComplete="street-address"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>

<div className="sm:col-span-3 sm:col-start-1">
<label
htmlFor="city"
className="block text-sm font-medium leading-6 text-gray-900">
Thành phố
</label>
<div className="mt-2">
<input
type="text"
name="city"
id="city"
autoComplete="address-level2"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>

<div className="sm:col-span-3">
<label
htmlFor="region"
className="block text-sm font-medium leading-6 text-gray-900">
Quận/Huyện
</label>
<div className="mt-2">
<input
type="text"
name="region"
id="region"
autoComplete="address-level1"
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
</div>
<div className="mt-6 flex items-center justify-end gap-x-6">
<button
type="submit"
className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Đăng ký
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer className="mt-24 sm:mt-32 lg:mt-40 pt-10 pb-16 lg:py-10 px-7 lg:px-16 bg-black flex flex-col lg:flex-row lg:justify-between lg:items-center w-max-full">
<div className="flex flex-col lg:flex-row items-start lg:items-center space-y-6 lg:space-y-0 lg:space-x-6 text-grey-500 text-[16px] font-medium flex-1">
Expand Down
33 changes: 33 additions & 0 deletions components/navbar/DefaultRoutes.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import Link from 'next/link';

export default function DefaultRoutes({ onClick }: { onClick?: () => any }) {
return (
<>
<span className="relative">
<Link onClick={onClick} href="#info">
Thông tin
</Link>
</span>
<span className="relative">
<Link onClick={onClick} href="#agenda">
Lịch trình
</Link>
</span>
<span className="relative">
<Link onClick={onClick} href="#speakers">
Diễn giả
</Link>
</span>
<span className="relative">
<Link onClick={onClick} href="#joinus">
Tham gia
</Link>
</span>
<span className="relative">
<Link onClick={onClick} href="#contacts">
Liên hệ
</Link>
</span>
</>
);
}
3 changes: 0 additions & 3 deletions components/navbar/MobileNavBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import {
Bars3Icon,
HomeIcon,
LinkIcon,
XMarkIcon,
} from '@heroicons/react/24/solid';
import { Dialog, Button } from '@headlessui/react';
Expand Down Expand Up @@ -66,13 +65,11 @@ export default function MobileNavBar() {
{/* Body */}
<div className="flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5">
<span className="relative">
{/* <span className="absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white"></span> */}
<Link
href="/"
onClick={() => setIsOpen(false)}
className="flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5 data-[slot=icon]:*:size-6 data-[slot=icon]:*:shrink-0 data-[slot=icon]:*:fill-zinc-500 sm:data-[slot=icon]:*:size-5 data-[slot=icon]:last:*:ml-auto data-[slot=icon]:last:*:size-5 sm:data-[slot=icon]:last:*:size-4 data-[slot=avatar]:*:-m-0.5 data-[slot=avatar]:*:size-7 data-[slot=avatar]:*:[--ring-opacity:10%] sm:data-[slot=avatar]:*:size-6 data-[hover]:bg-zinc-950/5 data-[slot=icon]:*:data-[hover]:fill-zinc-950 data-[active]:bg-zinc-950/5 data-[slot=icon]:*:data-[active]:fill-zinc-950 data-[slot=icon]:*:data-[current]:fill-zinc-950 dark:text-white dark:data-[slot=icon]:*:fill-zinc-400 dark:data-[hover]:bg-white/5 dark:data-[slot=icon]:*:data-[hover]:fill-white dark:data-[active]:bg-white/5 dark:data-[slot=icon]:*:data-[active]:fill-white dark:data-[slot=icon]:*:data-[current]:fill-white">
<HomeIcon />
{/* Label */}
<span className="truncate">Home</span>
</Link>
</span>
Expand Down
36 changes: 36 additions & 0 deletions components/navbar/NavBar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import Link from 'next/link';
import Image from 'next/image';
import logo from '@/public/logo.png';
import logo_white from '@/public/logo_white.png';
import ThemeSwitcher from '@/components/ThemeSwitcher';
import DefaultRoutes from './DefaultRoutes';
export default function NavBar() {
return (
<div className="inset-x-0 top-0 max-lg:hidden dark:text-white">
<nav className="mx-auto max-w-6xl px-4 flex flex-1 items-center gap-8 py-2.5">
<Link href={'/'}>
<span className="relative">
<Image
className="dark:hidden w-64"
src={logo}
alt="Google I/O Extended Cloud Hanoi 2024"
/>
<Image
className="hidden dark:inline w-64"
src={logo_white}
alt="Google I/O Extended Cloud Hanoi 2024"
/>
</span>
</Link>
<div className="max-lg:hidden h-6 w-px bg-zinc-950/10 dark:bg-white/10"></div>
<div className="max-lg:hidden flex items-center gap-8">
<DefaultRoutes />
</div>
<div className="-ml-4 flex-1"></div>
<div className="flex items-center gap-4">
<ThemeSwitcher />
</div>
</nav>
</div>
);
}

0 comments on commit 5a1a120

Please sign in to comment.