Improve landing-section component.

Author: koculu

frontend/docs/componentGuide.ts

@@ -57,8 +57,8 @@ Thirteen components turn a page into a useful sequence: introduce the idea, expl
     <h3>Landing<wbr/>Section</h3>
     <Badge tone="neutral">Section rhythm</Badge>
     <p>
-      Introduce a section and arrange its content beside a clear heading at
-      larger breakpoints.
+      Give each section a clear introduction, generous spacing, and a responsive
+      content layout.
     </p>
     <a href="/components/landing/landing-section/">Explore LandingSection ↗</a>
   </article>

frontend/purestack.studio/components/landing/index.mdx

@@ -0,0 +1,17 @@
+<LandingSection
+  class="landing-section-demo"
+  columnsLg="2"
+  tone="neutral"
+  variant="surfaceAlt"
+>
+  <Panel class="landing-section-demo__feature" variant="surface">
+    <IconFrame name="lucide:layers" tone="accent" variant="surface"/>
+    <h3>Start with good foundations</h3>
+    <p>Reusable components give every page a familiar structure.</p>
+  </Panel>
+  <Panel class="landing-section-demo__feature" variant="surface">
+    <IconFrame name="lucide:sparkles" tone="secondary" variant="surface"/>
+    <h3>Finish with your own details</h3>
+    <p>Your content and ideas give the experience its character.</p>
+  </Panel>
+</LandingSection>

frontend/purestack.studio/components/landing/landing-section/_content-section.mdx

@@ -0,0 +1,33 @@
+<LandingSection
+  class="landing-section-demo"
+  eyebrow="BUILT TO FIT TOGETHER"
+  title="Everything in its right place."
+  subtitle="A thoughtful foundation for your next idea. Bring your content, shape the details, and make it yours."
+  align="center"
+  columnsLg="3"
+  tone="neutral"
+  variant="surface"
+>
+  <Panel class="landing-section-demo__feature" variant="surfaceAlt">
+    <IconFrame name="lucide:layers" tone="accent" variant="surface"/>
+    <h3>Content with structure</h3>
+    <p>
+      Give your ideas a home with pages that are easy to write and maintain.
+    </p>
+  </Panel>
+  <Panel class="landing-section-demo__feature" variant="surfaceAlt">
+    <IconFrame name="lucide:palette" tone="secondary" variant="surface"/>
+    <h3>A consistent design</h3>
+    <p>
+      Make every detail feel connected, from the first heading to the final
+      link.
+    </p>
+  </Panel>
+  <Panel class="landing-section-demo__feature" variant="surfaceAlt">
+    <IconFrame name="lucide:mouse-pointer-2" tone="info" variant="surface"/>
+    <h3>Room to make it yours</h3>
+    <p>
+      Add the interactions your visitors need, exactly where they need them.
+    </p>
+  </Panel>
+</LandingSection>

frontend/purestack.studio/components/landing/landing-section/_feature-grid.mdx

@@ -0,0 +1,64 @@
+<LandingSection
+  class="landing-section-demo"
+  eyebrow="FROM IDEA TO SOMETHING REAL"
+  title="Less setup. More making."
+  subtitle="Keep your next release moving with a clear path from the first draft to the finishing touches."
+  layout="split"
+  alignItems="center"
+  tone="accent"
+  variant="surface"
+>
+  <template #actions>
+    <BtnLink
+      href="/guides/"
+      tone="accent"
+      icon="lucide:arrow-right"
+      iconPosition="end"
+    >
+      Explore the guides
+    </BtnLink>
+  </template>
+  <Panel
+    class="landing-section-demo__workflow"
+    tone="neutral"
+    variant="surface"
+  >
+    <Flex justify="between" align="center" wrap="true">
+      <span class="text-eyebrow">YOUR NEXT RELEASE</span>
+      <Badge tone="success">Ready to build</Badge>
+    </Flex>
+    <div class="landing-section-demo__step">
+      <IconFrame
+        name="lucide:check"
+        tone="success"
+        variant="surface"
+        size="sm"/>
+      <div>
+        <strong>Tell your story</strong><span>Start with the content that matters.</span>
+      </div>
+    </div>
+    <div class="landing-section-demo__step">
+      <IconFrame
+        name="lucide:check"
+        tone="success"
+        variant="surface"
+        size="sm"/>
+      <div>
+        <strong>Find your rhythm</strong><span>Compose sections that work together.</span>
+      </div>
+    </div>
+    <div class="landing-section-demo__step">
+      <IconFrame
+        name="lucide:check"
+        tone="success"
+        variant="surface"
+        size="sm"/>
+      <div>
+        <strong>Make it your own</strong><span>Refine the details and share your work.</span>
+      </div>
+    </div>
+    <p class="landing-section-demo__note">
+      Three steps. One shared foundation.
+    </p>
+  </Panel>
+</LandingSection>