Skip to content

Commit

Permalink
feat: update landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphico committed May 13, 2024
1 parent 06b2504 commit 76e961a
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 5 deletions.
24 changes: 24 additions & 0 deletions src/app/(landing)/_components/header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import Link from "next/link"

import { redirects } from "@/config/constants"
import { Icons } from "@/components/icons"

export function Header() {
return (
<header className="w-full">
<div className="container flex max-w-5xl items-center justify-between py-6">
<Link href="/">
<Icons.logo className="size-7" aria-hidden="true" />
<span className="sr-only">Logo</span>
</Link>

<Link
href={redirects.toLogin}
className="text-sm font-medium text-zinc-300 hover:text-white"
>
Login
</Link>
</div>
</header>
)
}
3 changes: 3 additions & 0 deletions src/app/(landing)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { Header } from "./_components/header"

export default function LandingLayout({ children }: React.PropsWithChildren) {
return (
<div className="relative flex min-h-screen flex-col">
<Header />
<main className="flex-1">{children}</main>
</div>
)
Expand Down
9 changes: 4 additions & 5 deletions src/app/(landing)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,15 @@ export const viewport: Viewport = {

export default function HomePage() {
return (
<section className="container flex min-h-screen w-full flex-col items-center justify-center space-y-4 text-center">
<section className="container flex min-h-[75vh] w-full max-w-5xl flex-col items-center justify-center">
<DotBg />

<Link
href={siteConfig.githubLink}
className={cn(
badgeVariants({
variant: "outline",
}),
"group animate-fade-up text-zinc-300 transition-colors duration-150 hover:text-white"
"group mb-4 animate-fade-up text-sm font-medium text-zinc-300 transition-colors duration-150 hover:text-white"
)}
target="_blank"
rel="noreferrer"
Expand All @@ -39,14 +38,14 @@ export default function HomePage() {
</Link>

<h1
className="max-w-3xl animate-fade-up bg-gradient-to-b from-neutral-200 via-zinc-200 to-neutral-500 bg-clip-text font-heading text-5xl font-semibold tracking-tight text-transparent sm:text-7xl lg:text-8xl"
className="mb-2 max-w-3xl animate-fade-up bg-gradient-to-b from-neutral-200 via-zinc-200 to-neutral-500 bg-clip-text text-center font-heading text-4xl font-semibold tracking-tight text-transparent md:text-7xl lg:text-8xl"
style={{ animationDelay: "0.20s", animationFillMode: "both" }}
>
<Balancer>One Platform for Virtual Learning</Balancer>
</h1>

<p
className="max-w-lg animate-fade-up text-lg text-zinc-400 sm:pb-2"
className="mb-4 max-w-lg animate-fade-up text-center text-base text-zinc-400 md:text-lg"
style={{ animationDelay: "0.30s", animationFillMode: "both" }}
>
Plan, organize, and manage virtual workshop sessions
Expand Down
13 changes: 13 additions & 0 deletions src/components/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,19 @@ export const Icons = {
chevronLeft: ChevronLeft,
refresh: RotateCcw,
warning: TriangleAlert,
logo: ({ ...props }: LucideProps) => (
<svg
viewBox="0 0 61 59"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M52.406 42.002C50.816 42.01 49.33 42.46 48.068 43.234L48.104 43.214L42.716 38.316C44.164 36.106 45.024 33.398 45.024 30.49C45.024 27.346 44.018 24.436 42.308 22.066L42.338 22.108L48.462 15.984C49.602 16.616 50.96 16.99 52.404 17H52.408C57.102 17 60.908 13.194 60.908 8.5C60.908 3.806 57.102 0 52.408 0C47.714 0 43.908 3.806 43.908 8.5C43.918 9.948 44.294 11.306 44.946 12.49L44.924 12.446L38.8 18.57C36.506 16.89 33.626 15.882 30.512 15.882C28.776 15.882 27.114 16.196 25.578 16.768L25.676 16.736L24.388 14.396C25.84 12.882 26.734 10.822 26.734 8.554C26.734 3.89 22.952 0.108 18.288 0.108C13.624 0.108 9.842 3.89 9.842 8.554C9.842 13.218 13.624 17 18.288 17C18.9 17 19.498 16.934 20.074 16.81L20.018 16.82L21.302 19.152C17.932 21.782 15.786 25.842 15.786 30.406C15.786 31.616 15.938 32.792 16.222 33.914L16.2 33.816L14.866 34.382C13.306 32.574 11.012 31.434 8.452 31.434C3.784 31.434 0 35.218 0 39.886C0 44.554 3.784 48.338 8.452 48.338C13.12 48.338 16.904 44.554 16.904 39.886C16.904 39.87 16.904 39.852 16.904 39.836C16.888 39.518 16.858 39.224 16.812 38.936L16.818 38.984L18.152 38.418C20.758 42.47 25.246 45.116 30.352 45.116C33.758 45.116 36.888 43.938 39.358 41.968L39.328 41.99L44.732 46.9C44.216 47.952 43.912 49.188 43.904 50.494C43.904 55.188 47.71 58.996 52.404 58.996C57.098 58.996 60.904 55.19 60.904 50.496C60.904 45.802 57.098 41.996 52.404 41.996L52.406 42.002ZM14.786 8.502C14.786 6.57 16.354 5.002 18.286 5.002C20.218 5.002 21.786 6.57 21.786 8.502C21.786 10.434 20.218 12.002 18.286 12.002C16.354 12 14.788 10.434 14.786 8.502ZM8.406 43.342C6.474 43.34 4.91 41.776 4.91 39.844C4.91 37.912 6.476 36.346 8.408 36.346C10.34 36.346 11.904 37.91 11.906 39.842C11.904 41.774 10.338 43.34 8.406 43.342ZM52.406 5.002C54.338 5.002 55.906 6.57 55.906 8.502C55.906 10.434 54.338 12.002 52.406 12.002C50.474 12.002 48.906 10.434 48.906 8.502C48.908 6.57 50.474 5.004 52.406 5.002ZM20.786 30.502C20.786 30.5 20.786 30.498 20.786 30.496C20.786 25.186 25.09 20.882 30.4 20.882C33.056 20.882 35.46 21.96 37.2 23.7L37.202 23.702L37.204 23.704C38.944 25.444 40.018 27.848 40.018 30.502C40.018 35.814 35.712 40.118 30.402 40.118C25.092 40.118 20.786 35.812 20.786 30.502ZM52.406 54.002C50.474 54.002 48.906 52.434 48.906 50.502C48.906 48.57 50.474 47.002 52.406 47.002C54.338 47.002 55.906 48.57 55.906 50.502C55.904 52.434 54.338 54 52.406 54.002Z"
fill="currentColor"
/>
</svg>
),
github: ({ ...props }: LucideProps) => (
<svg
aria-hidden="true"
Expand Down

0 comments on commit 76e961a

Please sign in to comment.