npm - @zoyth/simple-site-framework - Versions diffs - 1.0.0 - Mend

@zoyth/simple-site-framework 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/LICENSE +21 -0
package/README.md +572 -0
package/bin/create-simple-site.js +390 -0
package/bin/simple-site.js +664 -0
package/dist/client.js +135 -0
package/dist/client.js.map +1 -0
package/dist/client.mjs +107 -0
package/dist/client.mjs.map +1 -0
package/dist/components/index.d.mts +3936 -0
package/dist/components/index.d.ts +3936 -0
package/dist/components/index.js +38265 -0
package/dist/components/index.js.map +1 -0
package/dist/components/index.mjs +38173 -0
package/dist/components/index.mjs.map +1 -0
package/dist/config/index.d.mts +298 -0
package/dist/config/index.d.ts +298 -0
package/dist/config/index.js +19 -0
package/dist/config/index.js.map +1 -0
package/dist/config/index.mjs +1 -0
package/dist/config/index.mjs.map +1 -0
package/dist/index.d.mts +2184 -0
package/dist/index.d.ts +2184 -0
package/dist/index.js +1713 -0
package/dist/index.js.map +1 -0
package/dist/index.mjs +1605 -0
package/dist/index.mjs.map +1 -0
package/dist/lib/i18n/index.js +665 -0
package/dist/lib/i18n/index.js.map +1 -0
package/dist/lib/i18n/index.mjs +621 -0
package/dist/lib/i18n/index.mjs.map +1 -0
package/docs/DOCUMENTATION-STRUCTURE.md +1156 -0
package/docs/EXPORTS.md +125 -0
package/docs/PERFORMANCE.md +757 -0
package/docs/POLICY-PAGES.md +867 -0
package/docs/ROADMAP.md +334 -0
package/docs/SEO.md +455 -0
package/docs/SITEMAP.md +708 -0
package/docs/STRUCTURED-DATA.md +671 -0
package/docs/accessibility/common-patterns.md +529 -0
package/docs/accessibility/keyboard-navigation.md +263 -0
package/docs/accessibility/overview.md +122 -0
package/docs/accessibility/screen-readers.md +311 -0
package/docs/accessibility/wcag-compliance.md +159 -0
package/docs/api/README.md +164 -0
package/docs/api/components/Accessibility.md +356 -0
package/docs/api/components/Button.md +240 -0
package/docs/api/components/HeroSection.md +306 -0
package/docs/architecture/decisions.md +449 -0
package/docs/components/AnalyticsTracker.md +58 -0
package/docs/components/AnimatedCounter.md +48 -0
package/docs/components/AnimatedSection.md +56 -0
package/docs/components/BlogCard.md +42 -0
package/docs/components/Checkbox.md +56 -0
package/docs/components/CodeBlock.md +52 -0
package/docs/components/ComparisonTable.md +40 -0
package/docs/components/ComponentDemo.md +38 -0
package/docs/components/CountdownTimer.md +51 -0
package/docs/components/ExitIntentModal.md +56 -0
package/docs/components/FAQAccordion.md +66 -0
package/docs/components/FeaturesGrid.md +55 -0
package/docs/components/FileUpload.md +54 -0
package/docs/components/I18nMetaTags.md +55 -0
package/docs/components/Icon.md +53 -0
package/docs/components/LazySection.md +46 -0
package/docs/components/LiveProof.md +53 -0
package/docs/components/LoadingSpinner.md +46 -0
package/docs/components/MultiStepForm.md +48 -0
package/docs/components/PolicyLayout.md +55 -0
package/docs/components/PricingTable.md +49 -0
package/docs/components/Radio.md +59 -0
package/docs/components/SEOMetaTags.md +58 -0
package/docs/components/ScriptInjector.md +50 -0
package/docs/components/Select.md +72 -0
package/docs/components/Skeleton.md +47 -0
package/docs/components/StatsSection.md +48 -0
package/docs/components/StickyBar.md +62 -0
package/docs/components/StructuredData.md +99 -0
package/docs/components/StyleGuide.md +46 -0
package/docs/components/TableOfContents.md +47 -0
package/docs/components/TestimonialCarousel.md +42 -0
package/docs/components/Timeline.md +51 -0
package/docs/components/Toast.md +59 -0
package/docs/components/TrackedLink.md +62 -0
package/docs/components/TrustBadges.md +44 -0
package/docs/components/conversion/MobileCTA.md +363 -0
package/docs/components/forms/ContactForm.md +75 -0
package/docs/components/forms/FormField.md +74 -0
package/docs/components/layout/Footer.md +601 -0
package/docs/components/layout/Header.md +549 -0
package/docs/components/layout/LanguageSelector.md +54 -0
package/docs/components/layout/LanguageSwitcher.md +24 -0
package/docs/components/overview.md +447 -0
package/docs/components/sections/AboutSection.md +48 -0
package/docs/components/sections/CTASection.md +596 -0
package/docs/components/sections/CaseStudySection.md +47 -0
package/docs/components/sections/ContactSection.md +599 -0
package/docs/components/sections/FeatureSection.md +44 -0
package/docs/components/sections/HeroSection.md +404 -0
package/docs/components/sections/LogosSection.md +47 -0
package/docs/components/sections/PersonalTaxesSection.md +23 -0
package/docs/components/sections/RecruitingSection.md +23 -0
package/docs/components/sections/SecurePortalSection.md +23 -0
package/docs/components/sections/ServicePageLayout.md +52 -0
package/docs/components/sections/ServicesSection.md +49 -0
package/docs/components/sections/TestimonialSection.md +44 -0
package/docs/components/sections/WhyChooseUsSection.md +54 -0
package/docs/components/ui/Breadcrumb.md +70 -0
package/docs/components/ui/Button.md +514 -0
package/docs/components/ui/Card.md +501 -0
package/docs/components/ui/Input.md +54 -0
package/docs/components/ui/MobileLinks.md +43 -0
package/docs/components/ui/Modal.md +60 -0
package/docs/components/ui/Tabs.md +62 -0
package/docs/components/ui/Textarea.md +52 -0
package/docs/core-concepts/configuration-driven.md +552 -0
package/docs/core-concepts/overview.md +351 -0
package/docs/features/accessibility/README.md +73 -0
package/docs/features/accessibility/aria-support.md +177 -0
package/docs/features/accessibility/color-contrast.md +155 -0
package/docs/features/accessibility/focus-management.md +187 -0
package/docs/features/accessibility/testing.md +196 -0
package/docs/features/analytics/README.md +51 -0
package/docs/features/analytics/ab-testing.md +171 -0
package/docs/features/analytics/conversion-tracking.md +207 -0
package/docs/features/analytics/custom-events.md +219 -0
package/docs/features/analytics/privacy.md +198 -0
package/docs/features/analytics/setup.md +114 -0
package/docs/features/analytics/tracking-events.md +224 -0
package/docs/features/i18n/README.md +51 -0
package/docs/features/i18n/best-practices.md +273 -0
package/docs/features/i18n/configuration.md +84 -0
package/docs/features/i18n/formatting.md +133 -0
package/docs/features/i18n/locale-detection.md +122 -0
package/docs/features/i18n/routing.md +99 -0
package/docs/features/i18n/rtl-support.md +191 -0
package/docs/features/i18n/translations.md +129 -0
package/docs/features/internationalization.md +595 -0
package/docs/features/performance/README.md +77 -0
package/docs/features/performance/bundle-size.md +134 -0
package/docs/features/performance/caching.md +131 -0
package/docs/features/performance/code-splitting.md +121 -0
package/docs/features/performance/image-optimization.md +110 -0
package/docs/features/performance/lazy-loading.md +92 -0
package/docs/features/performance/monitoring.md +148 -0
package/docs/features/seo/README.md +51 -0
package/docs/features/seo/best-practices.md +184 -0
package/docs/features/seo/canonical-urls.md +182 -0
package/docs/features/seo/meta-tags.md +126 -0
package/docs/features/seo/open-graph.md +166 -0
package/docs/features/seo/robots-txt.md +146 -0
package/docs/features/seo/sitemaps.md +162 -0
package/docs/features/seo/structured-data.md +166 -0
package/docs/getting-started/installation.md +292 -0
package/docs/getting-started/introduction.md +195 -0
package/docs/getting-started/quick-start.md +460 -0
package/docs/guides/analytics-setup.md +616 -0
package/docs/i18n/CONFIGURATION.md +353 -0
package/docs/i18n/EXAMPLES.md +402 -0
package/docs/i18n/MIGRATION.md +260 -0
package/docs/i18n/SEO.md +392 -0
package/docs/i18n/STATIC-GENERATION-FIX.md +71 -0
package/docs/migration/changelog.md +136 -0
package/docs/migration/overview.md +233 -0
package/docs/recipes/adding-animations.md +475 -0
package/docs/recipes/forms-with-validation.md +393 -0
package/package.json +152 -0

package/docs/getting-started/quick-start.md ADDED Viewed

@@ -0,0 +1,460 @@
+# Quick Start Guide
+Build your first page with Simple Site Framework in 5 minutes.
+## Prerequisites
+You should have completed **[Installation](./installation.md)** and have:
+- ✅ Next.js 14+ project with App Router
+- ✅ Simple Site Framework installed
+- ✅ Tailwind CSS configured with framework in `content` array
+- ✅ Theme tokens defined in `tailwind.config.ts`
+## Step 1: Create Your First Page
+Create a homepage with a hero section:
+```typescript
+// src/app/page.tsx
+import { HeroSection } from '@zoyth/simple-site-framework';
+export default function HomePage() {
+  return (
+    <main>
+      <HeroSection
+        heading="Transform Your Business"
+        description="Professional consulting services that deliver real results"
+        cta={{
+          text: 'Get Started',
+          href: '/contact'
+        }}
+        variant="centered"
+      />
+    </main>
+  );
+}
+```
+**Run it:**
+```bash
+npm run dev
+```
+Visit `http://localhost:3000` - you should see a styled hero section.
+## Step 2: Add More Sections
+Build a complete landing page by stacking sections:
+```typescript
+// src/app/page.tsx
+import {
+  HeroSection,
+  FeaturesGrid,
+  TestimonialSection,
+  CTASection,
+} from '@zoyth/simple-site-framework';
+export default function HomePage() {
+  return (
+    <main>
+      <HeroSection
+        heading="Transform Your Business"
+        description="Professional consulting services that deliver real results"
+        cta={{
+          text: 'Get Started',
+          href: '/contact'
+        }}
+        variant="centered"
+      />
+      <FeaturesGrid
+        heading="Why Choose Us"
+        description="We deliver exceptional results through proven expertise"
+        features={[
+          {
+            title: 'Expert Team',
+            description: '15+ years of combined experience',
+            icon: 'users',
+          },
+          {
+            title: 'Proven Results',
+            description: 'Over 200 successful projects delivered',
+            icon: 'chart',
+          },
+          {
+            title: 'Fast Delivery',
+            description: 'Average project completion in 6 weeks',
+            icon: 'clock',
+          },
+        ]}
+        columns={3}
+      />
+      <TestimonialSection
+        heading="What Our Clients Say"
+        testimonials={[
+          {
+            quote: 'Working with this team transformed our business. Revenue increased 300% in 6 months.',
+            author: 'Jane Smith',
+            role: 'CEO',
+            company: 'Tech Startup Inc',
+          },
+        ]}
+      />
+      <CTASection
+        heading="Ready to Get Started?"
+        description="Join hundreds of satisfied clients"
+        primaryCTA={{
+          text: 'Start Free Trial',
+          href: '/signup',
+        }}
+        secondaryCTA={{
+          text: 'View Pricing',
+          href: '/pricing',
+        }}
+      />
+    </main>
+  );
+}
+```
+## Step 3: Add Layout Components
+Wrap your pages with Header and Footer:
+```typescript
+// src/app/layout.tsx
+import { Header, Footer } from '@zoyth/simple-site-framework';
+import './globals.css';
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <Header
+          logo={{
+            src: '/logo.svg',
+            alt: 'Company Logo',
+            width: 150,
+            height: 40,
+          }}
+          navigation={[
+            { label: 'Home', href: '/' },
+            { label: 'About', href: '/about' },
+            { label: 'Services', href: '/services' },
+            { label: 'Contact', href: '/contact' },
+          ]}
+          cta={{
+            text: 'Get Started',
+            href: '/contact',
+          }}
+        />
+        {children}
+        <Footer
+          companyName="Your Company"
+          tagline="Professional services that deliver"
+          sections={[
+            {
+              title: 'Company',
+              links: [
+                { label: 'About', href: '/about' },
+                { label: 'Careers', href: '/careers' },
+                { label: 'Contact', href: '/contact' },
+              ],
+            },
+            {
+              title: 'Legal',
+              links: [
+                { label: 'Privacy Policy', href: '/privacy' },
+                { label: 'Terms of Service', href: '/terms' },
+              ],
+            },
+          ]}
+          socialLinks={[
+            { platform: 'twitter', url: 'https://twitter.com/yourcompany' },
+            { platform: 'linkedin', url: 'https://linkedin.com/company/yourcompany' },
+          ]}
+        />
+      </body>
+    </html>
+  );
+}
+```
+## Step 4: Add a Contact Page
+Create a contact page with a form:
+```typescript
+// src/app/contact/page.tsx
+import { ContactSection } from '@zoyth/simple-site-framework';
+export default function ContactPage() {
+  return (
+    <main>
+      <ContactSection
+        heading="Get in Touch"
+        description="We'd love to hear from you"
+        email="contact@yourcompany.com"
+        phone="+1 (555) 123-4567"
+        locations={[
+          {
+            city: 'New York',
+            address: '123 Main St, Suite 100',
+            mapUrl: 'https://maps.google.com/?q=123+Main+St+New+York',
+          },
+        ]}
+        formConfig={{
+          fields: [
+            { name: 'name', type: 'text', label: 'Full Name', required: true },
+            { name: 'email', type: 'email', label: 'Email', required: true },
+            { name: 'company', type: 'text', label: 'Company' },
+            { name: 'message', type: 'textarea', label: 'Message', required: true },
+          ],
+          submitText: 'Send Message',
+          successMessage: 'Thanks! We\'ll get back to you within 24 hours.',
+        }}
+      />
+    </main>
+  );
+}
+```
+## Step 5: Customize Your Theme
+Update your theme tokens to match your brand:
+```typescript
+// tailwind.config.ts
+const config: Config = {
+  theme: {
+    extend: {
+      colors: {
+        // Your brand colors
+        primary: '#0066CC',
+        'primary-hover': '#0052A3',
+        secondary: '#1A1A1A',
+        'secondary-hover': '#000000',
+      },
+      fontFamily: {
+        // Your brand fonts
+        heading: ['Montserrat', 'sans-serif'],
+        body: ['Open Sans', 'sans-serif'],
+      },
+    },
+  },
+};
+```
+Load your fonts:
+```typescript
+// src/app/layout.tsx
+import { Montserrat, Open_Sans } from 'next/font/google';
+const montserrat = Montserrat({
+  subsets: ['latin'],
+  variable: '--font-heading',
+});
+const openSans = Open_Sans({
+  subsets: ['latin'],
+  variable: '--font-body',
+});
+// Apply to <html> tag
+<html className={`${montserrat.variable} ${openSans.variable}`}>
+```
+## What You've Built
+In 5 minutes, you've created:
+- ✅ A complete homepage with hero, features, testimonials, and CTA
+- ✅ Consistent header and footer across all pages
+- ✅ A working contact form with validation
+- ✅ Custom branding with your colors and fonts
+- ✅ Fully responsive, accessible components
+- ✅ SEO-optimized, server-rendered pages
+## Next Steps
+### Add Multi-Language Support
+```typescript
+// src/config/i18n.ts
+export const i18nConfig = {
+  locales: ['en', 'fr'],
+  defaultLocale: 'en',
+};
+```
+Then use `LocalizedString` for all content:
+```typescript
+<HeroSection
+  heading={{
+    en: 'Transform Your Business',
+    fr: 'Transformez votre entreprise'
+  }}
+  cta={{
+    text: { en: 'Get Started', fr: 'Commencer' },
+    href: '/contact'
+  }}
+  locale={locale}
+/>
+```
+See **[Internationalization](../features/internationalization.md)** for complete setup.
+### Add Analytics
+Track page views and conversions:
+```typescript
+// src/app/layout.tsx
+import { AnalyticsTracker } from '@zoyth/simple-site-framework/client';
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <AnalyticsTracker />
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+See **[Analytics Setup](../guides/analytics-setup.md)** for configuration.
+### Optimize SEO
+Add meta tags and structured data:
+```typescript
+// src/app/page.tsx
+export const metadata = {
+  title: 'Transform Your Business | Your Company',
+  description: 'Professional consulting services that deliver real results',
+  openGraph: {
+    title: 'Transform Your Business',
+    description: 'Professional consulting services',
+    images: ['/og-image.jpg'],
+  },
+};
+```
+See **[SEO Optimization](../guides/seo-optimization.md)** for best practices.
+### Add More Pages
+Create service pages, pricing, about, blog, etc.:
+```typescript
+// src/app/about/page.tsx
+import { AboutSection } from '@zoyth/simple-site-framework';
+export default function AboutPage() {
+  return (
+    <AboutSection
+      heading="About Our Company"
+      story="Founded in 2010, we've helped over 500 businesses transform..."
+      team={[
+        {
+          name: 'John Doe',
+          role: 'Founder & CEO',
+          bio: 'Former consultant at McKinsey...',
+          image: '/team/john.jpg',
+        },
+      ]}
+      stats={[
+        { value: '500+', label: 'Clients Served' },
+        { value: '15', label: 'Years Experience' },
+        { value: '98%', label: 'Satisfaction Rate' },
+      ]}
+    />
+  );
+}
+```
+## Common Patterns
+### Full-Width vs Contained
+Sections are full-width by default. Use `maxWidth` to contain content:
+```typescript
+<HeroSection
+  heading="Welcome"
+  maxWidth="xl" // Constrains content width
+/>
+```
+### Custom Styling
+Add custom classes when needed:
+```typescript
+<HeroSection
+  heading="Welcome"
+  className="bg-gradient-to-r from-blue-600 to-purple-600"
+/>
+```
+### Conditional Rendering
+Show different content based on conditions:
+```typescript
+{isPromoActive && (
+  <CTASection
+    heading="Limited Time Offer"
+    primaryCTA={{ text: 'Claim Discount', href: '/promo' }}
+  />
+)}
+```
+## Troubleshooting
+### Components Look Unstyled
+**Check:**
+1. Tailwind config includes framework in `content` array
+2. Theme tokens are defined (colors, fonts)
+3. Dev server was restarted after config changes
+### TypeScript Errors
+**Check:**
+1. Types are imported: `import type { LocalizedString } from '@zoyth/simple-site-framework'`
+2. Props match component signature
+3. TypeScript server was restarted in your editor
+### Build Errors
+**Check:**
+1. Client components imported from `/client`: `import { AnalyticsTracker } from '.../client'`
+2. Server components imported from main export: `import { HeroSection } from '...'`
+See **[Troubleshooting](../../TROUBLESHOOTING.md)** for detailed debugging.
+## Resources
+- **[Components Overview](../components/overview.md)** - Explore all available components
+- **[First Project Tutorial](./first-project.md)** - Step-by-step complete site
+- **[Configuration Guide](../core-concepts/configuration-driven.md)** - Deep dive into config approach
+- **[Examples](../examples/landing-page-simple.md)** - Real-world usage patterns
+---
+**Congratulations!** You've built your first site with Simple Site Framework. Explore the documentation to learn about advanced features like A/B testing, animations, and performance optimization.