Frontend polish

Author: bring-shrubbery

apps/web/app/FeaturesSection.tsx

@@ -5,11 +5,12 @@ export const FeaturesSection = () => {
         {"Features 👑"}
       </h2>
 
-      <ul className="list-disk list-inside space-y-2">
-        <li>{"Easy to use primitive for building your own components."}</li>
-        <li>{"Available for React, (other libraries coming soon)"}</li>
+      <ul className="list-none list-inside space-y-2">
+        <li>{"💃 Easy to use primitive for building your own components."}</li>
+        <li>{"🚀 Available for React, (other libraries coming soon)"}</li>
+        <li>{"😏 React 18 support (server components)"}</li>
         <li>
-          {"Fallback for no JavaScript (try disabling JS for this page)"}
+          {"🙏 Fallback for no JavaScript (try disabling JS for this page)"}
           <noscript>
             <br />
             <div className="ml-[22px] pt-2">
@@ -18,8 +19,8 @@ export const FeaturesSection = () => {
             </div>
           </noscript>
         </li>
-        <li>{"React 18 support (server components)"}</li>
-        <li>{"CommonJS and ES6"}</li>
+        <li>{"🐁 Just 2.1kB gzipped."}</li>
+        <li>{"👌 CommonJS and ES6"}</li>
       </ul>
     </div>
   );

apps/web/app/SquircleDemoSection.tsx

@@ -12,20 +12,26 @@ export const SquircleDemoSection = () => {
   return (
     <div className="container mx-auto max-w-[960px] md:pt-24 mb-36">
       <h1 className="font-bold text-4xl leading-[180%] sm:text-5xl sm:leading-[150%] md:text-6xl text-center md:mx-auto mb-6 md:leading-[130%]">
-        Squircle{" "}
+        <span className="text-6xl sm:text-inherit leading-[200%]">
+          Squircle
+        </span>{" "}
         <Squircle
           as="span"
-          className="bg-black text-white pl-8 pr-8 pt-2 pb-2"
+          className="bg-black text-white pl-8 pr-8 pt-2 pb-2 text-6xl sm:text-inherit"
           cornerRadius={cornerRadius}
           cornerSmoothing={cornerSmoothing}
         >
           Element
         </Squircle>
         <br />
-        for your Frontend
+        for{" "}
+        <span className="relative before:absolute before:-inset-x-1 before:h-1 before:-bottom-1 before:-rotate-2 before:bg-black before:-z-10">
+          your
+        </span>{" "}
+        Frontend
       </h1>
 
-      <div className="text-center text-lg mb-10">
+      <div className="text-center text-lg mb-6">
         Use{" "}
         <Squircle
           as="code"
@@ -41,42 +47,46 @@ export const SquircleDemoSection = () => {
         other frontend frameworks soon!
       </div>
 
-      <div className="flex flex-col gap-4 w-full mb-8 mx-auto max-w-[360px]">
-        <h2 className="font-bold text-2xl mx-auto">Try it out! 🙌</h2>
-        <p className="text-center">
-          {`Use sliders to control the "Element" component above. After, don't forget to star the repo 😉`}
-        </p>
+      <div className="space-y-12 mb-8 mx-auto max-w-[360px]">
+        <div className="space-y-4">
+          <Label
+            htmlFor="corner-radius"
+            className="mt-4"
+          >{`Corner Radius (${cornerRadius}px)`}</Label>
+          <Slider
+            id="corner-radius"
+            min={0}
+            max={50}
+            value={[cornerRadius]}
+            onValueChange={(v) => setCornerRadius(v.at(0))}
+          />
 
-        <Label
-          htmlFor="corner-radius"
-          className="mt-4"
-        >{`Corner Radius (${cornerRadius}px)`}</Label>
-        <Slider
-          id="corner-radius"
-          min={0}
-          max={50}
-          value={[cornerRadius]}
-          onValueChange={(v) => setCornerRadius(v.at(0))}
-        />
+          <Label htmlFor="corner-smoothing">
+            {`Corner Smoothing (${cornerSmoothing}) `}
+            {cornerSmoothing === 0
+              ? "- Just like regular old button"
+              : cornerSmoothing === 1
+              ? "- Silky smooth!"
+              : cornerSmoothing === 0.6
+              ? "- like iOS icons"
+              : ""}
+          </Label>
+          <Slider
+            id="corner-smoothing"
+            min={0}
+            max={1}
+            step={0.01}
+            value={[cornerSmoothing]}
+            onValueChange={(v) => setCornerSmoothing(v.at(0))}
+          />
+        </div>
 
-        <Label htmlFor="corner-smoothing">
-          {`Corner Smoothing (${cornerSmoothing}) `}
-          {cornerSmoothing === 0
-            ? "- Just like regular old button"
-            : cornerSmoothing === 1
-            ? "- Silky smooth!"
-            : cornerSmoothing === 0.6
-            ? "- like iOS icons"
-            : ""}
-        </Label>
-        <Slider
-          id="corner-smoothing"
-          min={0}
-          max={1}
-          step={0.01}
-          value={[cornerSmoothing]}
-          onValueChange={(v) => setCornerSmoothing(v.at(0))}
-        />
+        <div className="space-y-2">
+          <h2 className="font-bold text-2xl mx-auto w-fit">Try it out! 🙌</h2>
+          <p className="text-center">
+            {`Use sliders to control the "Element" component above. The difference is not huge, but makes a difference! 😉`}
+          </p>
+        </div>
       </div>
     </div>
   );