upd: logos and layout

components/forms/newsletter-form.tsx

@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { z } from "zod";
 
 import { Button } from "@/components/ui/button";
@@ -14,7 +15,6 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { toast } from "@/components/ui/use-toast";
 
 const FormSchema = z.object({
   email: z.string().email({
@@ -31,15 +31,16 @@ export function NewsletterForm() {
   });
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
-    form.reset();
-    toast({
-      title: "You submitted the following values:",
-      description: (
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      ),
-    });
+    // form.reset();
+    toast.warning(`Work in progress...`);
+    // toast({
+    //   title: "You submitted the following values:",
+    //   description: (
+    //     <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+    //       <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+    //     </pre>
+    //   ),
+    // });
   }
 
   return (

components/layout/dashboard-sidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Fragment, useEffect, useState } from "react";
+import Image from "next/image";
 import { usePathname } from "next/navigation";
 import { NavItem, SidebarNavItem } from "@/types";
 import { Menu, PanelLeftClose, PanelRightClose } from "lucide-react";
@@ -75,7 +76,11 @@ export function DashboardSidebar({ links }: DashboardSidebarProps) {
                 {isSidebarExpanded && (
                   <>
                     <Icons.logo />
-                    <Link href="/" className="font-satoshi text-xl font-bold">
+                    <Link
+                      href="/"
+                      style={{ fontFamily: "Bahamas Bold" }}
+                      className="text-2xl"
+                    >
                       {siteConfig.name}
                     </Link>
                   </>
@@ -237,11 +242,15 @@ export function MobileSheetSidebar({ links }: DashboardSidebarProps) {
             <div className="flex h-screen flex-col">
               <nav className="flex flex-1 flex-col gap-y-8 p-6 text-lg font-medium">
                 <Link
-                  href="#"
+                  href="/"
                   className="flex items-center gap-2 text-lg font-semibold"
                 >
-                  <Icons.logo className="size-6" />
-                  <span className="font-satoshi text-lg font-bold">
+                  {/* <Icons.logo /> */}
+                  <Image src="/favicon.ico" alt="logo" width={20} height={20} />
+                  <span
+                    style={{ fontFamily: "Bahamas Bold" }}
+                    className="pt-0.5 text-xl"
+                  >
                     {siteConfig.name}
                   </span>
                 </Link>

components/layout/navbar.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useContext } from "react";
 import Link from "next/link";
 import { useSelectedLayoutSegment } from "next/navigation";
 import { useSession } from "next-auth/react";
@@ -13,11 +12,11 @@ import { useScroll } from "@/hooks/use-scroll";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
 import { DocsSearch } from "@/components/docs/search";
-import { ModalContext } from "@/components/modals/providers";
 import { Icons } from "@/components/shared/icons";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
 import { ModeToggle } from "./mode-toggle";
+import { UserAccountNav } from "./user-account-nav";
 
 interface NavBarProps {
   scroll?: boolean;
@@ -27,7 +26,6 @@ interface NavBarProps {
 export function NavBar({ scroll = false }: NavBarProps) {
   const scrolled = useScroll(50);
   const { data: session, status } = useSession();
-  const { setShowSignInModal } = useContext(ModalContext);
 
   const selectedLayout = useSelectedLayoutSegment();
   const documentation = selectedLayout === "docs";
@@ -49,12 +47,16 @@ export function NavBar({ scroll = false }: NavBarProps) {
         className="flex h-14 items-center justify-between py-4"
         large={documentation}
       >
-        <div className="flex gap-6 md:gap-10">
+        <div className="flex items-center gap-6 md:gap-10">
           <Link href="/" className="flex items-center space-x-1.5">
             <Icons.logo />
-            <span className="text-xl font-bold">{siteConfig.name}</span>
+            <h1 style={{ fontFamily: "Bahamas Bold" }} className="text-2xl">
+              {siteConfig.name}
+            </h1>
           </Link>
+        </div>
 
+        <div className="flex items-center space-x-4">
           {links && links.length > 0 ? (
             <nav className="hidden gap-6 md:flex">
               {links.map((item, index) => (
@@ -75,9 +77,7 @@ export function NavBar({ scroll = false }: NavBarProps) {
               ))}
             </nav>
           ) : null}
-        </div>
 
-        <div className="flex items-center space-x-3">
           {/* right header for docs */}
           {documentation ? (
             <div className="hidden flex-1 items-center space-x-4 sm:justify-end lg:flex">
@@ -100,21 +100,17 @@ export function NavBar({ scroll = false }: NavBarProps) {
             </div>
           ) : null}
 
-          <ModeToggle />
           {session ? (
-            <Link
-              href={session.user.role === "ADMIN" ? "/admin" : "/dashboard"}
-              className="hidden md:block"
-            >
-              <Button
-                className="gap-2 px-4"
-                variant="default"
-                size="sm"
-                rounded="xl"
+            <div className="hidden items-center gap-4 md:flex">
+              <Link
+                href="/dashboard"
+                className="hidden text-sm font-medium text-foreground/60 transition-colors hover:text-foreground/80 md:block"
               >
-                <span>Dashboard</span>
-              </Button>
-            </Link>
+                Dashboard
+              </Link>
+              <ModeToggle />
+              <UserAccountNav />
+            </div>
           ) : status === "unauthenticated" ? (
             <Link href="login">
               <Button

components/layout/site-footer.tsx

@@ -12,6 +12,20 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
   return (
     <footer className={cn("border-t", className)}>
       <div className="container grid max-w-6xl grid-cols-2 gap-6 py-14 md:grid-cols-5">
+        <div className="col-span-full ml-4 flex flex-col items-start sm:col-span-1 md:col-span-2">
+          {/* <NewsletterForm /> */}
+          <div className="flex items-center gap-6 md:gap-10">
+            <Link href="/" className="flex items-center space-x-1.5">
+              <Icons.logo />
+              <h1 style={{ fontFamily: "Bahamas Bold" }} className="text-2xl">
+                {siteConfig.name}
+              </h1>
+            </Link>
+          </div>
+          <div className="mt-4 text-sm">
+            Craft DNS Records, Make Short Links.
+          </div>
+        </div>
         {footerLinks.map((section) => (
           <div key={section.title}>
             <span className="text-sm font-medium text-foreground">
@@ -31,9 +45,6 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
             </ul>
           </div>
         ))}
-        <div className="col-span-full flex flex-col items-end sm:col-span-1 md:col-span-2">
-          <NewsletterForm />
-        </div>
       </div>
 
       <div className="border-t py-4">

components/layout/user-account-nav.tsx

@@ -125,7 +125,7 @@ export function UserAccountNav() {
       <DropdownMenuTrigger>
         <UserAvatar
           user={{ name: user.name || null, image: user.image || null }}
-          className="size-8 border"
+          className="size-8 border border-gray-200 shadow-inner"
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">

components/sections/hero-landing.tsx

@@ -16,7 +16,9 @@ export default async function HeroLanding() {
             "px-4",
           )}
         >
-          <span className="mr-3">🎉</span> 𝐖𝐑.𝐃𝐎 Beta Launching Now!
+          <span className="mr-3">🎉</span>{" "}
+          <span style={{ fontFamily: "Bahamas Bold" }}>WR.DO </span>&nbsp;Beta
+          Launching Now!
         </Link>
 
         <h1 className="text-balance font-satoshi text-[40px] font-black leading-[1.15] tracking-tight sm:text-5xl md:text-6xl md:leading-[1.15]">
@@ -32,17 +34,6 @@ export default async function HeroLanding() {
         </p>
 
         <div className="flex justify-center space-x-2">
-          <Link
-            href="/dashboard"
-            prefetch={true}
-            className={cn(
-              buttonVariants({ rounded: "xl", size: "lg" }),
-              "gap-2 px-5 text-[15px]",
-            )}
-          >
-            <span>Dashboard</span>
-            <Icons.arrowRight className="size-4" />
-          </Link>
           <Link
             href={siteConfig.links.github}
             target="_blank"
@@ -61,6 +52,17 @@ export default async function HeroLanding() {
               <span className="hidden sm:inline-block">Star on</span> GitHub
             </p>
           </Link>
+          <Link
+            href="/dashboard"
+            prefetch={true}
+            className={cn(
+              buttonVariants({ rounded: "xl", size: "lg" }),
+              "gap-2 px-5 text-[15px]",
+            )}
+          >
+            <span>Dashboard</span>
+            <Icons.arrowRight className="size-4" />
+          </Link>
         </div>
       </div>
     </section>