docs(landing): improve responsiveness

Author: maiieul

apps/website/src/routes/[email protected]

@@ -1,86 +1,80 @@
 import { component$ } from '@builder.io/qwik';
 import { DocumentHead } from '@builder.io/qwik-city';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardImage,
-  CardTitle,
-} from '@qwik-ui/styled';
+import { Card, CardDescription, CardHeader, CardImage, CardTitle } from '@qwik-ui/styled';
 import { cn } from '@qwik-ui/utils';
 
-const whyHeadless = [
-  {
-    emoji: '🧑‍🎨',
-    description: 'Create your own components from scratch',
-  },
-  {
-    emoji: '⛓️‍💥',
-    description:
-      'Use with vanilla CSS, SASS, TailwindCSS, UnoCSS, PandaCSS, or whateverCSS',
-  },
-  {
-    emoji: '🧑‍🎓',
-    description:
-      'Learn about the headless APIs, accessibility, and the html/css features to come',
-  },
-];
+// const whyHeadless = [
+//   {
+//     emoji: '🧑‍🎨',
+//     description: 'Create your own components from scratch',
+//   },
+//   {
+//     emoji: '⛓️‍💥',
+//     description:
+//       'Use with vanilla CSS, SASS, TailwindCSS, UnoCSS, PandaCSS, or whateverCSS',
+//   },
+//   {
+//     emoji: '🧑‍🎓',
+//     description:
+//       'Learn about the headless APIs, accessibility, and the html/css features to come',
+//   },
+// ];
 
-const whyStyled = [
-  {
-    emoji: '😌',
-    description: 'Start with good defaults',
-  },
-  {
-    emoji: '💫',
-    description: "Change your entire app's style & theme at the click of a button",
-  },
-  {
-    emoji: '👏',
-    description: 'Avoid code duplication thanks to cva variants',
-  },
-];
+// const whyStyled = [
+//   {
+//     emoji: '😌',
+//     description: 'Start with good defaults',
+//   },
+//   {
+//     emoji: '💫',
+//     description: "Change your entire app's style & theme at the click of a button",
+//   },
+//   {
+//     emoji: '👏',
+//     description: 'Avoid code duplication thanks to cva variants',
+//   },
+// ];
 
 export default component$(() => {
   return (
-    <div class="flex flex-col gap-8">
-      <h1 class="text-center text-3xl font-bold leading-normal lg:text-5xl">
-        <span class="text-primary text-outlined font-black tracking-wide">Qwik</span>{' '}
-        <span class="text-secondary font-black tracking-wide">UI</span>
+    <div class="flex flex-col items-center gap-8 py-24">
+      <h1 class="text-center text-4xl leading-normal lg:text-5xl">
+        <span class="text-primary text-outlined font-extrabold tracking-wide">Qwik</span>{' '}
+        <span class="text-secondary font-extrabold tracking-wide">UI</span>
       </h1>
-      <h2 class="text-center text-2xl font-bold leading-normal lg:text-4xl">
-        The world's fastest loading UI components <br />
+      <h2 class="text-center text-xl font-bold leading-normal lg:text-3xl">
+        Headless & styled copy-paste components
+        <br />
         <span class="text-primary text-outlined leading-normal">
           automatically optimized for you
         </span>
       </h2>
-      <p class="text-center text-xl font-medium lg:text-2xl">
+      <p class="text-center text-lg lg:text-xl">
         Choose a kit and start building the future{' '}
         <span class="hue-rotate-[150deg]">⚡</span>
       </p>
       <div class="mt-4 flex flex-wrap justify-center justify-items-center gap-14">
         <a href={`/docs/headless/introduction`}>
           <Card
             class={cn(
-              'ease-step relative block w-full max-w-md rounded-lg shadow-lg outline-1 duration-150 hover:scale-[1.025] focus:scale-[1.025]',
+              'ease-step relative block h-full max-w-md rounded-lg shadow-lg outline-1 duration-150 hover:scale-[1.025] focus:scale-[1.025]',
             )}
           >
             <CardImage
               src={`/images/qwik-ui-headless-hero.webp`}
               width="300"
               height="300"
               alt={`styled kit`}
-              class="h-64 rounded-t-sm"
+              class="w-full rounded-t-sm"
             />
             <CardHeader>
               <CardTitle class="text-xl">Headless</CardTitle>
               <CardDescription class="text-lg">
-                A headless component library of unstyled, accessible, and resumable
-                components for the most creative minds.
+                A headless component library of completely unstyled, accessible, and
+                resumable components for the most creative minds.
               </CardDescription>
             </CardHeader>
-            <CardContent>
+            {/* <CardContent>
               <ul>
                 {whyHeadless.map((pro, index) => (
                   <li key={index} class="mb-5 grid grid-cols-[25px_1fr] items-start">
@@ -89,17 +83,17 @@ export default component$(() => {
                   </li>
                 ))}
               </ul>
-            </CardContent>
+            </CardContent> */}
           </Card>
         </a>
-        <a href={`/docs/headless/introduction`}>
-          <Card class="ease-step relative block w-full max-w-md rounded-lg shadow-lg outline-1 duration-150 hover:scale-[1.025] focus:scale-[1.025]">
+        <a href={`/docs/styled/introduction`}>
+          <Card class="ease-step relative block h-full max-w-md rounded-lg shadow-lg outline-1 duration-150 hover:scale-[1.025] focus:scale-[1.025]">
             <CardImage
               src={`/images/qwik-ui-fluffy-creature-screen.webp`}
               width="300"
               height="300"
               alt={`styled kit`}
-              class="h-64 rounded-t-sm"
+              class="w-full rounded-t-sm"
             />
             <CardHeader>
               <CardTitle class="text-xl">Styled</CardTitle>
@@ -108,7 +102,7 @@ export default component$(() => {
                 components built on top of headless.
               </CardDescription>
             </CardHeader>
-            <CardContent>
+            {/* <CardContent>
               <ul>
                 {whyStyled.map((pro, index) => (
                   <li key={index} class="mb-5 grid grid-cols-[25px_1fr] items-start">
@@ -117,7 +111,7 @@ export default component$(() => {
                   </li>
                 ))}
               </ul>
-            </CardContent>
+            </CardContent> */}
           </Card>
         </a>
       </div>

apps/website/src/routes/layout-landing.tsx

@@ -6,7 +6,7 @@ export default component$(() => {
   return (
     <>
       <Header />
-      <main class="mx-auto mb-24 max-w-7xl px-2 pt-28 md:px-8 lg:pt-32">
+      <main>
         <Slot />
       </main>
       <Footer />