@stacksjs/defaults 0.70.54

package/resources/components/Marketing/Header.stx

@@ -0,0 +1,51 @@
+<script>
+// Header component
+</script>
+
+<header class="py-10">
+  <Container>
+    <nav class="flex relative z-50 justify-between">
+      <div class="flex items-center md:gap-x-12">
+        <a href="#" aria-label="Home">
+          <Logo class="pb-1 h-10 w-auto" />
+        </a>
+
+        <div class="hidden md:flex md:gap-x-6">
+          <a href="#features" class="inline-block px-2 py-1 text-slate-700 text-sm hover:text-slate-900 hover:bg-slate-100 rounded-lg">
+            Features
+          </a>
+
+          <a href="#testimonials" class="inline-block px-2 py-1 text-slate-700 text-sm hover:text-slate-900 hover:bg-slate-100 rounded-lg">
+            Testimonials
+          </a>
+
+          <a href="#pricing" class="inline-block px-2 py-1 text-slate-700 text-sm hover:text-slate-900 hover:bg-slate-100 rounded-lg">
+            Dashboard
+          </a>
+
+          <a href="/blog" class="inline-block px-2 py-1 text-slate-700 text-sm hover:text-slate-900 hover:bg-slate-100 rounded-lg">
+            Blog
+          </a>
+        </div>
+      </div>
+
+      <div class="flex gap-x-5 items-center md:gap-x-8">
+        <div class="hidden md:block">
+          <a href="https://github.com/stacksjs/stacks/releases" class="inline-block px-2 py-1 text-slate-700 text-sm hover:text-slate-900 hover:bg-slate-100 rounded-lg">
+            Changelog
+          </a>
+        </div>
+
+        <a href="/docs" class="inline-flex items-center justify-center px-4 py-2 font-semibold text-sm text-white active:text-blue-100 hover:text-slate-100 bg-blue-600 active:bg-blue-800 hover:bg-blue-500 rounded-full focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus:outline-none">
+          <span>
+            Learn More
+          </span>
+        </a>
+
+        <div class="md:hidden -mr-1">
+          <!-- Mobile Navigation Component -->
+        </div>
+      </div>
+    </nav>
+  </Container>
+</header>

package/resources/components/Marketing/Hero.stx

@@ -0,0 +1,46 @@
+<script>
+// Hero section data
+</script>
+
+<Container class="pb-16 pt-20 lg:pt-32 text-center">
+  <h1 class="mx-auto max-w-4xl font-display font-medium text-5xl text-slate-900 tracking-tight sm:text-7xl">
+    Develop modern
+    <span class="relative text-blue-600 whitespace-nowrap">
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 418 42"
+        class="absolute left-0 top-2/3 pb-2 h-[0.54em] w-full fill-blue-300/70"
+        preserveAspectRatio="none"
+      >
+        <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
+      </svg>
+      <span class="relative">apps, clouds & libraries.</span><br>
+    </span>
+    Faster.
+  </h1>
+  <p class="mt-6 mx-auto max-w-2xl text-lg text-slate-700 tracking-tight">
+    Stacks is a type-safe full-stack framework for Web Artisans.
+    <br>Rapid development, for the best full-stack teams, and individuals.
+  </p>
+  <div class="flex gap-x-6 justify-center mt-10">
+    <a
+      href="/register"
+      class="inline-flex items-center justify-center px-4 py-2 font-semibold text-sm text-white active:text-blue-100 hover:text-slate-100 bg-blue-600 active:bg-blue-800 hover:bg-blue-500 rounded-full focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 focus:outline-none"
+    >
+      View Documentation
+    </a>
+
+    <a
+      href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+      class="inline-flex items-center justify-center px-4 py-2 font-semibold text-slate-700 text-sm active:text-slate-600 hover:text-slate-900 active:bg-slate-100 ring-1 ring-slate-200 rounded-full focus-visible:outline-blue-600 focus-visible:ring-slate-300 focus:outline-none hover:ring-slate-300"
+    >
+      <svg
+        aria-hidden="true"
+        class="flex-none h-3 w-3 fill-blue-600 group-active:fill-current"
+      >
+        <path d="m9.997 6.91-7.583 3.447A1 1 0 0 1 1 9.447V2.553a1 1 0 0 1 1.414-.91L9.997 5.09c.782.355.782 1.465 0 1.82Z" />
+      </svg>
+      <span class="ml-3">Get Started</span>
+    </a>
+  </div>
+</Container>

package/resources/components/Marketing/Layout.stx

@@ -0,0 +1,26 @@
+<script>
+interface LayoutProps {
+  inter?: string
+  lexend?: string
+}
+
+const { inter = {, lexend = { } = defineProps<LayoutProps>()
+
+subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+}
+
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-lexend',
+}
+</script>
+<html
+  lang="en"
+  class="h-full antialiased bg-white scroll-smooth {{ {{ }} }} inter.variable lexend.variable"
+>
+  <body class="flex flex-col h-full">
+    <slot />
+  </body>
+</html>

package/resources/components/Marketing/NavLink.stx

@@ -0,0 +1,13 @@
+<script>
+interface NavLinkProps {
+  href?: string
+}
+
+const { href = '' } = defineProps<NavLinkProps>()
+</script>
+<a
+  href="{{ href }}"
+  class="inline-block px-2 py-1 text-slate-700 text-sm hover:text-slate-900 hover:bg-slate-100 rounded-lg"
+>
+  <slot />
+</a>

package/resources/components/Marketing/Plan.stx

@@ -0,0 +1,43 @@
+<script>
+interface PlanProps {
+  name?: string
+  price?: string
+  description?: string
+  href?: string
+  features?: any[]
+  featured?: boolean
+}
+
+const { name = '', price = '', description = '', href = '', features = [], featured = false } = defineProps<PlanProps>()
+</script>
+<section
+  class="flex lg:order-none' flex-col 'lg:py-8' px-6 py-8 sm:px-8 bg-blue-600 rounded-3xl : ? 'order-first {{ }} featured"
+>
+  <h3 class="mt-5 font-display text-lg text-white">
+    {{ name }}
+  </h3>
+  <p class="mt-2 text-base : ? 'text-slate-400' 'text-white' {{ }} featured">
+    {{ description }}
+  </p>
+  <p class="order-first font-display font-light text-5xl text-white tracking-tight">
+    {{ price }}
+  </p>
+  <ul
+    role="list"
+    class="flex order-last flex-col gap-y-3 mt-10 text-sm : ? 'text-slate-200' 'text-white' {{ }} featured"
+  >
+    @foreach(features as feature)
+      <li class="flex">
+        <span class="h-5 w-5 : ? 'text-slate-400' 'text-white' {{ }} featured i-hugeicons-checkmark-circle-02"></span>
+        <span class="ml-4">{{ feature }}</span>
+      </li>
+    @endforeach
+  </ul>
+  <a
+    href="{{ href }}"
+    class="inline-flex items-center justify-center mt-8 px-4 py-2 font-semibold text-slate-900 text-sm text-white active:text-slate-400 active:text-slate-600 active:bg-blue-200 hover:bg-blue-50 ring-slate-700 rounded-full active:ring-slate-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white' focus-visible:outline-white' focus:outline-none hover:ring-slate-500 : ? 'bg-white 'ring-1 {{ }} featured"
+    aria-label="Get started with the {{ name }} plan for {{ price }}"
+  >
+    Get started
+  </a>
+</section>

package/resources/components/Marketing/Pricing.stx

@@ -0,0 +1,120 @@
+<script>
+interface PricingProps {
+  plans?: string
+}
+
+const { plans = [ } = defineProps<PricingProps>()
+
+{
+    name: 'Hobby (Early Bird Pricing)',
+    price: '$19',
+    description: 'Get a lifetime access with all upgrades included in the future.',
+    href: '/register',
+    features: [
+      'Send 10 quotes and invoices',
+      'Connect up to 2 bank accounts',
+      'Track up to 15 expenses per month',
+      'Manual payroll support',
+      'Export up to 3 reports',
+    ],
+    featured: false,
+  },
+  {
+    name: 'Pro (Early Bird Pricing)',
+    price: '$39',
+    description: 'Perfect for small / medium sized businesses.',
+    href: '/register',
+    features: [
+      'Send 25 quotes and invoices',
+      'Connect up to 5 bank accounts',
+      'Track up to 50 expenses per month',
+      'Automated payroll support',
+      'Export up to 12 reports',
+      'Bulk reconcile transactions',
+      'Track in multiple currencies',
+    ],
+    featured: true,
+  },
+  {
+    name: 'Enterprise',
+    price: 'Custom',
+    description: 'Contact us / subscribe via github sponsors',
+    href: '/register',
+    features: [
+      'Send unlimited quotes and invoices',
+      'Connect up to 15 bank accounts',
+      'Track up to 200 expenses per month',
+      'Automated payroll support',
+      'Export up to 25 reports, including TPS',
+    ],
+    featured: false,
+  },
+]
+</script>
+<section
+  id="pricing"
+  aria-label="Pricing"
+  class="py-20 sm:py-32 bg-slate-900"
+>
+  <Container>
+    <div class="md:text-center">
+      <h2 class="font-display text-3xl text-white tracking-tight sm:text-4xl">
+        <span class="relative whitespace-nowrap">
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 281 40"
+            preserveAspectRatio="none"
+            class="absolute left-0 top-1/2 h-[1em] w-full fill-blue-400"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M240.172 22.994c-8.007 1.246-15.477 2.23-31.26 4.114-18.506 2.21-26.323 2.977-34.487 3.386-2.971.149-3.727.324-6.566 1.523-15.124 6.388-43.775 9.404-69.425 7.31-26.207-2.14-50.986-7.103-78-15.624C10.912 20.7.988 16.143.734 14.657c-.066-.381.043-.344 1.324.456 10.423 6.506 49.649 16.322 77.8 19.468 23.708 2.65 38.249 2.95 55.821 1.156 9.407-.962 24.451-3.773 25.101-4.692.074-.104.053-.155-.058-.135-1.062.195-13.863-.271-18.848-.687-16.681-1.389-28.722-4.345-38.142-9.364-15.294-8.15-7.298-19.232 14.802-20.514 16.095-.934 32.793 1.517 47.423 6.96 13.524 5.033 17.942 12.326 11.463 18.922l-.859.874.697-.006c2.681-.026 15.304-1.302 29.208-2.953 25.845-3.07 35.659-4.519 54.027-7.978 9.863-1.858 11.021-2.048 13.055-2.145a61.901 61.901 0 0 0 4.506-.417c1.891-.259 2.151-.267 1.543-.047-.402.145-2.33.913-4.285 1.707-4.635 1.882-5.202 2.07-8.736 2.903-3.414.805-19.773 3.797-26.404 4.829Zm40.321-9.93c.1-.066.231-.085.29-.041.059.043-.024.096-.183.119-.177.024-.219-.007-.107-.079ZM172.299 26.22c9.364-6.058 5.161-12.039-12.304-17.51-11.656-3.653-23.145-5.47-35.243-5.576-22.552-.198-33.577 7.462-21.321 14.814 12.012 7.205 32.994 10.557 61.531 9.831 4.563-.116 5.372-.288 7.337-1.559Z"
+            />
+          </svg>
+          <span class="relative">Simple pricing,</span>
+        </span>
+        for everyone.
+      </h2>
+      <p class="mt-4 text-lg text-slate-400">
+        It doesn't matter what size your business is, our software won't
+        work well for you.
+      </p>
+    </div>
+    <div class="grid gap-y-10 grid-cols-1 lg:grid-cols-3 xl:gap-x-8 -mx-4 mt-16 sm:mx-auto lg:-mx-8 xl:mx-0 max-w-2xl lg:max-w-none">
+      @foreach(plans as plan)
+        <section
+          class="flex lg:order-none' flex-col 'lg:py-8' px-6 py-8 sm:px-8 bg-blue-600 rounded-3xl : ? 'order-first {{ }} plan.featured"
+        >
+          <h3 class="mt-5 font-display text-lg text-white">
+            {{ plan.name }}
+          </h3>
+          <p class="mt-2 text-base : ? 'text-slate-400' 'text-white' {{ }} plan.featured">
+            {{ plan.description }}
+          </p>
+          <p class="order-first font-display font-light text-5xl text-white tracking-tight">
+            {{ plan.price }}
+          </p>
+          <ul
+            role="list"
+            class="flex order-last flex-col gap-y-3 mt-10 text-sm : ? 'text-slate-200' 'text-white' {{ }} plan.featured"
+          >
+            @foreach(plan.features as feature)
+              <li class="flex">
+                <span class="h-5 w-5 : ? 'text-slate-400' 'text-white' {{ }} i-hugeicons-checkmark-circle-02 plan.featured"></span>
+                <span class="ml-4">{{ feature }}</span>
+              </li>
+            @endforeach
+          </ul>
+          <a
+            href="{{ plan.href }}"
+            class="inline-flex items-center justify-center mt-8 px-4 py-2 font-semibold text-slate-900 text-sm text-white hover:bg-blue-50' ring-slate-700 rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus:outline-none hover:ring-slate-500' : ? 'bg-white 'ring-1 {{ }} plan.featured"
+            aria-label="Get started with the {{ plan.name }} plan for {{ plan.price }}"
+          >
+            Get started
+          </a>
+        </section>
+      @endforeach
+    </div>
+  </Container>
+</section>

package/resources/components/Marketing/PrimaryFeatures.stx

@@ -0,0 +1,80 @@
+<script>
+interface PrimaryFeaturesProps {
+  features?: string
+  selectedIndex?: number
+}
+
+const { features = [, selectedIndex = 0 } = defineProps<PrimaryFeaturesProps>()
+
+{
+    title: 'Frontend',
+    description: 'Powered by a progressive UI Engine, building application interfaces has never been easier.',
+    image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75',
+  },
+  {
+    title: 'Backend',
+    description: 'Building serverless APIs has never been simpler. Focus on your business logic, not your infrastructure.',
+    image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75',
+  },
+  {
+    title: 'Cloud',
+    description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora in cum blanditiis? Qui omnis unde.',
+    image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75',
+  },
+  {
+    title: 'DX',
+    description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora in cum blanditiis? Qui omnis unde.',
+    image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fpayroll.517af4e7.png&w=1920&q=75',
+  },
+]
+</script>
+<section id="features" aria-label="Features for running your books" class="overflow-hidden relative pb-28 pt-20 sm:py-32 bg-blue-600">
+  <Container class="relative">
+    <div class="md:mx-auto max-w-2xl xl:max-w-none md:text-center">
+      <h2 class="font-display text-3xl text-white tracking-tight sm:text-4xl md:text-5xl">
+        Build. Ship. Grow.
+      </h2>
+      <p class="mt-6 text-blue-100 text-lg tracking-tight">
+        Stacks helps you build, ship, and grow your SaaS business with its powerful set of tools.
+      </p>
+    </div>
+
+    <div class="grid gap-y-2 grid-cols-1 items-center sm:gap-y-6 lg:grid-cols-12 mt-16 pt-10 md:mt-20 lg:pt-0">
+      <!-- Tab List -->
+      <div class="flex overflow-x-auto sm:overflow-visible lg:col-span-5 -mx-4 mt-16 pb-4 sm:mx-0 sm:pb-0">
+        <div class="flex lg:block relative z-10 gap-x-4 lg:gap-x-0 lg:gap-y-1 px-4 sm:mx-auto sm:px-0 lg:mx-0 whitespace-nowrap lg:whitespace-normal">
+          @foreach(features as feature)
+            <div class="relative px-4 py-1 lg:p-6 'hover:bg-white/10 lg:bg-white/10 lg:hover:bg-white/5' rounded-full lg:ring-1 lg:ring-inset lg:ring-white/10' lg:rounded-l-xl lg:rounded-r-none selectedIndex : ? 'bg-white {{ }} == group loop.index">
+              <h3>
+                <button class="font-display text-lg lg:text-white' lg:text-white' hover:text-white selectedIndex : ? 'text-blue-100 'text-blue-600 {{ }} == loop.index" data-action="select-tab" data-index="{{ loop.index }}">
+                  <span class="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none"></span>
+                  {{ feature.title }}
+                </button>
+              </h3>
+              <p class="hidden lg:block mt-2 text-sm group-hover:text-white' selectedIndex : ? 'text-blue-100 'text-white' {{ }} == loop.index">
+                {{ feature.description }}
+              </p>
+            </div>
+          @endforeach
+        </div>
+      </div>
+
+      <!-- Tab Panels -->
+      <div class="lg:col-span-7">
+        @foreach(features as feature)
+          <div class="selectedIndex : != ? '' 'hidden' {{ }} loop.index">
+            <div class="lg:hidden relative sm:px-6">
+              <div class="absolute bottom-[-4.25rem] top-[-6.5rem] sm:inset-x-0 bg-white/10 ring-1 ring-inset ring-white/10 sm:rounded-t-xl -inset-x-4"></div>
+              <p class="relative mx-auto max-w-2xl text-base text-white sm:text-center">
+                {{ feature.description }}
+              </p>
+            </div>
+            <div class="overflow-hidden mt-10 lg:mt-0 w-[45rem] sm:w-auto lg:w-[67.8125rem] bg-slate-50 rounded-xl shadow-blue-900/20 shadow-xl">
+              <img src="{{ feature.image }}" alt="" class="w-full">
+            </div>
+          </div>
+        @endforeach
+      </div>
+    </div>
+  </Container>
+</section>

package/resources/components/Marketing/PrimaryFeatures2.stx

@@ -0,0 +1,98 @@
+<script>
+interface PrimaryFeatures2Props {
+  backgroundImage?: string
+  screenshotPayroll?: string
+  features?: string
+  selectedIndex?: number
+  tabOrientation?: string
+}
+
+const { backgroundImage = '/images/screenshots/background-features.jpg', screenshotPayroll = '/images/screenshots/payroll.webp', features = [, selectedIndex = 0, tabOrientation = 'vertical' } = defineProps<PrimaryFeatures2Props>()
+
+{
+    title: 'Payroll',
+    description: "Keep track of everyone's salaries and whether or not they've been paid. Direct deposit not supported.",
+    image: screenshotPayroll,
+  },
+  {
+    title: 'Claim expenses',
+    description: "All of your receipts organized into one place, as long as you don't mind typing in the data by hand.",
+    image: '',
+  },
+  {
+    title: 'VAT handling',
+    description: "We only sell our software to companies who don't deal with VAT at all, so technically we do all the VAT stuff they need.",
+    image: '',
+  },
+  {
+    title: 'Reporting',
+    description: 'Easily export your data into an Excel spreadsheet where you can do whatever the hell you want with it.',
+    image: '',
+  },
+]
+</script>
+<section
+  id="features"
+  aria-label="Features for running your books"
+  class="overflow-hidden relative pb-28 pt-20 sm:py-32 bg-blue-600"
+>
+  <img
+    class="absolute left-1/2 top-1/2 max-w-none translate-x-[-44%] translate-y-[-42%]"
+    src="{{ backgroundImage }}"
+    alt=""
+    width="2245"
+    height="1636"
+  >
+  <Container class="relative">
+    <div class="md:mx-auto max-w-2xl xl:max-w-none md:text-center">
+      <h2 class="font-display text-3xl text-white tracking-tight sm:text-4xl md:text-5xl">
+        Everything you need to run your books.
+      </h2>
+      <p class="mt-6 text-blue-100 text-lg tracking-tight">
+        Well everything you need if you aren't that picky about minor
+        details like tax compliance.
+      </p>
+    </div>
+
+    <div class="grid gap-y-2 grid-cols-1 items-center sm:gap-y-6 lg:grid-cols-12 mt-16 pt-10 md:mt-20 lg:pt-0">
+      <div class="flex overflow-x-auto sm:overflow-visible lg:col-span-5 -mx-4 pb-4 sm:mx-0 sm:pb-0">
+        <div class="flex lg:block relative z-10 gap-x-4 lg:gap-x-0 lg:gap-y-1 px-4 sm:mx-auto sm:px-0 lg:mx-0 whitespace-nowrap lg:whitespace-normal">
+          @foreach(features as feature)
+            <div class="relative px-4 py-1 lg:p-6 'hover:bg-white/10 lg:bg-white/10 lg:hover:bg-white/5' rounded-full lg:ring-1 lg:ring-inset lg:ring-white/10' lg:rounded-l-xl lg:rounded-r-none selectedIndex : ? 'bg-white {{ }} == group loop.index">
+              <h3>
+                <button class="font-display text-lg lg:text-white' lg:text-white' hover:text-white selectedIndex : ? 'text-blue-100 'text-blue-600 {{ }} == loop.index" data-action="select-tab" data-index="{{ loop.index }}">
+                  <span class="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none"></span>
+                  {{ feature.title }}
+                </button>
+              </h3>
+              @if(tabOrientation == 'vertical')
+                <p class="hidden lg:block mt-2 text-sm group-hover:text-white' selectedIndex : ? 'text-blue-100 'text-white' {{ }} == loop.index">
+                  {{ feature.description }}
+                </p>
+              @endif
+            </div>
+          @endforeach
+        </div>
+      </div>
+
+      <div class="lg:col-span-7">
+        @foreach(features as feature)
+          <div class="selectedIndex : != ? '' 'hidden' {{ }} loop.index">
+            <div class="lg:hidden relative sm:px-6">
+              <div class="absolute bottom-[-4.25rem] top-[-6.5rem] sm:inset-x-0 bg-white/10 ring-1 ring-inset ring-white/10 sm:rounded-t-xl -inset-x-4"></div>
+              <p class="relative mx-auto max-w-2xl text-base text-white sm:text-center">
+                {{ feature.description }}
+              </p>
+            </div>
+
+            <div class="overflow-hidden mt-10 lg:mt-0 w-[45rem] sm:w-auto lg:w-[67.8125rem] bg-slate-50 rounded-xl shadow-blue-900/20 shadow-xl">
+              @if(feature.image)
+                <img class="w-full" src="{{ feature.image }}" alt="">
+              @endif
+            </div>
+          </div>
+        @endforeach
+      </div>
+    </div>
+  </Container>
+</section>

package/resources/components/Marketing/SecondaryFeatures.stx

@@ -0,0 +1,80 @@
+<script>
+interface SecondaryFeaturesProps {
+  features?: string
+  selectedIndex?: number
+}
+
+const { features = [, selectedIndex = 0 } = defineProps<SecondaryFeaturesProps>()
+
+{
+    name: 'Dashboard',
+    summary: 'The UI to your application.',
+    description: 'Whether you are a developer or a client, The Dashboard visualizes your data. Easily extend your admin panel.',
+    image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fprofit-loss.2a2f85d5.png&w=1200&q=75',
+    icon: '',
+  },
+  {
+    name: 'Buddy CLI',
+    summary: 'The Stacks runtime.',
+    description: "The Buddy toolkit makes it easy to interact with all your application needs. From development to releases and upgrades, this handy yet incredible tool is the last thing you'll ever need.",
+    image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fprofit-loss.2a2f85d5.png&w=1200&q=75',
+    icon: '',
+  },
+  {
+    name: 'CI/CD',
+    summary: 'Streamline Your Deployment Process',
+    description: 'Embrace the ease of our CI/CD solutions, designed to simplify your deployment and release management. With Stacks, you can focus on the what and why of your project, leaving the how to us.',
+    image: 'https://salient.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fprofit-loss.2a2f85d5.png&w=1200&q=75',
+    icon: '',
+  },
+]
+</script>
+<section id="secondary-features" aria-label="Features for simplifying everyday business tasks" class="pb-14 pt-20 sm:pb-20 sm:pt-32 lg:pb-32">
+  <Container>
+    <div class="mx-auto max-w-2xl md:text-center">
+      <h2 class="font-display text-3xl text-slate-900 tracking-tight sm:text-4xl">
+        A Developer Experience Like No Other
+      </h2>
+      <p class="mt-4 text-lg text-slate-700 tracking-tight">
+        Remove the boilerplate. Remove the repetition. Focus on what matters.
+      </p>
+    </div>
+
+    <!-- FeaturesDesktop -->
+    <div class="hidden lg:block lg:mt-20">
+      <div class="grid gap-x-8 grid-cols-3 pt-12">
+        @foreach(features as feature)
+          <div class="relative">
+            <div class="w-9 rounded-lg selectedIndex : ? 'bg-blue-600' 'bg-slate-500' {{ }} == loop.index">
+              <svg aria-hidden="true" class="h-9 w-9" fill="none">
+                {{ feature.icon }}
+              </svg>
+            </div>
+            <h3 class="mt-6 font-medium text-sm selectedIndex : ? 'text-blue-600' 'text-slate-600' {{ }} == loop.index">
+              <button data-action="select-feature" data-index="{{ loop.index }}">{{ feature.name }}</button>
+            </h3>
+            <p class="mt-2 font-display text-slate-900 text-xl">
+              {{ feature.summary }}
+            </p>
+            <p class="mt-4 text-slate-600 text-sm">
+              {{ feature.description }}
+            </p>
+          </div>
+        @endforeach
+      </div>
+
+      <div class="overflow-hidden relative mt-20 px-14 py-16 xl:px-16 bg-slate-200 rounded-4xl">
+        <div class="flex -mx-5">
+          @foreach(features as feature)
+            <div class="px-5 duration-500 ease-in-out transition selectedIndex : != ? '' 'opacity-60' {{ }} loop.index" style="transform: translateX(-{{ selectedIndex * 100 }}%)">
+              <div class="overflow-hidden w-[52.75rem] bg-white ring-1 ring-slate-500/10 rounded-xl shadow-lg shadow-slate-900/5">
+                <img class="w-full" src="{{ feature.image }}" alt="" sizes="52.75rem">
+              </div>
+            </div>
+          @endforeach
+        </div>
+        <div class="absolute inset-0 ring-1 ring-inset ring-slate-900/10 rounded-4xl pointer-events-none"></div>
+      </div>
+    </div>
+  </Container>
+</section>