init

2025-11-21 13:36:06 +08:00
commit 7cd50654ed
112 changed files with 14246 additions and 0 deletions
--- a/components/BuiltWithButton.tsx
+++ b/components/BuiltWithButton.tsx
@@ -0,0 +1,44 @@
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+// Nexty.dev Affiliate Link: https://affiliates.nexty.dev/
+// sign up and use your affiliate link on BuiltWithButton to earn money
+
+export default function BuiltWithButton() {
+  return (
+    <Link
+      href="https://nexty.dev"
+      title="Built with Nexty.dev"
+      prefetch={false}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={cn(
+        buttonVariants({ variant: "outline", size: "sm" }),
+        "px-4 rounded-md bg-transparent border-gray-500 hover:bg-gray-950 text-white hover:text-gray-100"
+      )}
+    >
+      <span>Built with</span>
+      <span>
+        <LogoNexty className="size-4 rounded-full" />
+      </span>
+      <span className="font-bold text-base-content flex gap-0.5 items-center tracking-tight">
+        Nexty.dev
+      </span>
+    </Link>
+  );
+}
+
+function LogoNexty({ className }: { className?: string }) {
+  return (
+    <img
+      src="/logo_nexty.png"
+      alt="Logo"
+      title="Logo"
+      loading="lazy"
+      width={96}
+      height={96}
+      className={cn("size-8 rounded-md", className)}
+    />
+  );
+}
--- a/components/LanguageDetectionAlert.tsx
+++ b/components/LanguageDetectionAlert.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Link as I18nLink, LOCALE_NAMES, routing } from "@/i18n/routing";
+import { cn } from "@/lib/utils";
+import { useLocaleStore } from "@/stores/localeStore";
+import { ArrowRight, Globe, X } from "lucide-react";
+import { useLocale } from "next-intl";
+import { useCallback, useEffect, useState } from "react";
+
+export function LanguageDetectionAlert() {
+  const [countdown, setCountdown] = useState(10); // countdown 10s and dismiss
+  const [isVisible, setIsVisible] = useState(false);
+  const locale = useLocale();
+  const [detectedLocale, setDetectedLocale] = useState<string | null>(null);
+  const {
+    showLanguageAlert,
+    setShowLanguageAlert,
+    dismissLanguageAlert,
+    getLangAlertDismissed,
+  } = useLocaleStore();
+
+  const handleDismiss = useCallback(() => {
+    setIsVisible(false);
+    setTimeout(() => {
+      dismissLanguageAlert();
+    }, 300);
+  }, [dismissLanguageAlert]);
+
+  const handleSwitchLanguage = useCallback(() => {
+    dismissLanguageAlert();
+  }, [dismissLanguageAlert]);
+
+  useEffect(() => {
+    const detectedLang = navigator.language; // Get full language code, e.g., zh_HK
+    const storedDismiss = getLangAlertDismissed();
+
+    if (!storedDismiss) {
+      let supportedLang = routing.locales.find((l) => l === detectedLang);
+
+      if (!supportedLang) {
+        const mainLang = detectedLang.split("-")[0];
+        supportedLang = routing.locales.find((l) => l.startsWith(mainLang));
+      }
+
+      if (supportedLang && supportedLang !== locale) {
+        setDetectedLocale(supportedLang);
+        setShowLanguageAlert(true);
+        setTimeout(() => setIsVisible(true), 100);
+      }
+    }
+  }, [locale, getLangAlertDismissed, setShowLanguageAlert]);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+
+    if (showLanguageAlert && countdown > 0) {
+      timer = setInterval(() => {
+        setCountdown((prev) => prev - 1);
+      }, 1000);
+    }
+
+    return () => {
+      if (timer) clearInterval(timer);
+    };
+  }, [showLanguageAlert, countdown]);
+
+  useEffect(() => {
+    if (countdown === 0 && showLanguageAlert) {
+      handleDismiss();
+    }
+  }, [countdown, showLanguageAlert, handleDismiss]);
+
+  if (!showLanguageAlert || !detectedLocale) return null;
+
+  const messages = require(`@/i18n/messages/${detectedLocale}.json`);
+  const alertMessages = messages.LanguageDetection;
+
+  return (
+    <div
+      className={cn(
+        "fixed top-16 right-4 z-50 max-w-sm w-full mx-4 sm:mx-0 sm:w-96",
+        "transform transition-all duration-300 ease-in-out",
+        isVisible
+          ? "translate-x-0 translate-y-0 opacity-100"
+          : "translate-x-full opacity-0"
+      )}
+      role="banner"
+      aria-live="polite"
+      aria-label="Language detection alert"
+    >
+      <div className="bg-background/95 backdrop-blur-md border border-border rounded-xl shadow-lg p-4 relative">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute right-2 top-2 h-6 w-6 opacity-50 hover:opacity-100"
+          onClick={handleDismiss}
+          aria-label="Dismiss language suggestion"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+
+        <div className="pr-8">
+          <div className="flex items-center gap-2 mb-3">
+            <Globe className="h-4 w-4 text-primary" />
+            <h3 className="font-medium text-sm text-foreground">
+              {alertMessages.title}
+            </h3>
+          </div>
+
+          <p className="text-xs text-muted-foreground mb-4 leading-relaxed">
+            {alertMessages.description}
+          </p>
+
+          <div className="flex items-center justify-between">
+            <Button asChild onClick={handleSwitchLanguage}>
+              <I18nLink
+                href="/"
+                title={`${alertMessages.switchTo} ${LOCALE_NAMES[detectedLocale]}`}
+                locale={detectedLocale as any}
+                className={cn(
+                  "flex items-center gap-2 px-3 py-2 rounded-lg",
+                  "bg-primary text-primary-foreground hover:bg-primary/90",
+                  "text-sm font-medium transition-colors",
+                  "group focus:outline-none focus:ring-2 focus:ring-primary/50"
+                )}
+                aria-label={`${alertMessages.switchTo} ${LOCALE_NAMES[detectedLocale]}`}
+              >
+                <span>
+                  {alertMessages.switchTo} {LOCALE_NAMES[detectedLocale]}
+                </span>
+                <ArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
+              </I18nLink>
+            </Button>
+
+            <span className="text-xs text-muted-foreground">{countdown}s</span>
+          </div>
+        </div>
+
+        <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-primary/10 to-transparent pointer-events-none opacity-50" />
+      </div>
+    </div>
+  );
+}
--- a/components/LocaleSwitcher.tsx
+++ b/components/LocaleSwitcher.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Locale,
+  LOCALE_NAMES,
+  routing,
+  usePathname,
+  useRouter,
+} from "@/i18n/routing";
+import { useLocaleStore } from "@/stores/localeStore";
+import { Globe } from "lucide-react";
+import { useLocale } from "next-intl";
+import { useParams } from "next/navigation";
+import { useEffect, useState, useTransition } from "react";
+
+export default function LocaleSwitcher() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useParams();
+  const locale = useLocale();
+  const { dismissLanguageAlert } = useLocaleStore();
+  const [, startTransition] = useTransition();
+  const [currentLocale, setCurrentLocale] = useState("locale");
+
+  useEffect(() => {
+    setCurrentLocale(locale);
+  }, [locale, setCurrentLocale]);
+
+  function onSelectChange(nextLocale: Locale) {
+    setCurrentLocale(nextLocale);
+    dismissLanguageAlert();
+
+    startTransition(() => {
+      router.replace(
+        // @ts-expect-error -- TypeScript will validate that only known `params`
+        // are used in combination with a given `pathname`. Since the two will
+        // always match for the current route, we can skip runtime checks.
+        // { pathname: "/", params: params || {} }, // if your want to redirect to the home page
+        { pathname, params: params || {} }, // if your want to redirect to the current page
+        { locale: nextLocale }
+      );
+    });
+  }
+
+  return (
+    <Select
+      defaultValue={locale}
+      value={currentLocale}
+      onValueChange={onSelectChange}
+    >
+      <SelectTrigger className="w-fit">
+        <Globe className="w-4 h-4 mr-1" />
+        <SelectValue placeholder="Language" />
+      </SelectTrigger>
+      <SelectContent>
+        {routing.locales.map((cur) => (
+          <SelectItem key={cur} value={cur}>
+            {LOCALE_NAMES[cur]}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
--- a/components/TailwindIndicator.tsx
+++ b/components/TailwindIndicator.tsx
@@ -0,0 +1,14 @@
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === "production") return null
+
+  return (
+    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+      <div className="sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden">sm</div>
+      <div className="hidden md:block lg:hidden">md</div>
+      <div className="hidden lg:block xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  )
+}
--- a/components/ThemeToggle.tsx
+++ b/components/ThemeToggle.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <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>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/components/WebsiteLogo.tsx
+++ b/components/WebsiteLogo.tsx
@@ -0,0 +1,108 @@
+"use client";
+import { getDomain } from "@/lib/utils";
+import { useEffect, useState } from "react";
+
+interface IProps {
+  url: string;
+  size?: number;
+  className?: string;
+  timeout?: number;
+}
+
+const WebsiteLogo = ({
+  url,
+  size = 32,
+  className = "",
+  timeout = 1000, // 1 second
+}: IProps) => {
+  const domain = getDomain(url);
+  const [imgSrc, setImgSrc] = useState(`https://${domain}/logo.svg`);
+  const [fallbackIndex, setFallbackIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  const fallbackSources = [
+    `https://${domain}/logo.svg`,
+    `https://${domain}/logo.png`,
+    `https://${domain}/apple-touch-icon.png`,
+    `https://${domain}/apple-touch-icon-precomposed.png`,
+    `https://www.google.com/s2/favicons?domain=${domain}&sz=64`,
+    `https://icons.duckduckgo.com/ip3/${domain}.ico`,
+    `https://${domain}/favicon.ico`,
+  ];
+
+  useEffect(() => {
+    let timeoutId: any;
+
+    if (isLoading) {
+      timeoutId = setTimeout(() => {
+        handleError();
+      }, timeout);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [imgSrc, isLoading]);
+
+  const handleError = () => {
+    const nextIndex = fallbackIndex + 1;
+    if (nextIndex < fallbackSources.length) {
+      setFallbackIndex(nextIndex);
+      setImgSrc(fallbackSources[nextIndex]);
+      setIsLoading(true);
+    } else {
+      setHasError(true);
+      setIsLoading(false);
+    }
+  };
+
+  const handleLoad = () => {
+    setIsLoading(false);
+    setHasError(false);
+  };
+
+  return (
+    <div
+      className={`relative inline-block ${className}`}
+      style={{ width: size, height: size }}
+    >
+      {/* placeholder */}
+      {isLoading && (
+        <div className="absolute inset-0 animate-pulse">
+          <div className="w-full h-full rounded-md bg-gray-200/60" />
+        </div>
+      )}
+
+      <img
+        src={imgSrc}
+        alt={`${domain} logo`}
+        width={size}
+        height={size}
+        onError={handleError}
+        onLoad={handleLoad}
+        className={`inline-block transition-opacity duration-300 ${
+          isLoading ? "opacity-0" : "opacity-100"
+        }`}
+        style={{
+          objectFit: "contain",
+          display: hasError ? "none" : "inline-block",
+        }}
+      />
+
+      {/* Fallback: Display first letter of domain when all image sources fail */}
+      {hasError && (
+        <div
+          className="w-full h-full flex items-center justify-center bg-gray-100 rounded-md"
+          style={{ fontSize: `${size * 0.5}px` }}
+        >
+          {domain.charAt(0).toUpperCase()}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WebsiteLogo;
--- a/components/footer/Badges.tsx
+++ b/components/footer/Badges.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+export default function Badges() {
+  return (
+    <div className="py-6 flex justify-center w-full flex-wrap gap-2">
+      <a
+        href="https://dofollow.tools"
+        title="Featured on Dofollow.Tools"
+        target="_blank"
+      >
+        <img
+          src="https://dofollow.tools/badge/badge_light.svg"
+          alt="Featured on Dofollow.Tools"
+          width="200"
+          height="54"
+        />
+      </a>
+    </div>
+  );
+}
--- a/components/footer/Footer.tsx
+++ b/components/footer/Footer.tsx
@@ -0,0 +1,188 @@
+import BuiltWithButton from "@/components/BuiltWithButton";
+import { TwitterX } from "@/components/social-icons/icons";
+import { siteConfig } from "@/config/site";
+import { Link as I18nLink } from "@/i18n/routing";
+import { FooterLink } from "@/types/common";
+import { GithubIcon, MailIcon } from "lucide-react";
+import { getMessages, getTranslations } from "next-intl/server";
+import Link from "next/link";
+import { SiBluesky, SiDiscord } from "react-icons/si";
+
+export default async function Footer() {
+  const messages = await getMessages();
+
+  const t = await getTranslations("Home");
+  const tFooter = await getTranslations("Footer");
+
+  const footerLinks: FooterLink[] = tFooter.raw("Links.groups");
+  footerLinks.forEach((group) => {
+    const pricingLink = group.links.find((link) => link.id === "pricing");
+    if (pricingLink) {
+      pricingLink.href = process.env.NEXT_PUBLIC_PRICING_PATH!;
+    }
+  });
+
+  return (
+    <div className="bg-gray-900 text-gray-300">
+      <footer className="py-2 border-t border-gray-700">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-8 py-12 lg:grid-cols-6">
+            <div className="w-full flex flex-col sm:flex-row lg:flex-col gap-4 col-span-full md:col-span-2">
+              <div className="space-y-4 flex-1">
+                <div className="items-center space-x-2 flex">
+                  <h2 className="highlight-text text-2xl font-bold">
+                    {t("title")}
+                  </h2>
+                </div>
+
+                <p className="text-sm p4-4 md:pr-12">{t("tagLine")}</p>
+
+                <div className="flex items-center gap-2">
+                  {siteConfig.socialLinks?.github && (
+                    <Link
+                      href={siteConfig.socialLinks.github}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="GitHub"
+                      title="View on GitHub"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <GithubIcon className="size-4" aria-hidden="true" />
+                    </Link>
+                  )}
+                  {siteConfig.socialLinks?.discord && (
+                    <Link
+                      href={siteConfig.socialLinks.discord}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="Discord"
+                      title="Join Discord"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <SiDiscord className="w-4 h-4" aria-hidden="true" />
+                    </Link>
+                  )}
+                  {siteConfig.socialLinks?.twitter && (
+                    <Link
+                      href={siteConfig.socialLinks.twitter}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="Twitter"
+                      title="View on Twitter"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <TwitterX className="w-4 h-4" aria-hidden="true" />
+                    </Link>
+                  )}
+                  {siteConfig.socialLinks?.bluesky && (
+                    <Link
+                      href={siteConfig.socialLinks.bluesky}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="Blue Sky"
+                      title="View on Bluesky"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <SiBluesky className="w-4 h-4" aria-hidden="true" />
+                    </Link>
+                  )}
+                  {siteConfig.socialLinks?.email && (
+                    <Link
+                      href={`mailto:${siteConfig.socialLinks.email}`}
+                      prefetch={false}
+                      target="_blank"
+                      rel="noreferrer nofollow noopener"
+                      aria-label="Email"
+                      title="Email"
+                      className="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
+                    >
+                      <MailIcon className="w-4 h-4" />
+                    </Link>
+                  )}
+                </div>
+
+                <BuiltWithButton />
+              </div>
+            </div>
+
+            {footerLinks.map((section) => (
+              <div key={section.title} className="flex-1">
+                <h3 className="text-white text-lg font-semibold mb-4">
+                  {section.title}
+                </h3>
+                <ul className="space-y-2 text-sm">
+                  {section.links.map((link) => (
+                    <li key={link.href}>
+                      {link.href.startsWith("/") && !link.useA ? (
+                        <I18nLink
+                          href={link.href}
+                          title={link.name}
+                          prefetch={false}
+                          className="hover:text-white transition-colors"
+                          target={link.target || ""}
+                          rel={link.rel || ""}
+                        >
+                          {link.name}
+                        </I18nLink>
+                      ) : (
+                        <Link
+                          href={link.href}
+                          title={link.name}
+                          prefetch={false}
+                          className="hover:text-white transition-colors"
+                          target={link.target || ""}
+                          rel={link.rel || ""}
+                        >
+                          {link.name}
+                        </Link>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+
+            {/* {messages.Footer.Newsletter && (
+              <div className="w-full flex-1">
+                <Newsletter />
+              </div>
+            )} */}
+          </div>
+
+          <div className="border-t border-gray-800 py-6 flex flex-col md:flex-row justify-between items-center">
+            <p className="text-gray-400 text-sm">
+              {tFooter("Copyright", {
+                year: new Date().getFullYear(),
+                name: siteConfig.name,
+              })}
+            </p>
+            <div className="flex space-x-6 mt-4 md:mt-0">
+              <I18nLink
+                href="/privacy-policy"
+                title={tFooter("PrivacyPolicy")}
+                prefetch={false}
+                className="text-gray-400 hover:text-white text-sm"
+              >
+                {tFooter("PrivacyPolicy")}
+              </I18nLink>
+              <I18nLink
+                href="/terms-of-service"
+                title={tFooter("TermsOfService")}
+                prefetch={false}
+                className="text-gray-400 hover:text-white text-sm"
+              >
+                {tFooter("TermsOfService")}
+              </I18nLink>
+            </div>
+          </div>
+        </div>
+
+        {/* <Badges /> */}
+      </footer>
+    </div>
+  );
+}
--- a/components/footer/Newsletter.tsx
+++ b/components/footer/Newsletter.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { normalizeEmail, validateEmail } from "@/lib/email";
+import { Send } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+export function Newsletter() {
+  const [email, setEmail] = useState("");
+  const [subscribeStatus, setSubscribeStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const t = useTranslations("Footer.Newsletter");
+
+  const handleSubscribe = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) return;
+
+    const normalizedEmailAddress = normalizeEmail(email);
+    const { isValid, error } = validateEmail(normalizedEmailAddress);
+
+    if (!isValid) {
+      setSubscribeStatus("error");
+      setErrorMessage(error || t("defaultErrorMessage"));
+      setTimeout(() => setSubscribeStatus("idle"), 5000);
+      return;
+    }
+
+    try {
+      setSubscribeStatus("loading");
+
+      const response = await fetch("/api/newsletter", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: normalizedEmailAddress }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || t("errorMessage"));
+      }
+
+      setSubscribeStatus("success");
+      setEmail("");
+      setErrorMessage("");
+      setTimeout(() => setSubscribeStatus("idle"), 5000);
+    } catch (error) {
+      setSubscribeStatus("error");
+      setErrorMessage(
+        error instanceof Error ? error.message : t("errorMessage2")
+      );
+      setTimeout(() => setSubscribeStatus("idle"), 5000);
+    }
+  };
+  return (
+    <div className="">
+      <h4 className="mb-3 font-semibold">{t("title")}</h4>
+      <p className="text-sm mb-3">{t("description")}</p>
+      <form onSubmit={handleSubscribe} className="flex flex-col gap-2 max-w-64">
+        <div className="relative">
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="your@email.com"
+            required
+            className="w-full px-3 py-2 bg-gray-200 text-black text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+            disabled={subscribeStatus === "loading"}
+          />
+        </div>
+        <Button type="submit" disabled={subscribeStatus === "loading"}>
+          {subscribeStatus === "loading" ? (
+            t("subscribing")
+          ) : (
+            <>
+              {t("subscribe")} <Send className="w-3.5 h-3.5" />
+            </>
+          )}
+        </Button>
+        {subscribeStatus === "success" && (
+          <p className="text-xs text-green-600 mt-1">{t("subscribed")}</p>
+        )}
+        {subscribeStatus === "error" && (
+          <p className="text-xs text-red-600 mt-1">{errorMessage}</p>
+        )}
+      </form>
+    </div>
+  );
+}
--- a/components/header/Header.tsx
+++ b/components/header/Header.tsx
@@ -0,0 +1,51 @@
+import HeaderLinks from "@/components/header/HeaderLinks";
+import MobileMenu from "@/components/header/MobileMenu";
+import LocaleSwitcher from "@/components/LocaleSwitcher";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import { siteConfig } from "@/config/site";
+import { Link as I18nLink } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+
+const Header = () => {
+  const t = useTranslations("Home");
+
+  return (
+    <header className="py-2 px-6 backdrop-blur-md sticky top-0 z-50">
+      <nav className="flex justify-between items-center w-full mx-auto">
+        <div className="flex items-center space-x-6 md:space-x-12">
+          <I18nLink
+            href="/"
+            prefetch={false}
+            className="flex items-center space-x-1 font-bold"
+          >
+            <Image
+              alt={siteConfig.name}
+              src="/logo.svg"
+              className="w-6 h-6"
+              width={32}
+              height={32}
+            />
+            <span className="text-gray-800 dark:text-gray-200">
+              {t("title")}
+            </span>
+          </I18nLink>
+          <HeaderLinks />
+        </div>
+
+        <div className="flex items-center gap-x-2 md:gap-x-4 lg:gap-x-6 flex-1 justify-end">
+          {/* PC */}
+          <div className="hidden md:flex items-center gap-x-4">
+            <LocaleSwitcher />
+            <ThemeToggle />
+          </div>
+
+          {/* Mobile */}
+          <MobileMenu />
+        </div>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
--- a/components/header/HeaderLinks.tsx
+++ b/components/header/HeaderLinks.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { Link as I18nLink, usePathname } from "@/i18n/routing";
+import { cn } from "@/lib/utils";
+import { HeaderLink } from "@/types/common";
+import { ExternalLink } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+const HeaderLinks = () => {
+  const tHeader = useTranslations("Header");
+  const pathname = usePathname();
+
+  const headerLinks: HeaderLink[] = tHeader.raw("links");
+
+  return (
+    <div className="hidden md:flex flex-row items-center gap-x-2 text-sm font-medium text-muted-500">
+      {headerLinks.map((link) => (
+        <I18nLink
+          key={link.name}
+          href={link.href}
+          title={link.name}
+          prefetch={link.target && link.target === "_blank" ? false : true}
+          target={link.target || "_self"}
+          rel={link.rel || undefined}
+          className={cn(
+            "rounded-xl px-4 py-2 flex items-center gap-x-1 hover:bg-accent-foreground/10 hover:text-accent-foreground",
+            pathname === link.href && "font-semibold text-accent-foreground"
+          )}
+        >
+          {link.name}
+          {link.target && link.target === "_blank" && (
+            <span className="text-xs">
+              <ExternalLink className="w-4 h-4" />
+            </span>
+          )}
+        </I18nLink>
+      ))}
+    </div>
+  );
+};
+
+export default HeaderLinks;
--- a/components/header/MobileMenu.tsx
+++ b/components/header/MobileMenu.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import LocaleSwitcher from "@/components/LocaleSwitcher";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Link as I18nLink } from "@/i18n/routing";
+import { HeaderLink } from "@/types/common";
+import { Menu } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+
+export default function MobileMenu() {
+  const t = useTranslations("Home");
+  const tHeader = useTranslations("Header");
+
+  const headerLinks: HeaderLink[] = tHeader.raw("links");
+
+  return (
+    <div className="flex items-center gap-1 md:hidden">
+      <LocaleSwitcher />
+      <ThemeToggle />
+      <DropdownMenu>
+        <DropdownMenuTrigger className="p-2">
+          <Menu className="h-5 w-5" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-64">
+          <DropdownMenuLabel>
+            <I18nLink
+              href="/"
+              title={t("title")}
+              prefetch={true}
+              className="flex items-center space-x-1 font-bold"
+            >
+              <Image
+                alt={t("title")}
+                src="/logo.svg"
+                className="w-6 h-6"
+                width={32}
+                height={32}
+              />
+              <span className="highlight-text">{t("title")}</span>
+            </I18nLink>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            {headerLinks.map((link) => (
+              <DropdownMenuItem key={link.name}>
+                <I18nLink
+                  href={link.href}
+                  title={link.name}
+                  prefetch={
+                    link.target && link.target === "_blank" ? false : true
+                  }
+                  target={link.target || "_self"}
+                  rel={link.rel || undefined}
+                >
+                  {link.name}
+                </I18nLink>
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
--- a/components/home/index.tsx
+++ b/components/home/index.tsx
@@ -0,0 +1,76 @@
+'use client'
+import { Button } from "@/components/ui/button";
+import { siteConfig } from "@/config/site";
+import { MousePointerClick } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { SiDiscord } from "react-icons/si";
+
+export default function HomeComponent() {
+  const t = useTranslations("Home");
+
+  return (
+    <>
+      <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-16 pt-24 text-center">
+        <h1 className="mx-auto max-w-4xl font-display text-5xl font-bold tracking-tight text-slate-900 sm:text-7xl dark:text-gray-200">
+          Next.js{" "}
+          <span className="relative whitespace-nowrap text-blue-600">
+            <svg
+              aria-hidden="true"
+              viewBox="0 0 418 42"
+              className="absolute left-0 top-2/3 h-[0.58em] w-full fill-blue-300/70"
+              preserveAspectRatio="none"
+            >
+              <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path>
+            </svg>
+            <span className="relative"> i18n </span>{" "}
+          </span>
+          Starter
+        </h1>
+        <p className="mx-auto mt-6 max-w-2xl text-2xl tracking-tight text-slate-700 dark:text-slate-500">
+          {t("description")}
+        </p>
+
+        <div className="mt-10 flex items-center justify-center gap-2">
+          <Button
+            className="h-11 rounded-xl px-8 py-2 bg-white text-indigo-500 hover:text-indigo-600 border-2 border-indigo-500"
+            variant="outline"
+            asChild
+          >
+            <Link
+              href="https://nexty.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Get SaaS Version - Nexty.dev"
+              prefetch={false}
+              className="flex items-center gap-2"
+            >
+              <MousePointerClick className="w-4 h-4 text-indigo-500" />
+              Get SaaS Version
+            </Link>
+          </Button>
+          <Button
+            className="h-11 rounded-xl px-8 py-2 bg-white text-indigo-500 hover:text-indigo-600 border-2 border-indigo-500"
+            variant="outline"
+            asChild
+          >
+            <Link
+              href={
+                siteConfig.socialLinks?.discord ||
+                "https://discord.com/invite/R7bUxWKRqZ"
+              }
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              title="Join Discord"
+              prefetch={false}
+              className="flex items-center gap-2"
+            >
+              <SiDiscord className="w-4 h-4 text-indigo-500" />
+              Join Discord
+            </Link>
+          </Button>
+        </div>
+      </section>
+    </>
+  );
+}
--- a/components/icons/expanding-arrow.tsx
+++ b/components/icons/expanding-arrow.tsx
@@ -0,0 +1,36 @@
+export default function ExpandingArrow({ className }: { className?: string }) {
+  return (
+    <div className="group relative flex items-center">
+      <svg
+        className={`${
+          className ? className : "h-4 w-4"
+        } absolute transition-all group-hover:translate-x-1 group-hover:opacity-0`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path
+          fillRule="evenodd"
+          d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
+        ></path>
+      </svg>
+      <svg
+        className={`${
+          className ? className : "h-4 w-4"
+        } absolute opacity-0 transition-all group-hover:translate-x-1 group-hover:opacity-100`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+        width="16"
+        height="16"
+      >
+        <path
+          fillRule="evenodd"
+          d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z"
+        ></path>
+      </svg>
+    </div>
+  );
+}
--- a/components/icons/eye.tsx
+++ b/components/icons/eye.tsx
@@ -0,0 +1,24 @@
+export default function TablerEyeFilled(props: any) {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      >
+        <path d="M0 0h24v24H0z"></path>
+        <path
+          fill="#000000"
+          d="M12 4c4.29 0 7.863 2.429 10.665 7.154l.22.379l.045.1l.03.083l.014.055l.014.082l.011.1v.11l-.014.111a.992.992 0 0 1-.026.11l-.039.108l-.036.075l-.016.03c-2.764 4.836-6.3 7.38-10.555 7.499L12 20c-4.396 0-8.037-2.549-10.868-7.504a1 1 0 0 1 0-.992C3.963 6.549 7.604 4 12 4zm0 5a3 3 0 1 0 0 6a3 3 0 0 0 0-6z"
+        ></path>
+      </g>
+    </svg>
+  );
+}
--- a/components/icons/index.tsx
+++ b/components/icons/index.tsx
@@ -0,0 +1,4 @@
+export { default as LoadingDots } from "./loading-dots";
+export { default as LoadingCircle } from "./loading-circle";
+export { default as LoadingSpinner } from "./loading-spinner";
+export { default as ExpandingArrow } from "./expanding-arrow";
--- a/components/icons/loading-circle.tsx
+++ b/components/icons/loading-circle.tsx
@@ -0,0 +1,20 @@
+export default function LoadingCircle() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="h-4 w-4 animate-spin fill-gray-600 text-gray-200"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+  );
+}
--- a/components/icons/loading-dots.module.css
+++ b/components/icons/loading-dots.module.css
@@ -0,0 +1,40 @@
+.loading {
+  display: inline-flex;
+  align-items: center;
+}
+
+.loading .spacer {
+  margin-right: 2px;
+}
+
+.loading span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+}
+
+.loading span:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+
+.loading span:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
--- a/components/icons/loading-dots.tsx
+++ b/components/icons/loading-dots.tsx
@@ -0,0 +1,13 @@
+import styles from "./loading-dots.module.css";
+
+const LoadingDots = ({ color = "#000" }: { color?: string }) => {
+  return (
+    <span className={styles.loading}>
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+    </span>
+  );
+};
+
+export default LoadingDots;
--- a/components/icons/loading-spinner.module.css
+++ b/components/icons/loading-spinner.module.css
@@ -0,0 +1,79 @@
+.spinner {
+  color: gray;
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+  transform: scale(0.3) translateX(-95px);
+}
+.spinner div {
+  transform-origin: 40px 40px;
+  animation: spinner 1.2s linear infinite;
+}
+.spinner div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 37px;
+  width: 6px;
+  height: 20px;
+  border-radius: 20%;
+  background: black;
+}
+.spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+.spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+.spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+.spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+.spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+.spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+.spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+.spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+.spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+.spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+.spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+.spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+@keyframes spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
--- a/components/icons/loading-spinner.tsx
+++ b/components/icons/loading-spinner.tsx
@@ -0,0 +1,20 @@
+import styles from "./loading-spinner.module.css";
+
+export default function LoadingSpinner() {
+  return (
+    <div className={styles.spinner}>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+}
--- a/components/icons/moon.tsx
+++ b/components/icons/moon.tsx
@@ -0,0 +1,16 @@
+export default function PhMoonFill(props: any) {
+  return (
+    <svg
+      width="1.5em"
+      height="1.5em"
+      viewBox="0 0 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill="#000000"
+        d="M235.54 150.21a104.84 104.84 0 0 1-37 52.91A104 104 0 0 1 32 120a103.09 103.09 0 0 1 20.88-62.52a104.84 104.84 0 0 1 52.91-37a8 8 0 0 1 10 10a88.08 88.08 0 0 0 109.8 109.8a8 8 0 0 1 10 10Z"
+      ></path>
+    </svg>
+  );
+}
--- a/components/icons/sun.tsx
+++ b/components/icons/sun.tsx
@@ -0,0 +1,16 @@
+export default function PhSunBold(props: any) {
+  return (
+    <svg
+      width="1.5em"
+      height="1.5em"
+      viewBox="0 0 256 256"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill="#ffffff"
+        d="M116 32V16a12 12 0 0 1 24 0v16a12 12 0 0 1-24 0Zm80 96a68 68 0 1 1-68-68a68.07 68.07 0 0 1 68 68Zm-24 0a44 44 0 1 0-44 44a44.05 44.05 0 0 0 44-44ZM51.51 68.49a12 12 0 1 0 17-17l-12-12a12 12 0 0 0-17 17Zm0 119l-12 12a12 12 0 0 0 17 17l12-12a12 12 0 1 0-17-17ZM196 72a12 12 0 0 0 8.49-3.51l12-12a12 12 0 0 0-17-17l-12 12A12 12 0 0 0 196 72Zm8.49 115.51a12 12 0 0 0-17 17l12 12a12 12 0 0 0 17-17ZM44 128a12 12 0 0 0-12-12H16a12 12 0 0 0 0 24h16a12 12 0 0 0 12-12Zm84 84a12 12 0 0 0-12 12v16a12 12 0 0 0 24 0v-16a12 12 0 0 0-12-12Zm112-96h-16a12 12 0 0 0 0 24h16a12 12 0 0 0 0-24Z"
+      ></path>
+    </svg>
+  );
+}
--- a/components/mdx/Aside.tsx
+++ b/components/mdx/Aside.tsx
@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+interface AsideProps {
+  icon?: string;
+  children?: React.ReactNode;
+  type?: "default" | "warning" | "danger";
+}
+
+export function Aside({
+  children,
+  icon,
+  type = "default",
+  ...props
+}: AsideProps) {
+  return (
+    <div
+      className={cn(
+        "flex border-5 py-3 px-4 ms-2 ms-md-0 my-10 rounded rounded-1 shadow",
+        "bg-[#6edff633] border-[#6edff633] border-l-[#f6ef6e]"
+      )}
+      {...props}
+    >
+      <div className="rounded rounded-1 text-center h-8 w-8 bg-[#6edff6] text-2xl relative top-[-30px] left-[-30px]">
+        {icon || "💡"}
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+}
--- a/components/mdx/Callout.tsx
+++ b/components/mdx/Callout.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+
+interface CalloutProps {
+  icon?: string;
+  children?: React.ReactNode;
+  type?: "default" | "warning" | "danger";
+}
+
+export function Callout({
+  children,
+  icon,
+  type = "default",
+  ...props
+}: CalloutProps) {
+  return (
+    <div
+      className={cn("my-6 flex items-start rounded-md border border-l-4 p-4", {
+        "border-red-900 bg-red-50": type === "danger",
+        "border-yellow-900 bg-yellow-50": type === "warning",
+      })}
+      {...props}
+    >
+      {icon && <span className="mr-4 text-2xl">{icon}</span>}
+      <div>{children}</div>
+    </div>
+  );
+}
--- a/components/mdx/MDXComponents.tsx
+++ b/components/mdx/MDXComponents.tsx
@@ -0,0 +1,125 @@
+import { Aside } from "@/components/mdx/Aside";
+import { Callout } from "@/components/mdx/Callout";
+import { MdxCard } from "@/components/mdx/MdxCard";
+import React, { ReactNode } from "react";
+
+interface HeadingProps {
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+  className: string;
+  children: ReactNode;
+}
+
+const Heading: React.FC<HeadingProps> = ({ level, className, children }) => {
+  const HeadingTag = `h${level}` as keyof React.ElementType;
+  const headingId = children?.toString() ?? "";
+
+  return React.createElement(
+    HeadingTag,
+    { id: headingId, className },
+    children
+  );
+};
+
+interface MDXComponentsProps {
+  [key: string]: React.FC<any>;
+}
+
+const MDXComponents: MDXComponentsProps = {
+  h1: (props) => (
+    <Heading level={1} className="text-4xl font-bold mt-8 mb-6" {...props} />
+  ),
+  h2: (props) => (
+    <Heading
+      level={2}
+      className="text-3xl font-semibold mt-8 mb-6 border-b-2 border-gray-200 pb-2"
+      {...props}
+    />
+  ),
+  h3: (props) => (
+    <Heading
+      level={3}
+      className="text-2xl font-semibold mt-6 mb-4"
+      {...props}
+    />
+  ),
+  h4: (props) => (
+    <Heading level={4} className="text-xl font-semibold mt-6 mb-4" {...props} />
+  ),
+  h5: (props) => (
+    <Heading level={5} className="text-lg font-semibold mt-6 mb-4" {...props} />
+  ),
+  h6: (props) => (
+    <Heading
+      level={6}
+      className="text-base font-semibold mt-6 mb-4"
+      {...props}
+    />
+  ),
+  hr: (props) => <hr className="border-t border-gray-200 my-8" {...props} />,
+  p: (props) => (
+    <p
+      className="mt-6 mb-6 leading-relaxed text-gray-700 dark:text-gray-300"
+      {...props}
+    />
+  ),
+  a: (props) => (
+    <a
+      className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 transition-colors underline underline-offset-4"
+      target="_blank"
+      {...props}
+    />
+  ),
+  ul: (props) => <ul className="list-disc pl-6 mt-0 mb-6" {...props} />,
+  ol: (props) => <ol className="list-decimal pl-6 mt-0 mb-6" {...props} />,
+  li: (props) => (
+    <li className="mb-3 text-gray-700 dark:text-gray-300" {...props} />
+  ),
+  code: (props) => (
+    <code
+      className="bg-gray-100 dark:bg-gray-700 rounded px-2 py-1 font-mono text-sm"
+      {...props}
+    />
+  ),
+  pre: (props) => (
+    <pre
+      className="rounded-lg p-4 overflow-x-auto my-4 bg-gray-100 dark:bg-gray-800"
+      {...props}
+    />
+  ),
+  blockquote: (props) => (
+    <blockquote
+      className="pl-6 border-l-4 my-6 text-gray-600 dark:text-gray-400 italic"
+      {...props}
+    />
+  ),
+  img: (props) => (
+    <img className="rounded-lg border-2 border-gray-200 my-6" {...props} />
+  ),
+  strong: (props) => <strong className="font-bold" {...props} />,
+  table: (props) => (
+    <div className="my-8 w-full overflow-x-auto">
+      <table
+        className="w-full shadow-sm rounded-lg overflow-hidden"
+        {...props}
+      />
+    </div>
+  ),
+  tr: (props) => <tr className="border-t border-gray-200" {...props} />,
+  th: (props) => (
+    <th
+      className="px-6 py-3 font-bold text-left bg-gray-100 dark:bg-gray-700 [&[align=center]]:text-center [&[align=right]]:text-right"
+      {...props}
+    />
+  ),
+  td: (props) => (
+    <td
+      className="px-6 py-4 text-left border-t border-gray-100 dark:border-gray-700 [&[align=center]]:text-center [&[align=right]]:text-right"
+      {...props}
+    />
+  ),
+  Aside,
+  Callout,
+  Card: MdxCard,
+};
+
+export default MDXComponents;
--- a/components/mdx/MdxCard.tsx
+++ b/components/mdx/MdxCard.tsx
@@ -0,0 +1,42 @@
+import Link from "next/link";
+
+import { cn } from "@/lib/utils";
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  href?: string;
+  disabled?: boolean;
+}
+
+export function MdxCard({
+  href,
+  className,
+  children,
+  disabled,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={cn(
+        "group relative rounded-lg border p-6 shadow-md transition-shadow hover:shadow-lg",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex flex-col justify-between space-y-4">
+        <div className="space-y-2 [&>h3]:!mt-0 [&>h4]:!mt-0 [&>p]:text-muted-foreground">
+          {children}
+        </div>
+      </div>
+      {href && (
+        <Link
+          href={disabled ? "#" : href}
+          className="absolute inset-0"
+          prefetch={false}
+        >
+          <span className="sr-only">View</span>
+        </Link>
+      )}
+    </div>
+  );
+}
--- a/components/social-icons/icons.tsx
+++ b/components/social-icons/icons.tsx
@@ -0,0 +1,114 @@
+import { SVGProps } from 'react'
+
+// Icons taken from: https://simpleicons.org/
+// To add a new icon, add a new function here and add it to components in social-icons/index.tsx
+
+export function Facebook(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"></path>
+    </svg>
+  )
+}
+
+export function Github(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
+    </svg>
+  )
+}
+
+export function Linkedin(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
+    </svg>
+  )
+}
+
+export function Mail(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" {...svgProps}>
+      <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
+      <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
+    </svg>
+  )
+}
+
+export function Twitter(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path>
+    </svg>
+  )
+}
+
+export function TwitterX(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path
+        fill="currentColor"
+        d="M8 2H1l8.26 11.015L1.45 22H4.1l6.388-7.349L16 22h7l-8.608-11.478L21.8 2h-2.65l-5.986 6.886zm9 18L5 4h2l12 16z"
+      />
+    </svg>
+  )
+}
+
+export function Youtube(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M23.499 6.203a3.008 3.008 0 00-2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 00-2.088 2.09A31.258 31.26 0 000 12.01a31.258 31.26 0 00.523 5.785 3.008 3.008 0 002.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 002.089-2.09 31.258 31.26 0 00.5-5.784 31.258 31.26 0 00-.5-5.808zm-13.891 9.4V8.407l6.266 3.604z"></path>
+    </svg>
+  )
+}
+
+export function Mastodon(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z" />
+    </svg>
+  )
+}
+
+export function Threads(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z" />
+    </svg>
+  )
+}
+
+export function Instagram(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
+    </svg>
+  )
+}
+
+export function WeChat(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path
+        fill="currentColor"
+        d="M15.85 8.14c.39 0 .77.03 1.14.08C16.31 5.25 13.19 3 9.44 3c-4.25 0-7.7 2.88-7.7 6.43c0 2.05 1.15 3.86 2.94 5.04L3.67 16.5l2.76-1.19c.59.21 1.21.38 1.87.47c-.09-.39-.14-.79-.14-1.21c-.01-3.54 3.44-6.43 7.69-6.43M12 5.89a.96.96 0 1 1 0 1.92a.96.96 0 0 1 0-1.92M6.87 7.82a.96.96 0 1 1 0-1.92a.96.96 0 0 1 0 1.92"
+      />
+      <path
+        fill="currentColor"
+        d="M22.26 14.57c0-2.84-2.87-5.14-6.41-5.14s-6.41 2.3-6.41 5.14s2.87 5.14 6.41 5.14c.58 0 1.14-.08 1.67-.2L20.98 21l-1.2-2.4c1.5-.94 2.48-2.38 2.48-4.03m-8.34-.32a.96.96 0 1 1 .96-.96c.01.53-.43.96-.96.96m3.85 0a.96.96 0 1 1 0-1.92a.96.96 0 0 1 0 1.92"
+      />
+    </svg>
+  )
+}
+
+export function JueJin(svgProps: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...svgProps}>
+      <path
+        fill="currentColor"
+        d="m12 14.316l7.454-5.88l-2.022-1.625L12 11.1l-.004.003l-5.432-4.288l-2.02 1.624l7.452 5.88Zm0-7.247l2.89-2.298L12 2.453l-.004-.005l-2.884 2.318l2.884 2.3Zm0 11.266l-.005.002l-9.975-7.87L0 12.088l.194.156l11.803 9.308l7.463-5.885L24 12.085l-2.023-1.624Z"
+      />
+    </svg>
+  )
+}
--- a/components/social-icons/index.tsx
+++ b/components/social-icons/index.tsx
@@ -0,0 +1,62 @@
+import {
+  Facebook,
+  Github,
+  Instagram,
+  JueJin,
+  Linkedin,
+  Mail,
+  Mastodon,
+  Threads,
+  Twitter,
+  TwitterX,
+  WeChat,
+  Youtube
+} from './icons'
+
+const components = {
+  mail: Mail,
+  github: Github,
+  facebook: Facebook,
+  youtube: Youtube,
+  linkedin: Linkedin,
+  twitter: Twitter,
+  twitterX: TwitterX,
+  weChat: WeChat,
+  jueJin: JueJin,
+  mastodon: Mastodon,
+  threads: Threads,
+  instagram: Instagram
+}
+
+type SocialIconProps = {
+  kind: keyof typeof components
+  href: string | undefined
+  size?: number
+}
+
+const SocialIcon = ({ kind, href, size = 8 }: SocialIconProps) => {
+  if (
+    !href ||
+    (kind === 'mail' &&
+      !/^mailto:\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/.test(href))
+  )
+    return null
+
+  const SocialSvg = components[kind]
+
+  return (
+    <a
+      className="text-sm text-gray-500 transition hover:text-gray-600"
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href}
+    >
+      <span className="sr-only">{kind}</span>
+      <SocialSvg
+        className={`fill-current text-gray-400 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-${size} w-${size}`}
+      />
+    </a>
+  )
+}
+
+export default SocialIcon
--- a/components/ui/alert.tsx
+++ b/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
--- a/components/ui/toaster.tsx
+++ b/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}