feat: add basic webui
This commit is contained in:
118
apps/web/app/components/footer.tsx
Normal file
118
apps/web/app/components/footer.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { env } from '@konobangu/env';
|
||||
import { Status } from '@konobangu/observability/status';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const Footer = () => {
|
||||
const navigationItems = [
|
||||
{
|
||||
title: 'Home',
|
||||
href: '/',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: 'Pages',
|
||||
description: 'Managing a small business today is already tough.',
|
||||
items: [
|
||||
{
|
||||
title: 'Blog',
|
||||
href: '/blog',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Legal',
|
||||
description: 'We stay on top of the latest legal requirements.',
|
||||
items: [
|
||||
{
|
||||
title: 'Terms of Service',
|
||||
href: '/legal/terms',
|
||||
},
|
||||
{
|
||||
title: 'Privacy Policy',
|
||||
href: '/legal/privacy',
|
||||
},
|
||||
{
|
||||
title: 'Acceptable Use',
|
||||
href: '/legal/acceptable-use',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
if (env.NEXT_PUBLIC_DOCS_URL) {
|
||||
navigationItems.at(1)?.items?.push({
|
||||
title: 'Docs',
|
||||
href: env.NEXT_PUBLIC_DOCS_URL,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="dark border-foreground/10 border-t">
|
||||
<div className="w-full bg-background py-20 text-foreground lg:py-40">
|
||||
<div className="container mx-auto">
|
||||
<div className="grid items-center gap-10 lg:grid-cols-2">
|
||||
<div className="flex flex-col items-start gap-8">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="max-w-xl text-left font-regular text-3xl tracking-tighter md:text-5xl">
|
||||
next-forge
|
||||
</h2>
|
||||
<p className="max-w-lg text-left text-foreground/75 text-lg leading-relaxed tracking-tight">
|
||||
This is the start of something new.
|
||||
</p>
|
||||
</div>
|
||||
<Status />
|
||||
</div>
|
||||
<div className="grid items-start gap-10 lg:grid-cols-3">
|
||||
{navigationItems.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="flex flex-col items-start gap-1 text-base"
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
{item.href ? (
|
||||
<Link
|
||||
href={item.href}
|
||||
className="flex items-center justify-between"
|
||||
target={
|
||||
item.href.includes('http') ? '_blank' : undefined
|
||||
}
|
||||
rel={
|
||||
item.href.includes('http')
|
||||
? 'noopener noreferrer'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<span className="text-xl">{item.title}</span>
|
||||
</Link>
|
||||
) : (
|
||||
<p className="text-xl">{item.title}</p>
|
||||
)}
|
||||
{item.items?.map((subItem) => (
|
||||
<Link
|
||||
key={subItem.title}
|
||||
href={subItem.href}
|
||||
className="flex items-center justify-between"
|
||||
target={
|
||||
subItem.href.includes('http') ? '_blank' : undefined
|
||||
}
|
||||
rel={
|
||||
subItem.href.includes('http')
|
||||
? 'noopener noreferrer'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<span className="text-foreground/75">
|
||||
{subItem.title}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
195
apps/web/app/components/header/index.tsx
Normal file
195
apps/web/app/components/header/index.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
'use client';
|
||||
|
||||
import { ModeToggle } from '@konobangu/design-system/components/mode-toggle';
|
||||
import { Button } from '@konobangu/design-system/components/ui/button';
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
} from '@konobangu/design-system/components/ui/navigation-menu';
|
||||
import { env } from '@konobangu/env';
|
||||
import { Menu, MoveRight, X } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
|
||||
import Image from 'next/image';
|
||||
import Logo from './logo.svg';
|
||||
|
||||
export const Header = () => {
|
||||
const navigationItems = [
|
||||
{
|
||||
title: 'Home',
|
||||
href: '/',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: 'Product',
|
||||
description: 'Managing a small business today is already tough.',
|
||||
items: [
|
||||
{
|
||||
title: 'Pricing',
|
||||
href: '/pricing',
|
||||
},
|
||||
{
|
||||
title: 'Pricing',
|
||||
href: '/pricing',
|
||||
},
|
||||
{
|
||||
title: 'Pricing',
|
||||
href: '/pricing',
|
||||
},
|
||||
{
|
||||
title: 'Pricing',
|
||||
href: '/pricing',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Blog',
|
||||
href: '/blog',
|
||||
description: '',
|
||||
},
|
||||
];
|
||||
|
||||
if (env.NEXT_PUBLIC_DOCS_URL) {
|
||||
navigationItems.push({
|
||||
title: 'Docs',
|
||||
href: env.NEXT_PUBLIC_DOCS_URL,
|
||||
description: '',
|
||||
});
|
||||
}
|
||||
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
return (
|
||||
<header className="sticky top-0 left-0 z-40 w-full border-b bg-background">
|
||||
<div className="container relative mx-auto flex min-h-20 flex-row items-center gap-4 lg:grid lg:grid-cols-3">
|
||||
<div className="hidden flex-row items-center justify-start gap-4 lg:flex">
|
||||
<NavigationMenu className="flex items-start justify-start">
|
||||
<NavigationMenuList className="flex flex-row justify-start gap-4">
|
||||
{navigationItems.map((item) => (
|
||||
<NavigationMenuItem key={item.title}>
|
||||
{item.href ? (
|
||||
<>
|
||||
<NavigationMenuLink asChild>
|
||||
<Button variant="ghost" asChild>
|
||||
<Link href={item.href}>{item.title}</Link>
|
||||
</Button>
|
||||
</NavigationMenuLink>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<NavigationMenuTrigger className="font-medium text-sm">
|
||||
{item.title}
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent className="!w-[450px] p-4">
|
||||
<div className="flex grid-cols-2 flex-col gap-4 lg:grid">
|
||||
<div className="flex h-full flex-col justify-between">
|
||||
<div className="flex flex-col">
|
||||
<p className="text-base">{item.title}</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
<Button size="sm" className="mt-10" asChild>
|
||||
<Link href="/contact">Book a call today</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex h-full flex-col justify-end text-sm">
|
||||
{item.items?.map((subItem, idx) => (
|
||||
<NavigationMenuLink
|
||||
href={subItem.href}
|
||||
key={idx}
|
||||
className="flex flex-row items-center justify-between rounded px-4 py-2 hover:bg-muted"
|
||||
>
|
||||
<span>{subItem.title}</span>
|
||||
<MoveRight className="h-4 w-4 text-muted-foreground" />
|
||||
</NavigationMenuLink>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</NavigationMenuContent>
|
||||
</>
|
||||
)}
|
||||
</NavigationMenuItem>
|
||||
))}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 lg:justify-center">
|
||||
<Image
|
||||
src={Logo}
|
||||
alt="Logo"
|
||||
width={24}
|
||||
height={24}
|
||||
className="dark:invert"
|
||||
/>
|
||||
<p className="whitespace-nowrap font-semibold">next-forge</p>
|
||||
</div>
|
||||
<div className="flex w-full justify-end gap-4">
|
||||
<Button variant="ghost" className="hidden md:inline" asChild>
|
||||
<Link href="/contact">Contact us</Link>
|
||||
</Button>
|
||||
<div className="hidden border-r md:inline" />
|
||||
<div className="hidden md:inline">
|
||||
<ModeToggle />
|
||||
</div>
|
||||
<Button variant="outline" asChild className="hidden md:inline">
|
||||
<Link href={`${env.NEXT_PUBLIC_APP_URL}/sign-in`}>Sign in</Link>
|
||||
</Button>
|
||||
<Button asChild>
|
||||
<Link href={`${env.NEXT_PUBLIC_APP_URL}/sign-up`}>Get started</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex w-12 shrink items-end justify-end lg:hidden">
|
||||
<Button variant="ghost" onClick={() => setOpen(!isOpen)}>
|
||||
{isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||
</Button>
|
||||
{isOpen && (
|
||||
<div className="container absolute top-20 right-0 flex w-full flex-col gap-8 border-t bg-background py-4 shadow-lg">
|
||||
{navigationItems.map((item) => (
|
||||
<div key={item.title}>
|
||||
<div className="flex flex-col gap-2">
|
||||
{item.href ? (
|
||||
<Link
|
||||
href={item.href}
|
||||
className="flex items-center justify-between"
|
||||
target={
|
||||
item.href.startsWith('http') ? '_blank' : undefined
|
||||
}
|
||||
rel={
|
||||
item.href.startsWith('http')
|
||||
? 'noopener noreferrer'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<span className="text-lg">{item.title}</span>
|
||||
<MoveRight className="h-4 w-4 stroke-1 text-muted-foreground" />
|
||||
</Link>
|
||||
) : (
|
||||
<p className="text-lg">{item.title}</p>
|
||||
)}
|
||||
{item.items?.map((subItem) => (
|
||||
<Link
|
||||
key={subItem.title}
|
||||
href={subItem.href}
|
||||
className="flex items-center justify-between"
|
||||
>
|
||||
<span className="text-muted-foreground">
|
||||
{subItem.title}
|
||||
</span>
|
||||
<MoveRight className="h-4 w-4 stroke-1" />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
1
apps/web/app/components/header/logo.svg
Normal file
1
apps/web/app/components/header/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="96" viewBox="0 0 96 96" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h96v96h-96z"/></clipPath><g clip-path="url(#a)"><path clip-rule="evenodd" d="m48 0h-48l48 48h-48l48 48h48l-48-48h48z" fill="#000" fill-rule="evenodd"/></g></svg>
|
||||
|
After Width: | Height: | Size: 329 B |
Reference in New Issue
Block a user