astro-component-kit 0.0.1 → 0.1.1

package/src/components/lib/sections/LayoutShowcase.astro

@@ -0,0 +1,317 @@
+---
+// LayoutShowcase.astro — Premium layout section with live preview
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const { title = "Layout", subtitle = "Grids, containers, and structural sections." } = Astro.props;
+---
+
+<section class="layout-showcase">
+  <div class="container">
+    <div class="showcase-header">
+      <span class="showcase-eyebrow">🏗️ Layout</span>
+      <h2 class="showcase-title">{title}</h2>
+      <p class="showcase-subtitle">{subtitle}</p>
+    </div>
+
+    <div class="preview-stage">
+      <div class="preview-stage__inner">
+        <div class="layout-mockups">
+          <!-- Bento Grid -->
+          <div class="mockup-label">Bento Grid</div>
+          <div class="bento-grid">
+            <div class="bento-item bento-item--wide">
+              <span class="bento-item__label">Hero</span>
+            </div>
+            <div class="bento-item">
+              <span class="bento-item__label">Card</span>
+            </div>
+            <div class="bento-item">
+              <span class="bento-item__label">Card</span>
+            </div>
+            <div class="bento-item">
+              <span class="bento-item__label">Card</span>
+            </div>
+            <div class="bento-item bento-item--tall">
+              <span class="bento-item__label">Sidebar</span>
+            </div>
+          </div>
+
+          <!-- Split Screen -->
+          <div class="mockup-label">Split Screen</div>
+          <div class="split-screen">
+            <div class="split-screen__left">
+              <span class="split-screen__label">Content</span>
+            </div>
+            <div class="split-screen__right">
+              <span class="split-screen__label">Media</span>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <div class="mockup-label">Footer</div>
+          <div class="footer-mockup">
+            <div class="footer-mockup__top">
+              <div class="footer-mockup__brand">
+                <span class="footer-mockup__label">Brand</span>
+              </div>
+              <div class="footer-mockup__links">
+                <div class="footer-mockup__col">
+                  <span class="footer-mockup__label">Links</span>
+                </div>
+                <div class="footer-mockup__col">
+                  <span class="footer-mockup__label">Links</span>
+                </div>
+                <div class="footer-mockup__col">
+                  <span class="footer-mockup__label">Links</span>
+                </div>
+              </div>
+            </div>
+            <div class="footer-mockup__bottom">
+              <span class="footer-mockup__label">Copyright</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-code">
+      <code set:html={`&lt;LayoutSection variant="bento"&gt;{content}&lt;/LayoutSection&gt;`}></code>
+    </div>
+  </div>
+</section>
+
+<style>
+  .layout-showcase {
+    padding: var(--sp-16) 0;
+    position: relative;
+  }
+  .showcase-header {
+    text-align: center;
+    margin-bottom: var(--sp-10);
+  }
+  .showcase-eyebrow {
+    display: inline-block;
+    padding: 0.35rem 0.8rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--c-primary-light);
+    background: rgba(184,134,11,0.1);
+    border: 1px solid rgba(184,134,11,0.25);
+    border-radius: var(--r-full);
+    margin-bottom: var(--sp-4);
+  }
+  .showcase-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 800;
+    color: var(--c-text-1);
+    margin-bottom: var(--sp-3);
+  }
+  .showcase-subtitle {
+    font-size: 1.05rem;
+    color: var(--c-text-2);
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  /* Preview Stage */
+  .preview-stage {
+    padding: var(--sp-12);
+    background: rgba(10, 10, 10, 0.6);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-xl);
+    margin-bottom: var(--sp-6);
+    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  }
+  .preview-stage__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--sp-8);
+  }
+  .layout-mockups {
+    width: 100%;
+    max-width: 700px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-6);
+  }
+
+  .mockup-label {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--c-text-2);
+    margin-bottom: var(--sp-2);
+  }
+
+  /* Bento Grid */
+  .bento-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: auto auto;
+    gap: var(--sp-3);
+  }
+  .bento-item {
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-md);
+    min-height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .bento-item::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(184,134,11,0.05), transparent);
+    pointer-events: none;
+  }
+  .bento-item--wide {
+    grid-column: span 2;
+    min-height: 100px;
+  }
+  .bento-item--tall {
+    grid-row: span 2;
+    min-height: 100%;
+  }
+  .bento-item__label {
+    font-size: 0.75rem;
+    color: var(--c-text-2);
+    font-weight: 500;
+    opacity: 0.6;
+  }
+
+  /* Split Screen */
+  .split-screen {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--sp-3);
+    min-height: 140px;
+  }
+  .split-screen__left,
+  .split-screen__right {
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .split-screen__left::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(184,134,11,0.05), transparent);
+    pointer-events: none;
+  }
+  .split-screen__right::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(100,100,255,0.05), transparent);
+    pointer-events: none;
+  }
+  .split-screen__label {
+    font-size: 0.75rem;
+    color: var(--c-text-2);
+    font-weight: 500;
+    opacity: 0.6;
+  }
+
+  /* Footer Mockup */
+  .footer-mockup {
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-md);
+    overflow: hidden;
+  }
+  .footer-mockup__top {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: var(--sp-4);
+    padding: var(--sp-4);
+  }
+  .footer-mockup__brand {
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: var(--r-sm);
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .footer-mockup__links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--sp-3);
+  }
+  .footer-mockup__col {
+    background: rgba(255,255,255,0.03);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: var(--r-sm);
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .footer-mockup__bottom {
+    border-top: 1px solid rgba(255,255,255,0.06);
+    padding: var(--sp-3) var(--sp-4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .footer-mockup__label {
+    font-size: 0.7rem;
+    color: var(--c-text-2);
+    font-weight: 500;
+    opacity: 0.5;
+  }
+
+  .usage-code {
+    text-align: center;
+    padding: var(--sp-4);
+    background: rgba(255,255,255,0.02);
+    border-radius: var(--r-md);
+  }
+  .usage-code code {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--c-primary-light);
+  }
+
+  @media (max-width: 640px) {
+    .preview-stage { padding: var(--sp-8) var(--sp-4); }
+    .bento-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+    .bento-item--wide {
+      grid-column: span 2;
+    }
+    .bento-item--tall {
+      grid-row: span 1;
+      min-height: 80px;
+    }
+    .split-screen {
+      grid-template-columns: 1fr;
+    }
+    .footer-mockup__top {
+      grid-template-columns: 1fr;
+    }
+    .footer-mockup__links {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+</style>

package/src/components/lib/sections/NavigationShowcase.astro

@@ -0,0 +1,285 @@
+---
+// NavigationShowcase.astro — Premium navigation section with live preview
+interface Props {
+  title?: string;
+  subtitle?: string;
+}
+
+const { title = "Navigation", subtitle = "Navbars, tabs, breadcrumbs and navigation patterns." } = Astro.props;
+---
+
+<section class="navigation-showcase">
+  <div class="container">
+    <div class="showcase-header">
+      <span class="showcase-eyebrow">🧭 Navigation</span>
+      <h2 class="showcase-title">{title}</h2>
+      <p class="showcase-subtitle">{subtitle}</p>
+    </div>
+
+    <div class="preview-stage">
+      <div class="preview-stage__inner">
+        <div class="nav-mockups">
+
+          <!-- Navbar Mockup -->
+          <div class="navbar-mock">
+            <div class="navbar-mock__logo">
+              <div class="navbar-mock__logo-icon"></div>
+              <span>Brand</span>
+            </div>
+            <nav class="navbar-mock__links">
+              <a class="navbar-mock__link" href="#">Home</a>
+              <a class="navbar-mock__link" href="#">Features</a>
+              <a class="navbar-mock__link" href="#">Pricing</a>
+              <a class="navbar-mock__link" href="#">About</a>
+            </nav>
+            <button class="navbar-mock__cta">Get Started</button>
+          </div>
+
+          <!-- Tabs Mockup -->
+          <div class="tabs-mock">
+            <button class="tabs-mock__tab tabs-mock__tab--active">Overview</button>
+            <button class="tabs-mock__tab">Details</button>
+            <button class="tabs-mock__tab">Reviews</button>
+            <button class="tabs-mock__tab">Settings</button>
+            <div class="tabs-mock__indicator"></div>
+          </div>
+
+          <!-- Breadcrumbs Mockup -->
+          <div class="breadcrumbs-mock">
+            <a class="breadcrumbs-mock__item" href="#">Home</a>
+            <span class="breadcrumbs-mock__separator">/</span>
+            <a class="breadcrumbs-mock__item" href="#">Components</a>
+            <span class="breadcrumbs-mock__separator">/</span>
+            <span class="breadcrumbs-mock__item breadcrumbs-mock__item--active">Navigation</span>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-code">
+      <code>&lt;Navigation type="navbar | tabs | breadcrumbs"&gt;...&lt;/Navigation&gt;</code>
+    </div>
+  </div>
+</section>
+
+<style>
+  .navigation-showcase {
+    padding: var(--sp-16) 0;
+    position: relative;
+  }
+  .showcase-header {
+    text-align: center;
+    margin-bottom: var(--sp-10);
+  }
+  .showcase-eyebrow {
+    display: inline-block;
+    padding: 0.35rem 0.8rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--c-primary-light);
+    background: rgba(184,134,11,0.1);
+    border: 1px solid rgba(184,134,11,0.25);
+    border-radius: var(--r-full);
+    margin-bottom: var(--sp-4);
+  }
+  .showcase-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 800;
+    color: var(--c-text-1);
+    margin-bottom: var(--sp-3);
+  }
+  .showcase-subtitle {
+    font-size: 1.05rem;
+    color: var(--c-text-2);
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  /* Preview Stage */
+  .preview-stage {
+    padding: var(--sp-12);
+    background: rgba(10, 10, 10, 0.6);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-xl);
+    margin-bottom: var(--sp-6);
+    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  }
+  .preview-stage__inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .nav-mockups {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sp-8);
+    width: 100%;
+    max-width: 700px;
+  }
+
+  /* Navbar Mockup */
+  .navbar-mock {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 1.5rem;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: var(--r-lg);
+    backdrop-filter: blur(10px);
+  }
+  .navbar-mock__logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--c-text-1);
+  }
+  .navbar-mock__logo-icon {
+    width: 28px;
+    height: 28px;
+    border-radius: var(--r-md);
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+  }
+  .navbar-mock__links {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-5);
+  }
+  .navbar-mock__link {
+    font-size: 0.875rem;
+    color: var(--c-text-2);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+  .navbar-mock__link:hover {
+    color: var(--c-text-1);
+  }
+  .navbar-mock__cta {
+    padding: 0.5rem 1.3rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    font-family: var(--font-sans);
+    background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
+    color: #0a0a0a;
+    border: none;
+    border-radius: var(--r-md);
+    cursor: pointer;
+    box-shadow: 0 4px 16px rgba(184,134,11,0.25);
+    transition: all 0.25s ease;
+  }
+  .navbar-mock__cta:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 24px rgba(184,134,11,0.35);
+  }
+
+  /* Tabs Mockup */
+  .tabs-mock {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-end;
+    gap: var(--sp-6);
+    padding: 0 var(--sp-2);
+    border-bottom: 2px solid rgba(255,255,255,0.08);
+  }
+  .tabs-mock__tab {
+    padding: 0.7rem 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    font-family: var(--font-sans);
+    color: var(--c-text-2);
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: color 0.2s ease;
+    position: relative;
+    z-index: 1;
+  }
+  .tabs-mock__tab:hover {
+    color: var(--c-text-1);
+  }
+  .tabs-mock__tab--active {
+    color: var(--c-primary-light);
+    font-weight: 600;
+  }
+  .tabs-mock__indicator {
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 72px;
+    height: 2px;
+    background: var(--c-primary-light);
+    border-radius: var(--r-full);
+  }
+
+  /* Breadcrumbs Mockup */
+  .breadcrumbs-mock {
+    display: flex;
+    align-items: center;
+    gap: var(--sp-3);
+    font-size: 0.875rem;
+  }
+  .breadcrumbs-mock__item {
+    color: var(--c-text-2);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+  .breadcrumbs-mock__item:hover {
+    color: var(--c-text-1);
+  }
+  .breadcrumbs-mock__item--active {
+    color: var(--c-text-1);
+    font-weight: 600;
+  }
+  .breadcrumbs-mock__separator {
+    color: var(--c-text-2);
+    opacity: 0.5;
+  }
+
+  /* Usage Code */
+  .usage-code {
+    text-align: center;
+    padding: var(--sp-4);
+    background: rgba(255,255,255,0.02);
+    border-radius: var(--r-md);
+  }
+  .usage-code code {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--c-primary-light);
+  }
+
+  @media (max-width: 768px) {
+    .navbar-mock {
+      flex-direction: column;
+      gap: var(--sp-4);
+      padding: 1rem;
+    }
+    .navbar-mock__links {
+      gap: var(--sp-4);
+    }
+    .tabs-mock {
+      flex-wrap: wrap;
+      gap: var(--sp-4);
+    }
+    .tabs-mock__indicator {
+      display: none;
+    }
+    .preview-stage { padding: var(--sp-8) var(--sp-4); }
+  }
+
+  @media (max-width: 480px) {
+    .navbar-mock__links {
+      display: none;
+    }
+    .breadcrumbs-mock {
+      font-size: 0.8rem;
+      gap: var(--sp-2);
+    }
+  }
+</style>