From f0cbf924898dfdcaff8bc55fc7df7c0f86a76621 Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Fri, 14 Mar 2025 19:00:15 +0300
Subject: [PATCH] chore(web): improve landing page ui

---
 .../(components)/dashboard-layout.tsx         |  4 +-
 .../(components)/customization-section.tsx    | 32 +++++--
 .../(components)/landing-page-header.tsx      | 89 +++++++++++++------
 web/components/shared/app-header.tsx          |  3 +
 4 files changed, 90 insertions(+), 38 deletions(-)

diff --git a/web/app/(app)/dashboard/(components)/dashboard-layout.tsx b/web/app/(app)/dashboard/(components)/dashboard-layout.tsx
index 0260f3f..cdac13b 100644
--- a/web/app/(app)/dashboard/(components)/dashboard-layout.tsx
+++ b/web/app/(app)/dashboard/(components)/dashboard-layout.tsx
@@ -39,10 +39,10 @@ export default function Dashboard({
   return (
     <div className='flex-1 space-y-4 p-4 pt-6 md:p-8'>
       <div className='flex items-center justify-between space-y-2 flex-col md:flex-row'>
-        <h2 className='text-3xl font-bold tracking-tight'>
+        <h2 className='text-2xl font-bold tracking-tight'>
           {welcomeMessage}, {session?.user?.name}
         </h2>
-        <div className='flex items-center space-x-2 py-4'>
+        <div className='hidden md:flex items-center space-x-2 py-4'>
           <GenerateApiKey />
         </div>
       </div>
diff --git a/web/app/(landing-page)/(components)/customization-section.tsx b/web/app/(landing-page)/(components)/customization-section.tsx
index 072c2ba..94381e4 100644
--- a/web/app/(landing-page)/(components)/customization-section.tsx
+++ b/web/app/(landing-page)/(components)/customization-section.tsx
@@ -6,25 +6,39 @@ export default function CustomizationSection() {
   return (
     <section className='py-24 bg-gradient-to-b from-blue-50 to-white dark:from-blue-950 dark:to-muted'>
       <div className='container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl'>
-        <div className='mx-auto max-w-3xl text-center mb-12'>
+        <div className='mx-auto max-w-4xl text-center mb-12'>
           <h2 className='text-4xl font-bold mb-4 text-blue-600'>
-            Request Custom Solutions
+            Custom Development Solutions
           </h2>
           <p className='text-xl text-gray-600 mb-8'>
-            Let&apos;s explore how we can customize TextBee to align perfectly
-            with your business requirements. Whether you&apos;re looking for new
-            features or need assistance in deploying the platform on your own
-            server, or need dedicated support we&apos;re here to help.
+            Need help with TextBee or other development projects? We offer expertise in:
           </p>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10 text-center">
+            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+              <h3 className="text-xl font-semibold text-blue-600 mb-3">Self-Hosting Setup</h3>
+              <p className="text-gray-600 dark:text-gray-300">Get assistance deploying TextBee on your own infrastructure.</p>
+            </div>
+            
+            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+              <h3 className="text-xl font-semibold text-blue-600 mb-3">Custom Integrations</h3>
+              <p className="text-gray-600 dark:text-gray-300">Integrate TextBee with your existing applications or workflows.</p>
+            </div>
+            
+            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+              <h3 className="text-xl font-semibold text-blue-600 mb-3">Development Projects</h3>
+              <p className="text-gray-600 dark:text-gray-300">Collaborate with our team on your software development needs beyond TextBee.</p>
+            </div>
+          </div>
+          
           <Link
-            href={`mailto:contact@textbee.dev?subject=Customization Request&body=I am interested in discussing paid solutions for TextBee.`}
+            href={`mailto:contact@textbee.dev?subject=Custom Development Inquiry&body=I'm interested in discussing the following custom solution:%0A%0A- [ ] Self-hosting setup%0A- [ ] Custom integrations%0A- [ ] Other development project%0A%0AProject details:%0A%0A`}
           >
             <Button
               size='lg'
               className='bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105'
-              // onClick={() => setCustomizationOpen(true)}
             >
-              Discuss Custom Solutions
+              Let's Discuss Your Project
               <ArrowRight className='ml-2 h-5 w-5' />
             </Button>
           </Link>
diff --git a/web/app/(landing-page)/(components)/landing-page-header.tsx b/web/app/(landing-page)/(components)/landing-page-header.tsx
index 0c2fc43..0f296ce 100644
--- a/web/app/(landing-page)/(components)/landing-page-header.tsx
+++ b/web/app/(landing-page)/(components)/landing-page-header.tsx
@@ -1,10 +1,21 @@
 import Link from 'next/link'
-import { MessageSquarePlus, Moon } from 'lucide-react'
+import {
+  MessageSquarePlus,
+  Moon,
+  CreditCard,
+  Heart,
+  LayoutDashboard,
+} from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { ExternalLinks } from '@/config/external-links'
 import { Routes } from '@/config/routes'
 import { ThemeProvider } from 'next-themes'
 import ThemeToggle from '@/components/shared/theme-toggle'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 
 export default function LandingPageHeader() {
   return (
@@ -18,36 +29,60 @@ export default function LandingPageHeader() {
             <MessageSquarePlus className='h-6 w-6 text-blue-500' />
             <span className='font-bold'>
               Text<span className='text-blue-500'>Bee</span>
+              <span className='text-xs align-center text-gray-500 dark:text-gray-400'>
+                .dev
+              </span>
             </span>
           </Link>
           <nav className='flex items-center space-x-4'>
             <ThemeToggle />
+            <TooltipProvider>
+              <Link
+                className='text-sm font-medium hover:text-blue-500'
+                href={'/#pricing'}
+              >
+                <span className='hidden sm:inline'>Pricing</span>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <CreditCard className='h-5 w-5 sm:hidden' />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Pricing</p>
+                  </TooltipContent>
+                </Tooltip>
+              </Link>
+              <Link
+                className='text-sm font-medium hover:text-blue-500'
+                href={Routes.contribute}
+              >
+                <span className='hidden sm:inline'>Contribute</span>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Heart className='h-5 w-5 sm:hidden' />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Contribute</p>
+                  </TooltipContent>
+                </Tooltip>
+              </Link>
 
-            {/* <Button variant='ghost' size='icon'>
-            <Moon className='h-4 w-4' />
-            <span className='sr-only'>Toggle theme</span>
-          </Button> */}
-            <Link
-              className='text-sm font-medium hover:text-blue-500'
-              href={Routes.contribute}
-            >
-              Contribute
-            </Link>
-
-            <Link
-              className='text-sm font-medium hover:text-blue-500'
-              href={Routes.dashboard}
-            >
-              <Button className='bg-blue-500 hover:bg-blue-600 dark:text-white rounded-full'>
-                Go to Dashboard
-              </Button>
-            </Link>
-            {/* <Link
-            className='text-sm font-medium hover:text-blue-500'
-            href='/register'
-          >
-            Register
-          </Link> */}
+              <Link
+                className='text-sm font-medium hover:text-blue-500'
+                href={Routes.dashboard}
+              >
+                <Button className='bg-blue-500 hover:bg-blue-600 dark:text-white rounded-full'>
+                  <span className='hidden sm:inline'>Go to Dashboard</span>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <LayoutDashboard className='h-5 w-5 sm:hidden' />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Go to Dashboard</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </Button>
+              </Link>
+            </TooltipProvider>
           </nav>
         </div>
       </header>
diff --git a/web/components/shared/app-header.tsx b/web/components/shared/app-header.tsx
index ffa1823..3d857b1 100644
--- a/web/components/shared/app-header.tsx
+++ b/web/components/shared/app-header.tsx
@@ -154,6 +154,9 @@ export default function AppHeader() {
             <MessageSquarePlus className='h-6 w-6 text-blue-500' />
             <span className='font-bold'>
               Text<span className='text-blue-500'>Bee</span>
+              <span className='text-xs align-center text-gray-500 dark:text-gray-400'>
+                .dev
+              </span>
             </span>
           </Link>
         </div>