veryfront 0.0.39 → 0.0.41

package/dist/templates/app/components/FeatureGrid.tsx

@@ -3,90 +3,84 @@ const features = [
     title: "Authentication",
     description: "Secure user authentication with sessions and JWT tokens",
     icon: (
-      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
       </svg>
     ),
-    color: "bg-blue-500",
   },
   {
     title: "API Routes",
     description: "Full-featured API with middleware and validation",
     icon: (
-      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" />
       </svg>
     ),
-    color: "bg-purple-500",
   },
   {
     title: "Database Ready",
     description: "Easy to connect any database with our data layer",
     icon: (
-      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
       </svg>
     ),
-    color: "bg-pink-500",
   },
   {
     title: "Type Safe",
     description: "Full TypeScript support with runtime validation",
     icon: (
-      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
       </svg>
     ),
-    color: "bg-green-500",
   },
   {
     title: "Modern UI",
     description: "Beautiful components built with Tailwind CSS",
     icon: (
-      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42" />
       </svg>
     ),
-    color: "bg-orange-500",
   },
   {
     title: "Production Ready",
     description: "Security, caching, and performance optimized",
     icon: (
-      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+      <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
       </svg>
     ),
-    color: "bg-teal-500",
   },
 ];
 
 export function FeatureGrid() {
   return (
-    <section className="py-24 bg-slate-50 dark:bg-slate-900">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <section className="py-24 bg-neutral-50 dark:bg-neutral-900/50">
+      <div className="max-w-5xl mx-auto px-6">
         <div className="text-center mb-16">
-          <h2 className="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-4">
-            Everything You Need
+          <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
+            Everything you need
           </h2>
-          <p className="text-xl text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
-            Start with a solid foundation and build from there. We've handled the boring stuff so you can focus on your product.
+          <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-xl mx-auto">
+            Start with a solid foundation and focus on your product.
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {features.map((feature) => (
             <div
               key={feature.title}
-              className="group bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300 border border-slate-100 dark:border-slate-700"
+              className="bg-white dark:bg-neutral-800 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-700"
             >
-              <div className={`w-12 h-12 ${feature.color} rounded-xl flex items-center justify-center text-white mb-6 transform group-hover:scale-110 transition-transform duration-300 shadow-lg`}>
+              <div className="w-10 h-10 bg-blue-500/10 rounded-xl flex items-center justify-center text-blue-500 mb-4">
                 {feature.icon}
               </div>
-              <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-3">
+              <h3 className="text-base font-semibold text-neutral-900 dark:text-white mb-2">
                 {feature.title}
               </h3>
-              <p className="text-slate-600 dark:text-slate-400 leading-relaxed">
+              <p className="text-sm text-neutral-600 dark:text-neutral-400">
                 {feature.description}
               </p>
             </div>
@@ -95,4 +89,4 @@ export function FeatureGrid() {
       </div>
     </section>
   );
-}
+}

package/dist/templates/app/components/Header.tsx

@@ -7,29 +7,26 @@ export function Header() {
   const { user, logout } = useAuth();
 
   return (
-    <header className="bg-white shadow-sm">
-      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between h-16">
-          <div className="flex items-center">
-            <a href="/" className="text-xl font-bold text-indigo-600">
-              My App
-            </a>
-          </div>
+    <header className="sticky top-0 z-50 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800">
+      <nav className="max-w-5xl mx-auto px-6">
+        <div className="flex justify-between h-14 items-center">
+          <a href="/" className="text-lg font-semibold text-neutral-900 dark:text-white">
+            My App
+          </a>
 
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center gap-6">
             {user ? (
               <>
                 <a
                   href="/dashboard"
-                  className="text-gray-700 hover:text-gray-900"
+                  className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
                 >
                   Dashboard
                 </a>
-                <span className="text-gray-500">|</span>
-                <span className="text-gray-700">{user.name}</span>
+                <span className="text-sm text-neutral-500">{user.name}</span>
                 <button
                   onClick={logout}
-                  className="text-gray-700 hover:text-gray-900"
+                  className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
                 >
                   Sign out
                 </button>
@@ -38,13 +35,13 @@ export function Header() {
               <>
                 <a
                   href="/login"
-                  className="text-gray-700 hover:text-gray-900"
+                  className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
                 >
                   Sign in
                 </a>
                 <a
                   href="/register"
-                  className="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"
+                  className="text-sm px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors"
                 >
                   Get started
                 </a>
@@ -55,4 +52,4 @@ export function Header() {
       </nav>
     </header>
   );
-}
+}

package/dist/templates/app/components/HeroSection.tsx

@@ -1,49 +1,39 @@
 export function HeroSection() {
   return (
-    <section className="relative overflow-hidden bg-slate-900 text-white">
-      {/* Background Pattern */}
-      <div className="absolute inset-0 z-0 opacity-20">
-        <div className="absolute top-0 -left-4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
-        <div className="absolute top-0 -right-4 w-72 h-72 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
-        <div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
-      </div>
-
-      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
+    <section className="py-24 md:py-32">
+      <div className="max-w-5xl mx-auto px-6">
         <div className="text-center max-w-3xl mx-auto">
-          <div className="inline-flex items-center px-4 py-2 rounded-full border border-indigo-500/30 bg-indigo-500/10 text-indigo-300 mb-8 backdrop-blur-sm">
-            <span className="flex h-2 w-2 rounded-full bg-indigo-400 mr-2"></span>
-            v1.0 is now available
-          </div>
-          
-          <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight mb-8 bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-200 to-indigo-400">
-            Build Something <br />
-            <span className="text-indigo-400">Extraordinary</span>
+          <p className="text-sm font-medium text-blue-500 mb-4">
+            Now available
+          </p>
+
+          <h1 className="text-4xl md:text-6xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
+            Build something
+            <br />
+            extraordinary.
           </h1>
-          
-          <p className="text-xl text-slate-300 mb-10 leading-relaxed">
+
+          <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-10 max-w-xl mx-auto">
             A modern full-stack application template with authentication,
-            API routes, and a beautiful UI. Start your next big idea with a solid foundation.
+            API routes, and a beautiful UI.
           </p>
-          
+
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <a
               href="/register"
-              className="px-8 py-4 bg-indigo-600 text-white rounded-xl font-bold hover:bg-indigo-500 transition-all transform hover:scale-105 shadow-lg shadow-indigo-500/25"
+              className="px-6 py-3 bg-blue-500 text-white rounded-full font-medium hover:bg-blue-600 transition-colors"
             >
-              Get Started Free
+              Get started
             </a>
             <a
               href="/docs"
-              className="px-8 py-4 bg-white/10 text-white border border-white/20 rounded-xl font-bold hover:bg-white/20 transition-all backdrop-blur-sm"
+              className="px-6 py-3 bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white rounded-full font-medium hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
             >
-              Read Documentation
+              Documentation
             </a>
           </div>
         </div>
       </div>
-      
-      {/* Bottom fade */}
-      <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-slate-50 dark:from-slate-900 to-transparent"></div>
     </section>
   );
-}
+}

package/dist/templates/blog/app/layout.tsx

@@ -11,35 +11,35 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="bg-white shadow-sm">
-        <nav className="max-w-4xl mx-auto px-4 py-4">
-          <div className="flex justify-between items-center">
-            <a href="/" className="text-xl font-bold text-gray-900">
+    <div className="min-h-screen bg-white dark:bg-neutral-900">
+      <header className="sticky top-0 z-50 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800">
+        <nav className="max-w-2xl mx-auto px-6">
+          <div className="flex justify-between h-14 items-center">
+            <a href="/" className="text-lg font-semibold text-neutral-900 dark:text-white">
               My Blog
             </a>
             <div className="flex gap-6">
-              <a href="/" className="text-gray-600 hover:text-gray-900">
+              <a href="/" className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors">
                 Home
               </a>
-              <a href="/about" className="text-gray-600 hover:text-gray-900">
+              <a href="/about" className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors">
                 About
               </a>
-              <a href="/archive" className="text-gray-600 hover:text-gray-900">
+              <a href="/archive" className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors">
                 Archive
               </a>
             </div>
           </div>
         </nav>
       </header>
-      <main className="max-w-4xl mx-auto px-4 py-8">
+      <main className="max-w-2xl mx-auto px-6 py-12">
         {children}
       </main>
-      <footer className="bg-gray-100 mt-16">
-        <div className="max-w-4xl mx-auto px-4 py-8 text-center text-gray-600">
-          © 2024 My Blog. Built with Veryfront.
+      <footer className="border-t border-neutral-200 dark:border-neutral-800 mt-16">
+        <div className="max-w-2xl mx-auto px-6 py-8 text-center text-sm text-neutral-500 dark:text-neutral-400">
+          Built with Veryfront
         </div>
       </footer>
     </div>
   );
-}
+}

package/dist/templates/blog/app/page.tsx

@@ -6,8 +6,8 @@ export default async function HomePage() {
 
   return (
     <div>
-      <h1 className="text-4xl font-bold mb-8">Latest Posts</h1>
+      <h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-8">Latest Posts</h1>
       <BlogPostList posts={posts} />
     </div>
   );
-}
+}

package/dist/templates/blog/components/BlogPostList.tsx

@@ -11,43 +11,34 @@ interface Post {
 
 export function BlogPostList({ posts }: { posts: Post[] }) {
   return (
-    <div className="space-y-8">
+    <div className="space-y-10">
       {posts.map(post => (
-        <article key={post.slug} className="border-b pb-8">
-          <h2 className="text-2xl font-semibold mb-2">
-            <a
-              href={`/blog/${post.slug}`}
-              className="text-gray-900 hover:text-blue-600"
-            >
+        <article key={post.slug}>
+          <a href={`/blog/${post.slug}`} className="group block">
+            <time className="text-sm text-neutral-500 dark:text-neutral-400">
+              {formatDate(post.date)}
+            </time>
+            <h2 className="text-xl font-semibold text-neutral-900 dark:text-white mt-1 group-hover:text-blue-500 transition-colors">
               {post.title}
-            </a>
-          </h2>
-          <div className="text-gray-600 text-sm mb-2">
-            {formatDate(post.date)}
-          </div>
-          {post.excerpt && (
-            <p className="text-gray-700 mb-4">{post.excerpt}</p>
-          )}
+            </h2>
+            {post.excerpt && (
+              <p className="text-neutral-600 dark:text-neutral-400 mt-2 line-clamp-2">{post.excerpt}</p>
+            )}
+          </a>
           {post.tags && (
-            <div className="flex gap-2">
+            <div className="flex gap-2 mt-3">
               {post.tags.map(tag => (
                 <span
                   key={tag}
-                  className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-sm"
+                  className="px-2 py-1 bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-md text-xs"
                 >
                   {tag}
                 </span>
               ))}
             </div>
           )}
-          <a
-            href={`/blog/${post.slug}`}
-            className="text-blue-600 hover:underline mt-2 inline-block"
-          >
-            Read more →
-          </a>
         </article>
       ))}
     </div>
   );
-}
+}

package/dist/templates/docs/app/layout.tsx

@@ -13,16 +13,16 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-white dark:bg-neutral-900">
       <Header />
       <div className="flex">
         <Sidebar />
-        <main className="flex-1 px-8 py-6 max-w-4xl">
-          <article className="prose prose-slate max-w-none">
+        <main className="flex-1 px-8 py-8 max-w-3xl">
+          <article className="prose prose-neutral dark:prose-invert max-w-none">
             {children}
           </article>
         </main>
       </div>
     </div>
   );
-}
+}

package/dist/templates/docs/components/Header.tsx

@@ -6,44 +6,47 @@ export function Header() {
   const [searchQuery, setSearchQuery] = useState("");
 
   return (
-    <header className="border-b border-gray-200 bg-white sticky top-0 z-50">
-      <div className="px-6 py-4 flex items-center justify-between">
+    <header className="sticky top-0 z-50 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-lg border-b border-neutral-200 dark:border-neutral-800">
+      <div className="px-6 h-14 flex items-center justify-between">
         <div className="flex items-center gap-8">
-          <a href="/" className="text-xl font-bold text-gray-900">
-            📚 My Docs
+          <a href="/" className="text-lg font-semibold text-neutral-900 dark:text-white">
+            Docs
           </a>
           <nav className="flex gap-6">
-            <a href="/docs" className="text-gray-600 hover:text-gray-900">
+            <a href="/docs" className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors">
               Docs
             </a>
-            <a href="/api" className="text-gray-600 hover:text-gray-900">
+            <a href="/docs/api" className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors">
               API
             </a>
-            <a href="/examples" className="text-gray-600 hover:text-gray-900">
+            <a href="/examples" className="text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors">
               Examples
             </a>
           </nav>
         </div>
         <div className="flex items-center gap-4">
-          <input
-            type="search"
-            placeholder="Search docs..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-          />
-          <select className="px-3 py-2 border border-gray-300 rounded-lg">
-            <option>v2.0</option>
-            <option>v1.0</option>
-          </select>
+          <div className="relative">
+            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+            </svg>
+            <input
+              type="search"
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-48 pl-9 pr-4 py-2 bg-neutral-100 dark:bg-neutral-800 border-0 rounded-lg text-sm text-neutral-900 dark:text-white placeholder-neutral-400 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+            />
+          </div>
           <a
-            href="https://github.com/example/docs"
-            className="text-gray-600 hover:text-gray-900"
+            href="https://github.com"
+            className="text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors"
           >
-            GitHub
+            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+            </svg>
           </a>
         </div>
       </div>
     </header>
   );
-}
+}

package/dist/templates/docs/components/Sidebar.tsx

@@ -37,22 +37,22 @@ export function Sidebar() {
   }, []);
 
   return (
-    <aside className="w-64 border-r border-gray-200 min-h-screen">
-      <nav className="p-6 space-y-8">
+    <aside className="w-56 shrink-0 border-r border-neutral-200 dark:border-neutral-800 min-h-[calc(100vh-3.5rem)]">
+      <nav className="p-4 space-y-6 sticky top-14">
         {navigation.map((section) => (
           <div key={section.title}>
-            <h3 className="font-semibold text-gray-900 mb-3">
+            <h3 className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-2 px-3">
               {section.title}
             </h3>
-            <ul className="space-y-2">
+            <ul className="space-y-0.5">
               {section.items.map((item) => (
                 <li key={item.href}>
                   <a
                     href={item.href}
-                    className={`block px-3 py-1.5 text-sm rounded-md transition-colors ${
+                    className={`block px-3 py-1.5 text-sm rounded-lg transition-colors ${
                       pathname === item.href
-                        ? "bg-blue-50 text-blue-700"
-                        : "text-gray-600 hover:text-gray-900 hover:bg-gray-50"
+                        ? "bg-blue-500/10 text-blue-500 font-medium"
+                        : "text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800"
                     }`}
                   >
                     {item.title}
@@ -65,4 +65,4 @@ export function Sidebar() {
       </nav>
     </aside>
   );
-}
+}

package/dist/templates/minimal/app/layout.tsx

@@ -4,8 +4,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="p-8">
-      {children}
+    <div className="min-h-screen bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100">
+      <main className="max-w-2xl mx-auto px-6 py-16">
+        {children}
+      </main>
     </div>
   );
 }

package/dist/templates/minimal/app/page.tsx

@@ -1,22 +1,22 @@
 export default function HomePage() {
   return (
-    <div className="max-w-2xl mx-auto">
-      <h1 className="text-4xl font-bold mb-4">
+    <div>
+      <h1 className="text-4xl font-bold text-neutral-900 dark:text-white mb-4">
         Welcome to Veryfront
       </h1>
-      <p className="text-gray-600 mb-8">
-        Edit <code className="bg-gray-100 px-1 rounded">app/page.tsx</code> to get started.
+      <p className="text-neutral-600 dark:text-neutral-400 mb-8">
+        Edit <code className="bg-neutral-100 dark:bg-neutral-800 px-1.5 py-0.5 rounded text-sm">app/page.tsx</code> to get started.
       </p>
-      <div className="flex gap-4">
+      <div className="flex gap-3">
         <a
           href="/about"
-          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          className="px-4 py-2 bg-blue-500 text-white rounded-full text-sm font-medium hover:bg-blue-600 transition-colors"
         >
           About
         </a>
         <a
-          href="https://github.com/veryfront/veryfront"
-          className="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50"
+          href="https://veryfront.com/docs"
+          className="px-4 py-2 bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white rounded-full text-sm font-medium hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
         >
           Documentation
         </a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "veryfront",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "Zero-config React meta-framework for building agentic AI applications",
   "type": "module",
   "main": "./dist/index.js",

package/dist/templates/ai/ai/tools/get-weather.ts

@@ -1,29 +0,0 @@
-import { tool } from "veryfront/ai";
-import { z } from "zod";
-
-export default tool({
-  description: "Get the current weather for a location",
-  inputSchema: z.object({
-    location: z.string().describe("The city and state, e.g. San Francisco, CA"),
-  }),
-  execute: ({ location }: { location: string }) => {
-    const mockWeather: Record<string, { temp: number; condition: string }> = {
-      "San Francisco, CA": { temp: 65, condition: "Foggy" },
-      "New York, NY": { temp: 75, condition: "Sunny" },
-      "London, UK": { temp: 60, condition: "Rainy" },
-      "Tokyo, Japan": { temp: 80, condition: "Humid" },
-    };
-
-    const weather = mockWeather[location] || {
-      temp: 70,
-      condition: "Clear",
-    };
-
-    return {
-      location,
-      temperature: weather.temp,
-      condition: weather.condition,
-      unit: "fahrenheit",
-    };
-  },
-});