feat: ui improvement

Author: andostronaut

src/components/common/footer.tsx

@@ -29,7 +29,7 @@ export const Footer = () => {
                 href={contact.href}
                 className='flex gap-2 items-center opacity-60 hover:opacity-100'
               >
-                <Icon name={contact.icon as keyof typeof icons} size={18} />
+                <Icon name={contact.icon as keyof typeof icons} size={20} />
                 {contact.label}
               </Link>
             ))}

src/components/common/header.tsx

@@ -51,7 +51,7 @@ export const Header = () => {
         <MobileMenu isOpen={isOpen} setIsOpen={setIsOpen} />
 
         {/* <!-- Desktop --> */}
-        <div className='hidden lg:flex justify-center items-center'>
+        <div className='hidden lg:flex justify-center items-center gap-4'>
           <NavigationMenu className='hidden lg:block mx-auto'>
             <NavigationMenuList>
               <NavigationMenuItem>
@@ -68,11 +68,14 @@ export const Header = () => {
 
           <ToggleTheme />
 
-          <Button asChild size='sm' variant='ghost' aria-label='View on GitHub'>
-            <Link aria-label='View on GitHub' href={DATA.repo} target='_blank'>
-              <Github className='size-5' />
-            </Link>
-          </Button>
+          <Link
+            aria-label='View on GitHub'
+            href={DATA.repo}
+            target='_blank'
+            aria-labelledby='View on GitHub'
+          >
+            <Github size={20} />
+          </Link>
         </div>
       </div>
     </header>

src/components/sections/faq.tsx

@@ -12,15 +12,13 @@ export const FAQ = () => {
     <section id='faq' className='container md:w-[700px] py-24 sm:py-32 m-auto'>
       <div className='text-center mb-8'>
         <h2 className='text-lg text-primary text-center mb-2 tracking-wider'>FAQS</h2>
-
         <h2 className='text-3xl md:text-4xl text-center font-bold'>Common Questions</h2>
       </div>
 
       <Accordion type='single' collapsible className='AccordionRoot'>
         {DATA.faq.map(({ question, answer }, idx) => (
           <AccordionItem key={idx} value={idx.toString()}>
             <AccordionTrigger className='text-left'>{question}</AccordionTrigger>
-
             <AccordionContent>{answer}</AccordionContent>
           </AccordionItem>
         ))}

src/components/sections/hero.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { ChevronRight, Github } from 'lucide-react'
-// import Link from 'next/link'
+import Link from 'next/link'
 
 import { Button } from '@/components/ui/button'
 
@@ -24,27 +24,33 @@ export const Hero = () => {
           <div className='space-y-4 md:space-y-0 md:space-x-4'>
             <BlurFade delay={0.3}>
               <div className='mt-6 gap-2 flex justify-center'>
-                <Button
-                  size='lg'
-                  variant='default'
-                  className='w-5/6 md:w-1/4 font-bold group/arrow'
-                  onClick={() => window.open('/docs', '_blank')}
+                <Link
+                  href={'/docs'}
+                  target='_blank'
+                  className='w-5/6 md:w-1/4 font-bold group/arrow flex items-center justify-center'
                 >
-                  Documentation
-                  <ChevronRight className='size-5 ml-2 group-hover/arrow:translate-x-1 transition-transform' />
-                </Button>
-                <Button
-                  size='lg'
-                  className='w-5/6 md:w-1/4 font-bold group/arrow'
-                  variant='secondary'
-                  onClick={() => {
-                    window.open('https://github.com/kinotio/drowser', '_blank')
-                  }}
+                  <Button className='w-full h-full' variant='outline'>
+                    Documentation
+                    <ChevronRight
+                      className='ml-2 group-hover/arrow:translate-x-1 transition-transform'
+                      size={100}
+                    />
+                  </Button>
+                </Link>
+                <Link
+                  href={'https://github.com/kinotio/drowser'}
+                  target='_blank'
+                  className='w-5/6 md:w-1/4 font-bold group/arrow flex items-center justify-center'
                 >
-                  <Github className='size-5 mr-2' />
-                  Github
-                  <ChevronRight className='size-5 ml-2 group-hover/arrow:translate-x-1 transition-transform' />
-                </Button>
+                  <Button className='w-full h-full' variant='secondary'>
+                    <Github className='mr-2' size={20} />
+                    Github
+                    <ChevronRight
+                      className='ml-2 group-hover/arrow:translate-x-1 transition-transform'
+                      size={20}
+                    />
+                  </Button>
+                </Link>
               </div>
             </BlurFade>
           </div>

src/components/toogle-theme.tsx

@@ -1,29 +1,27 @@
 import { useTheme } from 'next-themes'
 import { Moon, Sun } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
+import Link from 'next/link'
 
 export const ToggleTheme = () => {
   const { theme, setTheme } = useTheme()
 
   return (
-    <Button
+    <Link
+      href='#'
       onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-      size='sm'
-      variant='ghost'
       className='w-full justify-start'
     >
       <div className='flex gap-2 dark:hidden'>
-        <Moon className='size-5' />
+        <Moon size={20} />
         <span className='block lg:hidden'>Dark</span>
       </div>
 
       <div className='dark:flex gap-2 hidden'>
-        <Sun className='size-5' />
+        <Sun size={20} />
         <span className='block lg:hidden'>Light</span>
       </div>
 
       <span className='sr-only'>Toggle theme</span>
-    </Button>
+    </Link>
   )
 }

src/components/ui/button.tsx

@@ -1,36 +1,33 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+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"
+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",
+  '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",
+        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",
+          '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",
-      },
+        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",
-    },
+      variant: 'default',
+      size: 'default'
+    }
   }
 )
 
@@ -42,16 +39,12 @@ export interface ButtonProps
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : 'button'
     return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
     )
   }
 )
-Button.displayName = "Button"
+Button.displayName = 'Button'
 
 export { Button, buttonVariants }