feat(landing): add Docs button + modify padding in the home page

Author: dinhanhthi

packages/landing/src/components/sections/features.tsx

@@ -94,7 +94,7 @@ const features = [
 
 export function FeaturesSection() {
   return (
-    <section className="py-20">
+    <section className="py-12 sm:py-16 md:py-20">
       <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Main Features</h2>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         {features.map((feature) => (

packages/landing/src/components/sections/hero.tsx

@@ -1,6 +1,6 @@
 export function HeroSection() {
   return (
-    <section className="py-24 text-center animate-fade-up delay-100">
+    <section className="py-12 sm:py-16 md:py-20 text-center animate-fade-up delay-100">
       <img src="/logo.svg" alt="AI Sync logo" className="mx-auto mb-6 h-20 w-20" />
       <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight leading-tight mb-6">
         Sync Your AI Configs

packages/landing/src/components/sections/how-it-works.tsx

@@ -1,6 +1,6 @@
 export function HowItWorksSection() {
   return (
-    <section id="how" className="py-20">
+    <section id="how" className="py-12 sm:py-16 md:py-20">
       <h2 className="text-3xl font-bold tracking-tight text-center mb-4">How It Works</h2>
       <p className="text-center text-muted-foreground mb-12">
         A background service watches your files and syncs them to a central git store.

packages/landing/src/components/sections/installation.tsx

@@ -25,7 +25,7 @@ function CodeBlock({ children }: { children: string }) {
 
 export function InstallationSection() {
   return (
-    <section id="install" className="py-20 scroll-mt-10">
+    <section id="install" className="py-12 sm:py-16 md:py-20 scroll-mt-10">
       <h2 className="text-3xl font-bold tracking-tight text-center mb-12">
         Installation &amp; Usage
       </h2>

packages/landing/src/components/sections/multi-machine.tsx

@@ -1,6 +1,6 @@
 export function MultiMachineSection() {
   return (
-    <section className="py-20">
+    <section className="py-12 sm:py-16 md:py-20">
       <h2 className="text-3xl font-bold tracking-tight text-center mb-4">Work Across Machines</h2>
       <p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">
         Your store is just a Git repo. Push it to GitHub (private) and pull it on another machine.

packages/landing/src/components/sections/why.tsx

@@ -45,7 +45,7 @@ export function WhySection() {
   ];
 
   return (
-    <section id="why" className="py-20 animate-fade-up delay-200">
+    <section id="why" className="py-12 sm:py-16 md:py-20 animate-fade-up delay-200">
       <h2 className="text-3xl font-bold tracking-tight text-center mb-12">Why AI Sync?</h2>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
         {cards.map((card) => (

packages/ui/src/components/layout.tsx

@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils';
 import {
   Database,
   Download,
+  BookOpen,
   FileText,
   FolderSearch2,
   Globe,
@@ -157,18 +158,34 @@ export function Layout({ children, dataDir }: { children: React.ReactNode; dataD
             ))}
           </nav>
 
-          <a
-            href="https://github.com/dinhanhthi/ai-sync"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="ml-auto flex items-center gap-1.5 rounded-full border border-border/80 px-2.5 py-1 text-muted-foreground hover:text-foreground transition-colors"
-            title="GitHub"
-          >
-            <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor">
-              <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
-            </svg>
-            <span className="text-xs font-semibold">v{__APP_VERSION__}</span>
-          </a>
+          <div className="ml-auto flex items-center gap-2">
+            <a
+              href={
+                import.meta.env.DEV
+                  ? 'http://localhost:2705/docs'
+                  : 'https://ai-sync.dinhanhthi.com/docs'
+              }
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1.5 rounded-full border border-border/80 px-2.5 py-1 text-muted-foreground hover:text-foreground transition-colors"
+              title="Documentation"
+            >
+              <BookOpen className="h-5 w-5" />
+              <span className="hidden sm:inline text-xs font-semibold">Doc</span>
+            </a>
+            <a
+              href="https://github.com/dinhanhthi/ai-sync"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1.5 rounded-full border border-border/80 px-2.5 py-1 text-muted-foreground hover:text-foreground transition-colors"
+              title="GitHub"
+            >
+              <svg viewBox="0 0 24 24" className="h-5 w-5" fill="currentColor">
+                <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" />
+              </svg>
+              <span className="text-xs font-semibold">v{__APP_VERSION__}</span>
+            </a>
+          </div>
         </div>
       </header>