create-fornix 0.0.11 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 kama kama
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/blocks/about-stats/about-stats.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * About Stats — about section with stat cards and trust strip.
+ *
+ * ALL text is sourced from the content collection (zero hardcoded strings).
+ * Content is read from `src/content/sections/about-stats.json`.
+ */
+import { getEntry } from "astro:content";
+
+interface StatCard {
+  icon: string;
+  value: string;
+  subtitle: string;
+  description?: string;
+}
+
+const locale = Astro.currentLocale ?? "en";
+const entry = await getEntry("sections", `${locale}/about-stats`);
+const {
+  badge = "",
+  headline = "",
+  description = "",
+  trustHeadline = "",
+} = entry?.data ?? {};
+const stats = (entry?.data?.stats ?? []) as StatCard[];
+const trustLabels = (entry?.data?.trustLabels ?? []) as string[];
+---
+
+<section class="about-stats">
+  <!-- Header -->
+  <div class="about-stats__header">
+    {badge && (
+      <span class="about-stats__badge">{badge}</span>
+    )}
+    <h2 class="about-stats__headline">{headline}</h2>
+    {description && (
+      <p class="about-stats__description">{description}</p>
+    )}
+  </div>
+
+  <!-- Stats Grid -->
+  <div class="about-stats__grid">
+    {stats.map((stat, i) => (
+      <div class="about-stats__card" style={`animation-delay: ${i * 100}ms`}>
+        <div class="about-stats__icon">{stat.icon}</div>
+        <div class="about-stats__value">{stat.value}</div>
+        <div class="about-stats__subtitle">{stat.subtitle}</div>
+        {stat.description && (
+          <p class="about-stats__card-desc">{stat.description}</p>
+        )}
+      </div>
+    ))}
+  </div>
+
+  <!-- Trust Strip -->
+  {trustLabels.length > 0 && (
+    <div class="about-stats__trust">
+      {trustHeadline && (
+        <p class="about-stats__trust-headline">{trustHeadline}</p>
+      )}
+      <div class="about-stats__trust-logos">
+        {trustLabels.map((label) => (
+          <span class="about-stats__trust-label">{label}</span>
+        ))}
+      </div>
+    </div>
+  )}
+</section>
+
+<style>
+  @import "../../styles/sections/about-stats.css";
+</style>

package/dist/blocks/about-stats/about-stats.css

@@ -0,0 +1,167 @@
+/* ── About Stats ──────────────────────────────────────── */
+
+.about-stats {
+  padding: 5rem 2rem;
+  background: var(--color-surface, rgba(0, 0, 0, 0.02));
+}
+
+/* ── Header ──────────────────────────────────────── */
+
+.about-stats__header {
+  max-width: 48rem;
+  margin: 0 auto 3.5rem;
+  text-align: center;
+}
+
+.about-stats__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 1rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--color-accent, #6366f1);
+  background: var(--color-accent-soft, rgba(99, 102, 241, 0.08));
+  border: 1px solid var(--color-accent-border, rgba(99, 102, 241, 0.15));
+  border-radius: 9999px;
+}
+
+.about-stats__headline {
+  font-size: clamp(1.75rem, 4vw, 2.75rem);
+  font-weight: 800;
+  line-height: 1.15;
+  letter-spacing: -0.025em;
+  color: var(--color-foreground, #0f172a);
+  margin: 0 0 1rem;
+}
+
+.about-stats__description {
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  line-height: 1.7;
+  color: var(--color-muted, #64748b);
+  max-width: 36rem;
+  margin: 0 auto;
+}
+
+/* ── Stats Grid ──────────────────────────────────── */
+
+.about-stats__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+  max-width: 1100px;
+  margin: 0 auto 3rem;
+}
+
+.about-stats__card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 2.5rem 2rem;
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
+  border-radius: 1.25rem;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.about-stats__card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
+}
+
+.about-stats__icon {
+  width: 3.5rem;
+  height: 3.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.75rem;
+  background: var(--color-accent-soft, rgba(99, 102, 241, 0.08));
+  border-radius: 0.875rem;
+  margin-bottom: 1.5rem;
+  transition: transform 0.4s ease;
+}
+
+.about-stats__card:hover .about-stats__icon {
+  transform: scale(1.1) rotate(6deg);
+}
+
+.about-stats__value {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 900;
+  line-height: 1.1;
+  color: var(--color-foreground, #0f172a);
+  margin-bottom: 0.25rem;
+}
+
+.about-stats__subtitle {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--color-muted, #64748b);
+  margin-bottom: 0.75rem;
+}
+
+.about-stats__card-desc {
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  color: var(--color-muted, #64748b);
+  margin: 0;
+}
+
+/* ── Trust Strip ──────────────────────────────────── */
+
+.about-stats__trust {
+  max-width: 48rem;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.about-stats__trust-headline {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-muted, #64748b);
+  margin: 0 0 1rem;
+}
+
+.about-stats__trust-logos {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem 2.5rem;
+}
+
+.about-stats__trust-label {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--color-foreground, #0f172a);
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+}
+
+.about-stats__trust-label:hover {
+  opacity: 0.8;
+}
+
+/* ── Responsive ──────────────────────────────────── */
+
+@media (max-width: 640px) {
+  .about-stats {
+    padding: 3rem 1.5rem;
+  }
+
+  .about-stats__grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .about-stats__card {
+    padding: 2rem 1.5rem;
+  }
+}

package/dist/blocks/about-stats/block.json

@@ -0,0 +1,78 @@
+{
+  "schemaVersion": 1,
+  "name": "about-stats",
+  "version": "1.0.0",
+  "type": "section",
+  "description": "About section with centered narrative, stat cards with icons, and optional trust strip of partner logos",
+  "category": "about",
+  "tags": ["about", "stats", "team", "mission", "social-proof"],
+  "dependencies": {},
+  "requires": [],
+  "conflicts": [],
+  "envVars": [],
+  "variants": ["default", "no-trust-strip"],
+  "slots": ["trust-strip"],
+  "files": [
+    {
+      "source": "about-stats.astro",
+      "destination": "src/components/sections/about-stats.astro"
+    },
+    {
+      "source": "about-stats.css",
+      "destination": "src/styles/sections/about-stats.css"
+    }
+  ],
+  "ai": {
+    "whenToUse": "Use for company/team introduction with key metrics. Great after a hero section to build credibility. Works well for SaaS, agencies, and product pages that want to combine narrative with social proof numbers.",
+    "whenNotToUse": "Don't use if you don't have meaningful stats to showcase. Avoid on minimal landing pages where a simple text block suffices.",
+    "pairsWith": ["hero-gradient", "hero-split", "stats-strip", "features-grid", "testimonials-wall"],
+    "contentSlots": {
+      "badge": {
+        "type": "string",
+        "description": "Small eyebrow label above the title (e.g. 'Our Mission')",
+        "maxLength": 30,
+        "example": "Our Mission"
+      },
+      "headline": {
+        "type": "string",
+        "description": "Section headline",
+        "maxLength": 80,
+        "example": "Crafting Digital Experiences That Matter"
+      },
+      "description": {
+        "type": "string",
+        "description": "Supporting paragraph about the company or team",
+        "maxLength": 300,
+        "example": "We're a team of designers and engineers obsessed with performance, accessibility, and beautiful interfaces."
+      },
+      "stats": {
+        "type": "array",
+        "description": "Stat cards with icon, value, subtitle, and description",
+        "minItems": 2,
+        "maxItems": 4,
+        "items": {
+          "icon": { "type": "string" },
+          "value": { "type": "string" },
+          "subtitle": { "type": "string" },
+          "description": { "type": "string" }
+        },
+        "example": [
+          { "icon": "⚡", "value": "99.9%", "subtitle": "Uptime", "description": "Enterprise-grade reliability across all deployments." },
+          { "icon": "🎨", "value": "50+", "subtitle": "Templates", "description": "Professionally designed, ready to customize." },
+          { "icon": "🌍", "value": "120+", "subtitle": "Countries", "description": "Serving users around the globe." }
+        ]
+      },
+      "trustLabels": {
+        "type": "array",
+        "description": "Optional list of partner/client names for social proof strip",
+        "items": { "type": "string" },
+        "example": ["Vercel", "Linear", "Stripe", "Notion"]
+      },
+      "trustHeadline": {
+        "type": "string",
+        "description": "Label above the trust strip",
+        "example": "Trusted by industry leaders"
+      }
+    }
+  }
+}

package/dist/blocks/about-stats/default-content.json

@@ -0,0 +1,12 @@
+{
+  "badge": "Our Mission",
+  "headline": "Crafting Digital Experiences That Matter",
+  "description": "We're a team of designers and engineers obsessed with performance, accessibility, and beautiful interfaces that users love.",
+  "stats": [
+    { "icon": "⚡", "value": "99.9%", "subtitle": "Uptime", "description": "Enterprise-grade reliability across all deployments." },
+    { "icon": "🎨", "value": "50+", "subtitle": "Templates", "description": "Professionally designed, ready to customize." },
+    { "icon": "🌍", "value": "120+", "subtitle": "Countries", "description": "Serving users around the globe." }
+  ],
+  "trustHeadline": "Trusted by industry leaders",
+  "trustLabels": ["Vercel", "Linear", "Stripe", "Notion"]
+}

package/dist/blocks/about-stats/schema.ts

@@ -0,0 +1,19 @@
+import { z } from "astro:content";
+
+const statCardSchema = z.object({
+  icon: z.string(),
+  value: z.string(),
+  subtitle: z.string(),
+  description: z.string().optional().default(""),
+});
+
+export const aboutStatsSchema = z.object({
+  badge: z.string().max(30).optional().default(""),
+  headline: z.string().max(80),
+  description: z.string().max(300).optional().default(""),
+  stats: z.array(statCardSchema).min(2).max(4),
+  trustHeadline: z.string().optional().default(""),
+  trustLabels: z.array(z.string()).optional().default([]),
+});
+
+export type AboutStatsContent = z.infer<typeof aboutStatsSchema>;

package/dist/blocks/about-timeline/about-timeline.astro

@@ -0,0 +1,106 @@
+---
+/**
+ * About Timeline — vertical milestone timeline with glowing nodes and alternating cards.
+ *
+ * ALL text is sourced from the content collection (zero hardcoded strings).
+ * Content is read from `src/content/sections/about-timeline.json`.
+ */
+import { getEntry } from "astro:content";
+
+interface Milestone {
+  year: string;
+  icon: string;
+  title: string;
+  description: string;
+  isCta?: boolean;
+}
+
+const locale = Astro.currentLocale ?? "en";
+const entry = await getEntry("sections", `${locale}/about-timeline`);
+const {
+  badge = "",
+  headline = "",
+  subheadline = "",
+  ctaText = "",
+  ctaHref = "#",
+} = entry?.data ?? {};
+const milestones = (entry?.data?.milestones ?? []) as Milestone[];
+---
+
+<section class="about-timeline">
+  <div class="about-timeline__inner">
+    <!-- Header -->
+    <div class="about-timeline__header">
+      {badge && <span class="about-timeline__badge">{badge}</span>}
+      <h2 class="about-timeline__headline">{headline}</h2>
+      {subheadline && <p class="about-timeline__subheadline">{subheadline}</p>}
+    </div>
+
+    <!-- Timeline -->
+    <div class="about-timeline__track">
+      {/* Central line */}
+      <div class="about-timeline__line" aria-hidden="true">
+        <div class="about-timeline__line-fill"></div>
+      </div>
+
+      {/* Milestones */}
+      {milestones.map((m, i) => (
+        <div
+          class:list={[
+            "about-timeline__milestone",
+            i % 2 === 0 ? "about-timeline__milestone--left" : "about-timeline__milestone--right",
+          ]}
+          data-timeline-index={i}
+        >
+          {/* Node */}
+          <div class="about-timeline__node">
+            <div class="about-timeline__node-ring">
+              <div class="about-timeline__node-icon">{m.icon}</div>
+            </div>
+            <div class="about-timeline__node-pulse" aria-hidden="true"></div>
+            <span class="about-timeline__year">{m.year}</span>
+          </div>
+
+          {/* Card */}
+          <div class:list={["about-timeline__card", m.isCta && "about-timeline__card--cta"]}>
+            <h3 class="about-timeline__card-title">{m.title}</h3>
+            <p class="about-timeline__card-desc">{m.description}</p>
+            {m.isCta && ctaText && (
+              <a href={ctaHref} class="about-timeline__card-cta">
+                {ctaText}
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                </svg>
+              </a>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<script>
+  function initTimeline() {
+    const milestones = document.querySelectorAll("[data-timeline-index]");
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("in-view");
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.3, rootMargin: "0px 0px -10% 0px" }
+    );
+    milestones.forEach((m) => observer.observe(m));
+  }
+
+  initTimeline();
+  document.addEventListener("astro:after-swap", initTimeline);
+</script>
+
+<style>
+  @import "../../styles/sections/about-timeline.css";
+</style>