Refactor App layout and enhance UI components for better usability

- Changed the default active tab in the App component from 'profiles' to 'main'.
- Improved the layout of the main content area to better accommodate different views, including profiles, generation forms, and history.
- Updated Sidebar component to reflect the new tab structure with a 'main' tab.
- Enhanced the GenerationForm to utilize the selected profile from the UI store, improving user feedback when no profile is selected.
- Added a new CircleButton component for better icon button interactions.
- Adjusted styles in various components for improved responsiveness and visual consistency.

landing/src/components/ui/button.tsx

@@ -8,14 +8,14 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-black/20 active:scale-[0.98]',
+        default: 'bg-primary/10 backdrop-blur-sm border border-border text-primary hover:bg-primary/11 hover:border-primary/15 shadow-lg shadow-black/20 active:scale-[0.99]',
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-lg shadow-destructive/20 active:scale-[0.98]',
         outline:
-          'border border-border bg-background/50 backdrop-blur-sm hover:bg-accent/50 hover:border-border transition-all active:scale-[0.98]',
+          'border border-border bg-background/50 backdrop-blur-sm hover:bg-foreground/5 transition-all active:scale-[0.99]',
         secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80 backdrop-blur-sm active:scale-[0.98]',
-        ghost: 'hover:bg-accent/50 hover:text-accent-foreground backdrop-blur-sm active:scale-[0.98]',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/70 backdrop-blur-sm active:scale-[0.99]',
+        ghost: 'hover:bg-accent/30 hover:text-accent-foreground backdrop-blur-sm active:scale-[0.99]',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

landing/src/components/ui/feature-card.tsx

@@ -11,7 +11,7 @@ interface FeatureCardProps {
 
 export function FeatureCard({ title, description, icon, className }: FeatureCardProps) {
   return (
-    <Card className={cn('text-center hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 transition-all duration-300 hover:-translate-y-1', className)}>
+    <Card className={cn('text-center hover:border-primary/20 hover:shadow-lg hover:shadow-primary/3 transition-all duration-200 hover:-translate-y-0.5', className)}>
       <CardHeader>
         {icon && (
           <div className="flex justify-center mb-3">

landing/src/components/ui/hero.tsx

@@ -14,31 +14,34 @@ interface HeroProps {
 
 export function Hero({ title, description, actions, className, showLogo = true }: HeroProps) {
   return (
-    <section className={cn('relative text-center pt-8 sm:pt-12 md:pt-14 -mb-6 sm:-mb-8 md:-mb-10 overflow-hidden -mx-4 sm:-mx-6 md:-mx-4 -mt-4 sm:mt-0 md:mt-0', className)}>
-      <div className="relative z-10 px-4">
-        {showLogo && (
-          <div className="flex justify-center mb-4 sm:mb-6">
-            <Image
-              src="/voicebox-logo.png"
-              alt="Voicebox Logo"
-              width={1024}
-              height={1024}
-              className="w-32 sm:w-40 md:w-48 h-auto"
-              priority
-            />
-          </div>
-        )}
-        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-4 sm:mb-6">
-          {title}
-        </h1>
-        <p className="text-base sm:text-lg md:text-xl text-foreground/60 mb-6 sm:mb-8 max-w-2xl mx-auto px-2">
-          {description}
-        </p>
-        {actions && (
-          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center px-2">
-            {actions}
-          </div>
-        )}
+    <section className={cn('relative py-12 sm:py-16 md:py-20 lg:py-24', className)}>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
+        {/* Left side - Content */}
+        <div className="space-y-6 lg:pr-8">
+          {showLogo && (
+            <div className="flex lg:justify-start justify-center mb-6">
+              <Image
+                src="/voicebox-logo.png"
+                alt="Voicebox Logo"
+                width={1024}
+                height={1024}
+                className="w-32 sm:w-40 md:w-48 h-auto"
+                priority
+              />
+            </div>
+          )}
+          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold leading-tight text-left">
+            {title}
+          </h1>
+          <p className="text-lg sm:text-xl md:text-2xl text-foreground/70 max-w-xl text-left">
+            {description}
+          </p>
+        </div>
+        
+        {/* Right side - Actions */}
+        <div className="flex flex-col items-start lg:items-end gap-4">
+          {actions}
+        </div>
       </div>
     </section>
   );