@yoamigo.com/cli 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoamigo.com/cli",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "CLI for creating and managing YoAmigo templates",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",

package/templates/starter/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@yoamigo.com/core": "^0.1.0",
+    "@yoamigo.com/core": "^0.1.1",
     "react": "^19.2.1",
     "react-dom": "^19.2.1"
   },

package/templates/starter/src/App.tsx

@@ -1,73 +1,18 @@
-import { YaText, YaImage, YaLink } from '@yoamigo.com/core'
-import { Router } from '@yoamigo.com/core/router'
+import { Router, Route } from '@yoamigo.com/core/router'
+import { Header } from './components/Header'
+import { Footer } from './components/Footer'
+import { HomePage } from './pages/HomePage'
+import { AboutPage } from './pages/AboutPage'
+import { ContactPage } from './pages/ContactPage'
 
-function HomePage() {
+function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-white">
-      {/* Hero Section */}
-      <section className="container mx-auto px-4 py-20">
-        <div className="text-center max-w-3xl mx-auto">
-          <h1 className="text-5xl font-bold mb-6">
-            <YaText fieldId="hero.title" as="span">
-              Welcome to YoAmigo
-            </YaText>
-          </h1>
-          <p className="text-xl text-gray-300 mb-8">
-            <YaText fieldId="hero.subtitle" as="span">
-              Build beautiful websites with our template system.
-              Click any text to edit it in the builder.
-            </YaText>
-          </p>
-          <div className="flex gap-4 justify-center">
-            <YaLink fieldId="hero.cta1" href="#about" className="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition-colors">
-              Learn More
-            </YaLink>
-            <YaLink fieldId="hero.cta2" href="#contact" className="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium transition-colors">
-              Contact
-            </YaLink>
-          </div>
-        </div>
-      </section>
-
-      {/* About Section */}
-      <section id="about" className="container mx-auto px-4 py-20">
-        <div className="max-w-3xl mx-auto">
-          <h2 className="text-3xl font-bold mb-6 text-center">
-            <YaText fieldId="about.title" as="span">
-              About Us
-            </YaText>
-          </h2>
-          <p className="text-gray-300 text-center">
-            <YaText fieldId="about.description" as="span">
-              We create beautiful, responsive templates for modern websites.
-              Our templates are designed to be easy to customize and deploy.
-            </YaText>
-          </p>
-        </div>
-      </section>
-
-      {/* Contact Section */}
-      <section id="contact" className="container mx-auto px-4 py-20">
-        <div className="max-w-3xl mx-auto text-center">
-          <h2 className="text-3xl font-bold mb-6">
-            <YaText fieldId="contact.title" as="span">
-              Get in Touch
-            </YaText>
-          </h2>
-          <p className="text-gray-300 mb-8">
-            <YaText fieldId="contact.description" as="span">
-              Have questions? We'd love to hear from you.
-            </YaText>
-          </p>
-        </div>
-      </section>
-
-      {/* Footer */}
-      <footer className="border-t border-gray-800 py-8">
-        <div className="container mx-auto px-4 text-center text-gray-400">
-          <p>Built with YoAmigo</p>
-        </div>
-      </footer>
+    <div className="min-h-screen flex flex-col bg-white">
+      <Header />
+      <main className="flex-1">
+        {children}
+      </main>
+      <Footer />
     </div>
   )
 }
@@ -75,7 +20,11 @@ function HomePage() {
 export default function App() {
   return (
     <Router>
-      <HomePage />
+      <Layout>
+        <Route path="/" component={HomePage} />
+        <Route path="/about" component={AboutPage} />
+        <Route path="/contact" component={ContactPage} />
+      </Layout>
     </Router>
   )
 }

package/templates/starter/src/components/Footer.tsx

@@ -0,0 +1,15 @@
+import { YaText } from '@yoamigo.com/core'
+
+export function Footer() {
+  return (
+    <footer className="bg-gray-100 border-t border-gray-200">
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center text-gray-600">
+          <YaText fieldId="footer.copyright" as="p">
+            © 2025 My Website. All rights reserved.
+          </YaText>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/templates/starter/src/components/Header.tsx

@@ -0,0 +1,31 @@
+import { YaText, YaLink } from '@yoamigo.com/core'
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-50 bg-white border-b border-gray-200">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo */}
+          <YaLink fieldId="site.logoLink" href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700 transition-colors">
+            <YaText fieldId="site.name" as="span">
+              My Website
+            </YaText>
+          </YaLink>
+
+          {/* Navigation */}
+          <nav className="flex items-center gap-8">
+            <YaLink fieldId="nav.homeLink" href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
+              Home
+            </YaLink>
+            <YaLink fieldId="nav.aboutLink" href="/about" className="text-gray-600 hover:text-gray-900 transition-colors">
+              About
+            </YaLink>
+            <YaLink fieldId="nav.contactLink" href="/contact" className="text-gray-600 hover:text-gray-900 transition-colors">
+              Contact
+            </YaLink>
+          </nav>
+        </div>
+      </div>
+    </header>
+  )
+}

package/templates/starter/src/content.json

@@ -1,8 +1,27 @@
 {
-  "hero.title": "Welcome to YoAmigo",
-  "hero.subtitle": "Build beautiful websites with our template system. Click any text to edit it in the builder.",
+  "site.name": "My Website",
+  "hero.title": "Build Something Amazing",
+  "hero.subtitle": "Create beautiful, modern websites with our intuitive template system. Click any text to customize it in the builder.",
+  "features.title": "Why Choose Us",
+  "feature1.title": "Fast & Reliable",
+  "feature1.description": "Built for speed and reliability. Your website loads instantly on any device.",
+  "feature2.title": "Easy to Customize",
+  "feature2.description": "Click any text to edit it. Change colors, fonts, and layouts with ease.",
+  "feature3.title": "Secure & Modern",
+  "feature3.description": "Built with the latest web technologies. Secure, accessible, and SEO-friendly.",
   "about.title": "About Us",
-  "about.description": "We create beautiful, responsive templates for modern websites. Our templates are designed to be easy to customize and deploy.",
-  "contact.title": "Get in Touch",
-  "contact.description": "Have questions? We'd love to hear from you."
+  "about.subtitle": "Learn more about who we are and what we do.",
+  "about.missionTitle": "Our Mission",
+  "about.missionText": "We believe everyone deserves a beautiful website. Our mission is to make professional web design accessible to all, without requiring technical expertise. We provide intuitive tools that let you focus on what matters most—your content and your customers.",
+  "about.storyTitle": "Our Story",
+  "about.storyText": "Founded with a simple idea: building websites should be fun, not frustrating. We've helped thousands of businesses and creators bring their ideas to life online. From small portfolios to growing businesses, we're here to help you succeed.",
+  "contact.title": "Contact Us",
+  "contact.subtitle": "Have questions? We'd love to hear from you.",
+  "contact.emailTitle": "Email",
+  "contact.emailValue": "hello@example.com",
+  "contact.phoneTitle": "Phone",
+  "contact.phoneValue": "(555) 123-4567",
+  "contact.addressTitle": "Address",
+  "contact.addressValue": "123 Main Street, Suite 100\nSan Francisco, CA 94102",
+  "footer.copyright": "© 2025 My Website. All rights reserved."
 }

package/templates/starter/src/pages/AboutPage.tsx

@@ -0,0 +1,62 @@
+import { YaText } from '@yoamigo.com/core'
+
+export function AboutPage() {
+  return (
+    <div>
+      {/* Hero Section */}
+      <section className="bg-gray-50 py-16">
+        <div className="container mx-auto px-4">
+          <div className="text-center max-w-3xl mx-auto">
+            <h1 className="text-4xl font-bold text-gray-900 mb-4">
+              <YaText fieldId="about.title" as="span">
+                About Us
+              </YaText>
+            </h1>
+            <p className="text-xl text-gray-600">
+              <YaText fieldId="about.subtitle" as="span">
+                Learn more about who we are and what we do.
+              </YaText>
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Content Section */}
+      <section className="py-16">
+        <div className="container mx-auto px-4">
+          <div className="max-w-3xl mx-auto">
+            <div className="prose prose-lg">
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                <YaText fieldId="about.missionTitle" as="span">
+                  Our Mission
+                </YaText>
+              </h2>
+              <p className="text-gray-600 mb-8">
+                <YaText fieldId="about.missionText" as="span">
+                  We believe everyone deserves a beautiful website. Our mission is to make
+                  professional web design accessible to all, without requiring technical expertise.
+                  We provide intuitive tools that let you focus on what matters most—your content
+                  and your customers.
+                </YaText>
+              </p>
+
+              <h2 className="text-2xl font-bold text-gray-900 mb-4">
+                <YaText fieldId="about.storyTitle" as="span">
+                  Our Story
+                </YaText>
+              </h2>
+              <p className="text-gray-600 mb-8">
+                <YaText fieldId="about.storyText" as="span">
+                  Founded with a simple idea: building websites should be fun, not frustrating.
+                  We've helped thousands of businesses and creators bring their ideas to life
+                  online. From small portfolios to growing businesses, we're here to help you
+                  succeed.
+                </YaText>
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/templates/starter/src/pages/ContactPage.tsx

@@ -0,0 +1,94 @@
+import { YaText } from '@yoamigo.com/core'
+
+export function ContactPage() {
+  return (
+    <div>
+      {/* Hero Section */}
+      <section className="bg-gray-50 py-16">
+        <div className="container mx-auto px-4">
+          <div className="text-center max-w-3xl mx-auto">
+            <h1 className="text-4xl font-bold text-gray-900 mb-4">
+              <YaText fieldId="contact.title" as="span">
+                Contact Us
+              </YaText>
+            </h1>
+            <p className="text-xl text-gray-600">
+              <YaText fieldId="contact.subtitle" as="span">
+                Have questions? We'd love to hear from you.
+              </YaText>
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Contact Info Section */}
+      <section className="py-16">
+        <div className="container mx-auto px-4">
+          <div className="max-w-2xl mx-auto">
+            <div className="grid md:grid-cols-2 gap-8">
+              {/* Email */}
+              <div className="bg-white p-6 rounded-lg border border-gray-200">
+                <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                  <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  <YaText fieldId="contact.emailTitle" as="span">
+                    Email
+                  </YaText>
+                </h3>
+                <p className="text-gray-600">
+                  <YaText fieldId="contact.emailValue" as="span">
+                    hello@example.com
+                  </YaText>
+                </p>
+              </div>
+
+              {/* Phone */}
+              <div className="bg-white p-6 rounded-lg border border-gray-200">
+                <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                  <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                  </svg>
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                  <YaText fieldId="contact.phoneTitle" as="span">
+                    Phone
+                  </YaText>
+                </h3>
+                <p className="text-gray-600">
+                  <YaText fieldId="contact.phoneValue" as="span">
+                    (555) 123-4567
+                  </YaText>
+                </p>
+              </div>
+            </div>
+
+            {/* Address */}
+            <div className="mt-8 bg-white p-6 rounded-lg border border-gray-200">
+              <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
+                <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                <YaText fieldId="contact.addressTitle" as="span">
+                  Address
+                </YaText>
+              </h3>
+              <p className="text-gray-600">
+                <YaText fieldId="contact.addressValue" as="span">
+                  123 Main Street, Suite 100
+                  <br />
+                  San Francisco, CA 94102
+                </YaText>
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/templates/starter/src/pages/HomePage.tsx

@@ -0,0 +1,111 @@
+import { YaText, YaLink } from '@yoamigo.com/core'
+
+export function HomePage() {
+  return (
+    <div>
+      {/* Hero Section */}
+      <section className="bg-gradient-to-b from-gray-50 to-white py-20">
+        <div className="container mx-auto px-4">
+          <div className="text-center max-w-3xl mx-auto">
+            <h1 className="text-5xl font-bold text-gray-900 mb-6">
+              <YaText fieldId="hero.title" as="span">
+                Build Something Amazing
+              </YaText>
+            </h1>
+            <p className="text-xl text-gray-600 mb-8">
+              <YaText fieldId="hero.subtitle" as="span">
+                Create beautiful, modern websites with our intuitive template system.
+                Click any text to customize it in the builder.
+              </YaText>
+            </p>
+            <div className="flex gap-4 justify-center">
+              <YaLink
+                fieldId="hero.ctaLink"
+                href="/contact"
+                className="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
+              >
+                Get Started
+              </YaLink>
+              <YaLink
+                fieldId="hero.secondaryLink"
+                href="/about"
+                className="px-8 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg font-medium transition-colors"
+              >
+                Learn More
+              </YaLink>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20">
+        <div className="container mx-auto px-4">
+          <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">
+            <YaText fieldId="features.title" as="span">
+              Why Choose Us
+            </YaText>
+          </h2>
+          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+            {/* Feature 1 */}
+            <div className="text-center p-6">
+              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                <YaText fieldId="feature1.title" as="span">
+                  Fast & Reliable
+                </YaText>
+              </h3>
+              <p className="text-gray-600">
+                <YaText fieldId="feature1.description" as="span">
+                  Built for speed and reliability. Your website loads instantly on any device.
+                </YaText>
+              </p>
+            </div>
+
+            {/* Feature 2 */}
+            <div className="text-center p-6">
+              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <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>
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                <YaText fieldId="feature2.title" as="span">
+                  Easy to Customize
+                </YaText>
+              </h3>
+              <p className="text-gray-600">
+                <YaText fieldId="feature2.description" as="span">
+                  Click any text to edit it. Change colors, fonts, and layouts with ease.
+                </YaText>
+              </p>
+            </div>
+
+            {/* Feature 3 */}
+            <div className="text-center p-6">
+              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <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>
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                <YaText fieldId="feature3.title" as="span">
+                  Secure & Modern
+                </YaText>
+              </h3>
+              <p className="text-gray-600">
+                <YaText fieldId="feature3.description" as="span">
+                  Built with the latest web technologies. Secure, accessible, and SEO-friendly.
+                </YaText>
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/templates/starter/src/styles/globals.css

@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@import '@yoamigo.com/core/styles';
+@import '@yoamigo.com/core/styles.css';
 
 /* Custom Styles */
 body {