feat: homepage

apps/web/src/app/(home)/gradient-bg.tsx

@@ -0,0 +1,122 @@
+import { ComponentProps } from 'react'
+
+export function GradientBg(props: ComponentProps<'svg'>) {
+  return (
+    <svg
+      width={1220}
+      height={1182}
+      viewBox="0 0 1220 1182"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g opacity={0.3}>
+        <g filter="url(#filter0_f_8_1018)">
+          <circle cx={610} cy={572} r={410} fill="url(#paint0_linear_8_1018)" />
+        </g>
+        <g filter="url(#filter1_f_8_1018)">
+          <circle cx={751} cy={413} r={300} fill="url(#paint1_linear_8_1018)" />
+        </g>
+        <rect
+          width="1220"
+          height="1182"
+          fill="#fff"
+          filter="url(#nnnoise-filter)"
+        ></rect>
+      </g>
+      <defs>
+        <filter
+          id="nnnoise-filter"
+          x="-20%"
+          y="-20%"
+          width="140%"
+          height="140%"
+          filterUnits="objectBoundingBox"
+          primitiveUnits="userSpaceOnUse"
+          color-interpolation-filters="linearRGB"
+        >
+          <feTurbulence
+            type="fractalNoise"
+            baseFrequency="0.102"
+            numOctaves="4"
+            seed="15"
+            stitchTiles="stitch"
+            x="0%"
+            y="0%"
+            width="100%"
+            height="100%"
+            result="turbulence"
+          ></feTurbulence>
+          <feSpecularLighting
+            surfaceScale="15"
+            specularConstant="0.75"
+            specularExponent="20"
+            lighting-color="#989898"
+            x="0%"
+            y="0%"
+            width="100%"
+            height="100%"
+            in="turbulence"
+            result="specularLighting"
+          >
+            <feDistantLight azimuth="3" elevation="100"></feDistantLight>
+          </feSpecularLighting>
+        </filter>
+        <filter
+          id="filter0_f_8_1018"
+          x={0}
+          y={-38}
+          width={1220}
+          height={1220}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur
+            stdDeviation={100}
+            result="effect1_foregroundBlur_8_1018"
+          />
+        </filter>
+        <filter
+          id="filter1_f_8_1018"
+          x={351}
+          y={13}
+          width={800}
+          height={800}
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity={0} result="BackgroundImageFix" />
+          <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur
+            stdDeviation={50}
+            result="effect1_foregroundBlur_8_1018"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_8_1018"
+          x1={610}
+          y1={162}
+          x2={610}
+          y2={982}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#38BFF3" />
+          <stop offset={1} />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_8_1018"
+          x1={751}
+          y1={113}
+          x2={751}
+          y2={713}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#2ED3C3" />
+          <stop offset={1} />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}

apps/web/src/app/(home)/page.tsx

@@ -0,0 +1,67 @@
+import { ArrowRight } from 'lucide-react'
+import { Merriweather } from 'next/font/google'
+import Image from 'next/image'
+import { twMerge } from 'tailwind-merge'
+
+import nivoIcon from '@/assets/nivo-icon.svg'
+import { Button } from '@/components/ui/button'
+
+import { GradientBg } from './gradient-bg'
+
+const merriWeather = Merriweather({
+  weight: ['700'],
+  subsets: ['latin'],
+})
+
+export default function Homepage() {
+  return (
+    <div className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-zinc-950 selection:bg-teal-400/30 selection:text-white">
+      <div className="z-20 mx-auto max-w-[1280px] px-6">
+        <div className="flex flex-col items-center gap-16">
+          <Image
+            src={nivoIcon}
+            alt="nivo.video"
+            className="size-10"
+            width={40}
+            height={40}
+          />
+
+          <div className="flex flex-col items-center gap-4">
+            <h1
+              className={twMerge(
+                merriWeather.className,
+                'bg-gradient-to-br from-teal-400 to-sky-400 bg-clip-text text-6xl font-bold leading-snug text-transparent',
+              )}
+            >
+              Redefining video content
+            </h1>
+            <p className="max-w-2xl text-center text-xl leading-relaxed text-zinc-100">
+              Nivo offers a{' '}
+              <strong>
+                comprehensive video solution tailored for online content
+                creators
+              </strong>
+              , emphasizing seamless developer integration, transparent pricing,
+              and exceptional user experience.
+            </p>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <Button
+              asChild
+              className="bg-teal-400 text-teal-950 hover:bg-teal-500 dark:bg-teal-400 dark:text-teal-950 dark:hover:bg-teal-500"
+              size="lg"
+            >
+              <a href="https://tally.so/r/wa6LdW" target="_blank">
+                Request BETA access
+                <ArrowRight className="ml-2 size-4" />
+              </a>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <GradientBg className="absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 opacity-30" />
+    </div>
+  )
+}

apps/web/src/components/header/theme-switcher.tsx

@@ -12,13 +12,13 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 
-export function ThemeSwitcher() {
+export function ThemeSwitcher(props: React.ComponentProps<typeof Button>) {
   const { setTheme } = useTheme()
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" {...props}>
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>