Polish landing section layout

Author: iexitdev

apps/site/src/components/ChartKitFeatures.astro

@@ -49,23 +49,23 @@ const features = [
 >
   <div class="feature-section-pattern" aria-hidden="true"></div>
   <div
-    class="relative z-10 mx-auto max-w-[1320px] space-y-12 px-6 sm:px-8 md:space-y-16 md:px-10 lg:px-12 xl:px-16"
+    class="relative z-10 mx-auto max-w-[1320px] px-6 sm:px-8 md:px-10 lg:px-12 xl:px-16"
   >
-    <div class="relative z-10 mx-auto max-w-[700px] space-y-6 text-center">
+    <div class="relative z-10 mx-auto max-w-[700px] text-center">
       <h2
         class="text-[clamp(30px,4.6vw,48px)] font-semibold leading-[1.04] tracking-[-0.025em]"
       >
         Beyond static charts
       </h2>
       <p
-        class="mx-auto max-w-[34rem] text-base font-light leading-7 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
+        class="mx-auto mt-5 max-w-[34rem] text-base font-light leading-7 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
       >
         Let users tap, inspect, zoom, pan, and read richer datasets.
       </p>
     </div>
 
     <div
-      class="relative isolate mx-auto grid max-w-[1120px] grid-cols-1 overflow-hidden rounded-2xl border border-white/10 bg-black/[0.82] transition-colors duration-300 sm:grid-cols-2 lg:grid-cols-3 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-white/[0.82]"
+      class="relative isolate mx-auto mt-16 grid max-w-[1120px] grid-cols-1 overflow-hidden rounded-2xl border border-white/10 bg-black/[0.82] transition-colors duration-300 sm:grid-cols-2 lg:grid-cols-3 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-white/[0.82]"
     >
       <div class="feature-cross-wash" aria-hidden="true"></div>
       {

apps/site/src/components/Footer.astro

@@ -68,12 +68,12 @@ const footerGroups = [
   >
     <div>
       <nav
-        class="grid w-full grid-cols-2 gap-x-10 gap-y-8 sm:grid-cols-3 sm:gap-x-16 md:gap-x-24 lg:gap-x-32 xl:gap-x-40"
+        class="mx-auto grid w-full grid-cols-1 justify-items-center gap-x-10 gap-y-8 sm:grid-cols-3 sm:gap-x-16 md:gap-x-24 lg:gap-x-32 xl:gap-x-40"
         aria-label="Footer"
       >
         {
           footerGroups.map((group) => (
-            <div>
+            <div class="text-left">
               <h2 class="text-sm font-semibold tracking-[-0.01em] text-white transition-colors duration-300 [html[data-theme='light']_&]:text-black">
                 {group.title}
               </h2>
@@ -101,13 +101,15 @@ const footerGroups = [
     </div>
 
     <div
-      class="flex flex-col gap-4 pt-6 text-sm text-white/42 transition-colors duration-300 sm:flex-row sm:items-center sm:justify-between sm:pt-8 [html[data-theme='light']_&]:text-black/42"
+      class="mx-auto flex max-w-[960px] flex-col items-center gap-4 pt-6 text-center text-sm text-white/42 transition-colors duration-300 sm:flex-row sm:justify-between sm:pt-8 sm:text-left [html[data-theme='light']_&]:text-black/42"
     >
-      <p class="max-w-[17rem] leading-5 sm:max-w-none">
+      <p class="leading-5">
         © 2026 React Native Chart Kit. All rights reserved
       </p>
 
-      <div class="flex flex-wrap items-center gap-x-5 gap-y-3 sm:gap-x-7">
+      <div
+        class="flex flex-wrap items-center justify-center gap-x-5 gap-y-3 sm:justify-end sm:gap-x-7"
+      >
         <a
           href="mailto:privacy@chartkit.io"
           class="font-medium transition-colors hover:text-white [html[data-theme='light']_&]:hover:text-black"

apps/site/src/components/Pricing.astro

@@ -8,7 +8,7 @@ const proTiers = [
     name: "Solo",
     price: "$149",
     cadence: "/ year",
-    description: "For solo developers and independent apps.",
+    description: "For solo devs and independent apps.",
     cta: "Get Solo",
     href: "mailto:sales@chartkit.io?subject=Chart%20Kit%20Pro%20Solo%20license",
     features: [
@@ -24,7 +24,7 @@ const proTiers = [
     name: "Startup",
     price: "$399",
     cadence: "/ year",
-    description: "For small teams building a production app.",
+    description: "For small teams shipping one app.",
     cta: "Get Startup",
     href: "mailto:sales@chartkit.io?subject=Chart%20Kit%20Pro%20Startup%20license",
     features: [
@@ -40,7 +40,7 @@ const proTiers = [
     name: "Business",
     price: "$1,499",
     cadence: "/ year",
-    description: "For larger teams and multiple apps.",
+    description: "For growing teams and multiple apps.",
     cta: "Get Business",
     href: "mailto:sales@chartkit.io?subject=Chart%20Kit%20Pro%20Business%20license",
     features: [
@@ -68,18 +68,18 @@ const proTiersByKey = Object.fromEntries(
         Pricing
       </h2>
       <p
-        class="mx-auto mt-4 max-w-3xl text-base font-light leading-7 text-white/56 transition-colors duration-300 sm:text-[17px] [html[data-theme='light']_&]:text-black/56"
+        class="mx-auto mt-5 max-w-3xl text-base font-light leading-7 text-white/56 transition-colors duration-300 sm:text-[17px] [html[data-theme='light']_&]:text-black/56"
       >
         Pick Free, Pro, or Enterprise. Pro pricing changes by developer count,
         app scope, and company size.
       </p>
     </div>
 
     <div
-      class="mx-auto mt-10 grid max-w-[1120px] grid-cols-1 items-stretch gap-5 lg:grid-cols-3"
+      class="mx-auto mt-16 grid max-w-[1120px] grid-cols-1 items-stretch gap-5 lg:grid-cols-3"
     >
       <article
-        class="relative flex min-h-[438px] flex-col rounded-2xl border border-white/10 bg-white/[0.025] p-5 shadow-[0_24px_80px_rgba(0,0,0,0.24)] transition-colors duration-300 sm:p-6 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-black/[0.018] [html[data-theme='light']_&]:shadow-[0_24px_80px_rgba(0,0,0,0.055)]"
+        class="relative flex min-h-[470px] flex-col rounded-2xl border border-white/10 bg-white/[0.025] p-5 shadow-[0_24px_80px_rgba(0,0,0,0.24)] transition-colors duration-300 sm:p-6 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-black/[0.018] [html[data-theme='light']_&]:shadow-[0_24px_80px_rgba(0,0,0,0.055)]"
       >
         <div class="pricing-card-header">
           <div class="flex items-center gap-4">
@@ -105,14 +105,14 @@ const proTiersByKey = Object.fromEntries(
               </p>
             </div>
             <p
-              class="mt-2 text-sm font-light leading-5 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
+              class="mt-2 text-[13px] font-light leading-5 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
             >
-              Common React Native charts for free and commercial apps.
+              MIT React Native charts for apps.
             </p>
           </div>
         </div>
 
-        <ul class="mt-5 space-y-3 pb-8">
+        <ul class="my-auto space-y-3 py-8">
           {
             [
               "Line, area, bar, stacked bar",
@@ -135,15 +135,15 @@ const proTiersByKey = Object.fromEntries(
 
         <a
           href="/docs/react-native/getting-started/installation"
-          class="mt-auto inline-flex h-10 items-center justify-center rounded-full border border-white/15 px-5 text-sm font-semibold text-white/78 transition-colors hover:border-white/28 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white/45 [html[data-theme='light']_&]:border-black/15 [html[data-theme='light']_&]:text-black/70 [html[data-theme='light']_&]:hover:border-black/28 [html[data-theme='light']_&]:hover:text-black [html[data-theme='light']_&]:focus-visible:outline-black/40"
+          class="inline-flex h-10 items-center justify-center rounded-full border border-white/15 px-5 text-sm font-semibold text-white/78 transition-colors hover:border-white/28 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white/45 [html[data-theme='light']_&]:border-black/15 [html[data-theme='light']_&]:text-black/70 [html[data-theme='light']_&]:hover:border-black/28 [html[data-theme='light']_&]:hover:text-black [html[data-theme='light']_&]:focus-visible:outline-black/40"
         >
           Read the docs
         </a>
       </article>
 
       <article
         data-pro-pricing
-        class="relative isolate flex min-h-[438px] flex-col overflow-hidden rounded-2xl border border-white/30 bg-white/[0.035] p-5 shadow-[0_24px_80px_rgba(0,0,0,0.28)] transition-colors duration-300 sm:p-6 [html[data-theme='light']_&]:border-black/24 [html[data-theme='light']_&]:bg-black/[0.02] [html[data-theme='light']_&]:shadow-[0_24px_80px_rgba(0,0,0,0.07)]"
+        class="relative isolate flex min-h-[470px] flex-col overflow-hidden rounded-2xl border border-white/30 bg-white/[0.035] p-5 shadow-[0_24px_80px_rgba(0,0,0,0.28)] transition-colors duration-300 sm:p-6 [html[data-theme='light']_&]:border-black/24 [html[data-theme='light']_&]:bg-black/[0.02] [html[data-theme='light']_&]:shadow-[0_24px_80px_rgba(0,0,0,0.07)]"
       >
         <span class="pro-card-border-trail" aria-hidden="true">
           <span class="pro-card-border-trail-runner"></span>
@@ -191,7 +191,7 @@ const proTiersByKey = Object.fromEntries(
               </p>
             </div>
             <p
-              class="mt-2 text-sm font-light leading-5 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
+              class="mt-2 text-[13px] font-light leading-5 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
               data-pro-description
             >
               {defaultProTier.description}
@@ -232,7 +232,7 @@ const proTiersByKey = Object.fromEntries(
           </div>
         </div>
 
-        <ul class="mt-5 space-y-3 pb-8" data-pro-features>
+        <ul class="my-auto -translate-y-2 space-y-3 py-8" data-pro-features>
           {
             defaultProTier.features.map((feature) => (
               <li class="flex items-center gap-3 text-sm font-medium text-white/62 transition-colors duration-300 [html[data-theme='light']_&]:text-black/62">
@@ -251,14 +251,14 @@ const proTiersByKey = Object.fromEntries(
         <a
           href={defaultProTier.href}
           data-pro-cta
-          class="mt-auto inline-flex h-10 items-center justify-center rounded-full bg-white px-5 text-sm font-semibold text-black transition-colors hover:bg-white/88 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white/45 [html[data-theme='light']_&]:bg-black [html[data-theme='light']_&]:text-white [html[data-theme='light']_&]:hover:bg-black/82 [html[data-theme='light']_&]:focus-visible:outline-black/40"
+          class="inline-flex h-10 items-center justify-center rounded-full bg-white px-5 text-sm font-semibold text-black transition-colors hover:bg-white/88 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white/45 [html[data-theme='light']_&]:bg-black [html[data-theme='light']_&]:text-white [html[data-theme='light']_&]:hover:bg-black/82 [html[data-theme='light']_&]:focus-visible:outline-black/40"
         >
           {defaultProTier.cta}
         </a>
       </article>
 
       <article
-        class="relative flex min-h-[438px] flex-col rounded-2xl border border-white/10 bg-white/[0.025] p-5 shadow-[0_24px_80px_rgba(0,0,0,0.24)] transition-colors duration-300 sm:p-6 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-black/[0.018] [html[data-theme='light']_&]:shadow-[0_24px_80px_rgba(0,0,0,0.055)]"
+        class="relative flex min-h-[470px] flex-col rounded-2xl border border-white/10 bg-white/[0.025] p-5 shadow-[0_24px_80px_rgba(0,0,0,0.24)] transition-colors duration-300 sm:p-6 [html[data-theme='light']_&]:border-black/10 [html[data-theme='light']_&]:bg-black/[0.018] [html[data-theme='light']_&]:shadow-[0_24px_80px_rgba(0,0,0,0.055)]"
       >
         <div class="pricing-card-header">
           <div class="flex items-center gap-4">
@@ -275,20 +275,19 @@ const proTiersByKey = Object.fromEntries(
               Custom
             </p>
             <p
-              class="mt-2 text-sm font-light leading-5 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
+              class="mt-2 text-[13px] font-light leading-5 text-white/56 transition-colors duration-300 [html[data-theme='light']_&]:text-black/56"
             >
-              Larger teams, purchasing workflows, and custom terms.
+              Larger teams, purchasing, and custom terms.
             </p>
           </div>
         </div>
 
-        <ul class="mt-5 space-y-3 pb-8">
+        <ul class="my-auto space-y-3 py-8">
           {
             [
               "7+ developers or custom scope",
               "Multiple products or app families",
               "Custom terms and invoicing",
-              "Named support contact",
               "Affiliate or multi-team use"
             ].map((feature) => (
               <li class="flex items-center gap-3 text-sm font-medium text-white/62 transition-colors duration-300 [html[data-theme='light']_&]:text-black/62">
@@ -306,7 +305,7 @@ const proTiersByKey = Object.fromEntries(
 
         <a
           href="mailto:sales@chartkit.io?subject=Chart%20Kit%20Pro%20Enterprise"
-          class="mt-auto inline-flex h-10 items-center justify-center rounded-full border border-white/15 px-5 text-sm font-semibold text-white/78 transition-colors hover:border-white/28 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white/45 [html[data-theme='light']_&]:border-black/15 [html[data-theme='light']_&]:text-black/70 [html[data-theme='light']_&]:hover:border-black/28 [html[data-theme='light']_&]:hover:text-black [html[data-theme='light']_&]:focus-visible:outline-black/40"
+          class="inline-flex h-10 items-center justify-center rounded-full border border-white/15 px-5 text-sm font-semibold text-white/78 transition-colors hover:border-white/28 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white/45 [html[data-theme='light']_&]:border-black/15 [html[data-theme='light']_&]:text-black/70 [html[data-theme='light']_&]:hover:border-black/28 [html[data-theme='light']_&]:hover:text-black [html[data-theme='light']_&]:focus-visible:outline-black/40"
         >
           Talk to sales
         </a>
@@ -315,22 +314,10 @@ const proTiersByKey = Object.fromEntries(
 
     <p
       class="mx-auto mt-6 max-w-[1120px] text-center text-sm font-light text-white/44 transition-colors duration-300 [html[data-theme='light']_&]:text-black/44"
-    >
-      Need SDK, white-label, embedded, or customer-distributed use?
-      <a
-        href="mailto:sales@chartkit.io?subject=Chart%20Kit%20Pro%20OEM%20license"
-        class="font-semibold text-white/72 transition-colors hover:text-white [html[data-theme='light']_&]:text-black/68 [html[data-theme='light']_&]:hover:text-black"
-      >
-        Contact us for OEM terms.
-      </a>
-    </p>
-
-    <p
-      class="mx-auto mt-4 max-w-[1120px] text-center text-sm font-light text-white/44 transition-colors duration-300 [html[data-theme='light']_&]:text-black/44"
     >
       <a
         href="/docs/react-native/charts/pricing"
-        class="font-semibold text-white/72 transition-colors hover:text-white [html[data-theme='light']_&]:text-black/68 [html[data-theme='light']_&]:hover:text-black"
+        class="text-white/72 transition-colors hover:text-white [html[data-theme='light']_&]:text-black/68 [html[data-theme='light']_&]:hover:text-black"
       >
         Compare plan capabilities in the docs.
       </a>