feat: add basic webui

apps/web/app/contact/actions/contact.tsx

@@ -0,0 +1,48 @@
+'use server';
+
+import { konosend } from '@konobangu/email';
+import { ContactTemplate } from '@konobangu/email/templates/contact';
+import { env } from '@konobangu/env';
+import { parseError } from '@konobangu/observability/error';
+import { createRateLimiter, slidingWindow } from '@konobangu/rate-limit';
+import { headers } from 'next/headers';
+
+export const contact = async (
+  name: string,
+  email: string,
+  message: string
+): Promise<{
+  error?: string;
+}> => {
+  try {
+    if (env.UPSTASH_REDIS_REST_URL && env.UPSTASH_REDIS_REST_TOKEN) {
+      const rateLimiter = createRateLimiter({
+        limiter: slidingWindow(1, '1d'),
+      });
+      const head = await headers();
+      const ip = head.get('x-forwarded-for');
+
+      const { success } = await rateLimiter.limit(`contact_form_${ip}`);
+
+      if (!success) {
+        throw new Error(
+          'You have reached your request limit. Please try again later.'
+        );
+      }
+    }
+
+    await konosend.emails.send({
+      from: env.RESEND_FROM,
+      to: env.RESEND_FROM,
+      subject: 'Contact form submission',
+      replyTo: email,
+      react: <ContactTemplate name={name} email={email} message={message} />,
+    });
+
+    return {};
+  } catch (error) {
+    const errorMessage = parseError(error);
+
+    return { error: errorMessage };
+  }
+};

apps/web/app/contact/components/contact-form.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { Button } from '@konobangu/design-system/components/ui/button';
+import { Calendar } from '@konobangu/design-system/components/ui/calendar';
+import { Input } from '@konobangu/design-system/components/ui/input';
+import { Label } from '@konobangu/design-system/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@konobangu/design-system/components/ui/popover';
+import { cn } from '@konobangu/design-system/lib/utils';
+import { format } from 'date-fns';
+import { CalendarIcon, Check, MoveRight } from 'lucide-react';
+import { useState } from 'react';
+
+export const ContactForm = () => {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+
+  return (
+    <div className="w-full py-20 lg:py-40">
+      <div className="container mx-auto max-w-6xl">
+        <div className="grid gap-10 lg:grid-cols-2">
+          <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
+                <h4 className="max-w-xl text-left font-regular text-3xl tracking-tighter md:text-5xl">
+                  Something new
+                </h4>
+                <p className="max-w-sm text-left text-lg text-muted-foreground leading-relaxed tracking-tight">
+                  Managing a small business today is already tough. Avoid
+                  further complications by ditching outdated, tedious trade
+                  methods.
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-row items-start gap-6 text-left">
+              <Check className="mt-2 h-4 w-4 text-primary" />
+              <div className="flex flex-col gap-1">
+                <p>Easy to use</p>
+                <p className="text-muted-foreground text-sm">
+                  We&apos;ve made it easy to use and understand.
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-row items-start gap-6 text-left">
+              <Check className="mt-2 h-4 w-4 text-primary" />
+              <div className="flex flex-col gap-1">
+                <p>Fast and reliable</p>
+                <p className="text-muted-foreground text-sm">
+                  We&apos;ve made it easy to use and understand.
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-row items-start gap-6 text-left">
+              <Check className="mt-2 h-4 w-4 text-primary" />
+              <div className="flex flex-col gap-1">
+                <p>Beautiful and modern</p>
+                <p className="text-muted-foreground text-sm">
+                  We&apos;ve made it easy to use and understand.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-center">
+            <div className="flex max-w-sm flex-col gap-4 rounded-md border p-8">
+              <p>Book a meeting</p>
+              <div className="grid w-full max-w-sm items-center gap-1">
+                <Label htmlFor="picture">Date</Label>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      className={cn(
+                        'w-full max-w-sm justify-start text-left font-normal',
+                        !date && 'text-muted-foreground'
+                      )}
+                    >
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {date ? format(date, 'PPP') : <span>Pick a date</span>}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0">
+                    <Calendar
+                      mode="single"
+                      selected={date}
+                      onSelect={setDate}
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+              <div className="grid w-full max-w-sm items-center gap-1">
+                <Label htmlFor="firstname">First name</Label>
+                <Input id="firstname" type="text" />
+              </div>
+              <div className="grid w-full max-w-sm items-center gap-1">
+                <Label htmlFor="lastname">Last name</Label>
+                <Input id="lastname" type="text" />
+              </div>
+              <div className="grid w-full max-w-sm items-center gap-1">
+                <Label htmlFor="picture">Upload resume</Label>
+                <Input id="picture" type="file" />
+              </div>
+
+              <Button className="w-full gap-4">
+                Book the meeting <MoveRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/app/contact/page.tsx

@@ -0,0 +1,16 @@
+import { createMetadata } from '@konobangu/seo/metadata';
+import type { Metadata } from 'next';
+import { ContactForm } from './components/contact-form';
+
+const title = 'Contact';
+const description =
+  "Let us know what's on your mind. We'll get back to you as soon as possible.";
+
+export const metadata: Metadata = createMetadata({
+  title,
+  description,
+});
+
+const Contact = () => <ContactForm />;
+
+export default Contact;