Made cartouche image bigger

thefrontside · Dec 17, 2023 · ba7a353 · ba7a353
1 parent f2a2b7b
commit ba7a353
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/www/components/icons/cartouche.tsx b/www/components/icons/cartouche.tsx
@@ -0,0 +1,17 @@
+export const IconCartouche = () => (
+  <svg
+    width="1200"
+    height="1200"
+    version="1.1"
+    viewBox="0 0 1200 1200"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g class="fill-typescript-blue">
+      <path d="m290.62 1181.2c0 4.9727 1.9766 9.7422 5.4922 13.258 3.5156 3.5156 8.2852 5.4922 13.258 5.4922h581.25c4.9727 0 9.7422-1.9766 13.258-5.4922 3.5156-3.5156 5.4922-8.2852 5.4922-13.258v-75c0-4.9727-1.9766-9.7422-5.4922-13.258-3.5156-3.5156-8.2852-5.4922-13.258-5.4922h-121.88v-46.875c0-4.9727-1.9766-9.7422-5.4922-13.258-3.5156-3.5156-8.2852-5.4922-13.258-5.4922h-300c-4.9727 0-9.7422 1.9766-13.258 5.4922-3.5156 3.5156-5.4922 8.2852-5.4922 13.258v46.875h-121.88c-4.9727 0-9.7422 1.9766-13.258 5.4922-3.5156 3.5156-5.4922 8.2852-5.4922 13.258zm478.12-56.25h103.12v37.5h-103.12zm-75-65.625h37.5v103.12h-37.5zm-75 0h37.5v103.12h-37.5zm-75 0h37.5v103.12h-37.5zm-75 0h37.5v103.12h-37.5zm-140.62 65.625h103.12v37.5h-103.12z" />
+      <path d="m712.5 398.16c-6.3125-8.9023-16.652-14.074-27.562-13.781-6.0625-0.22656-12.043 1.4648-17.094 4.8281-5.0469 3.3672-8.9062 8.2383-11.031 13.922-3.2227 8.8555-7.4375 17.312-12.562 25.219l-156.75 152.91 90.656-34.5-89.531 124.97 37.5 12.656c13.312-23.062 32.531-53.438 57.844-96.094 2.25-3.8438 3.75-5.0625 4.6875-5.0625s1.7812 5.25 1.7812 5.25l33.562-4.2188 33.469-50.531c17.992-18.527 31.414-40.996 39.188-65.625 7.2188-22.312 3.5625-35.062-7.0312-56.25-3.4688-7.7812 19.312-12 22.875-13.688z" />
+      <path d="m600 121.88c-11.883-0.38281-23.574 3.0508-33.359 9.8008-9.7891 6.7461-17.152 16.457-21.016 27.699h108.75c-3.8633-11.242-11.227-20.953-21.016-27.699-9.7852-6.75-21.477-10.184-33.359-9.8008z" />
+      <path d="m600 890.62c-11.883-0.38281-23.574 3.0508-33.359 9.8008-9.7891 6.7461-17.152 16.457-21.016 27.699h108.75c-3.8633-11.242-11.227-20.953-21.016-27.699-9.7852-6.75-21.477-10.184-33.359-9.8008z" />
+      <path d="m806.25 1050h48.938c4.125-4.2188 8.1562-8.625 11.906-13.219 2.0039-2.2148 3.8516-4.5625 5.5312-7.0312l5.1562-7.3125c3.2812-4.9688 6.375-10.125 9.375-15.375 1.4062-2.625 2.8125-5.25 4.0312-7.9688s3.0938-6.5625 4.4062-9.9375 1.875-4.5 2.625-6.75c2.0781-5.5586 3.8594-11.223 5.3438-16.969 1.0312-3.8438 1.875-7.875 2.625-11.812 0.4375-2.25 0.8125-4.5 1.125-6.75 1.3984-9.3086 2.0898-18.711 2.0625-28.125v-731.25c-0.14844-49.684-19.949-97.289-55.082-132.42-35.129-35.133-82.734-54.934-132.42-55.082h-243.75c-49.684 0.14844-97.289 19.949-132.42 55.082-35.133 35.129-54.934 82.734-55.082 132.42v731.25c0.003906 9.418 0.72656 18.816 2.1562 28.125 0 2.25 0.375 4.5 1.125 6.75 0.75 3.9375 1.5938 7.9688 2.625 11.812 1.4844 5.7461 3.2656 11.41 5.3438 16.969 0.75 2.25 1.6875 4.5 2.625 6.75s2.8125 6.6562 4.4062 9.9375 2.625 5.3438 4.0312 7.9688c2.9062 5.25 6 10.406 9.375 15.375l5.1562 7.3125c1.6797 2.4688 3.5273 4.8164 5.5312 7.0312 3.75 4.5938 7.7812 9.375 11.906 13.219h48.844v-9.375c0-14.918 5.9258-29.227 16.477-39.773 10.547-10.551 24.855-16.477 39.773-16.477h300c14.918 0 29.227 5.9258 39.773 16.477 10.551 10.547 16.477 24.855 16.477 39.773zm37.5-515.62h28.125v37.5h-28.125c-6.6992 0-12.887-3.5742-16.238-9.375-3.3477-5.8008-3.3477-12.949 0-18.75 3.3516-5.8008 9.5391-9.375 16.238-9.375zm-243.75-450c51.656 0 93.75 39.469 93.75 87.938v7.5938c-0.44531 4.6562-2.6133 8.9805-6.082 12.121-3.4727 3.1406-7.9883 4.8672-12.668 4.8477h-150c-4.6797 0.019531-9.1953-1.707-12.668-4.8477-3.4688-3.1406-5.6367-7.4648-6.082-12.121v-7.5938c0-48.469 42.094-87.938 93.75-87.938zm-211.12 156.56c3.2305-3.7812 7.832-6.1211 12.793-6.5078 4.957-0.38672 9.8672 1.2109 13.645 4.4453l31.5 27.094 31.312-27.094c3.3945-2.9062 7.7188-4.5 12.188-4.5s8.793 1.5938 12.188 4.5l31.875 27.094 31.594-27.094c3.3945-2.9062 7.7188-4.5 12.188-4.5s8.793 1.5938 12.188 4.5l31.5 27.094 31.594-27.094c3.3945-2.9062 7.7188-4.5 12.188-4.5s8.793 1.5938 12.188 4.5l31.594 27.094 31.219-27.094c3.3945-2.9062 7.7188-4.5 12.188-4.5s8.793 1.5938 12.188 4.5l43.781 37.5c4.1211 4.5703 5.7383 10.871 4.3281 16.859-1.4141 5.9883-5.6719 10.906-11.398 13.152-5.7305 2.25-12.195 1.543-17.305-1.8867l-31.594-27.094-30.938 27.469c-3.3945 2.9062-7.7188 4.5-12.188 4.5s-8.793-1.5938-12.188-4.5l-31.875-27.094-31.594 27.094c-3.3945 2.9062-7.7188 4.5-12.188 4.5s-8.793-1.5938-12.188-4.5l-31.5-27.094-31.594 27.094c-3.4023 2.9297-7.7422 4.543-12.234 4.543s-8.832-1.6133-12.234-4.543l-31.5-27.094-31.219 27.094c-3.3945 2.9062-7.7188 4.5-12.188 4.5s-8.793-1.5938-12.188-4.5l-43.688-37.5c-3.8359-3.1797-6.2461-7.7539-6.7031-12.715-0.45703-4.957 1.0781-9.8945 4.2656-13.723zm343.59 238.41c-9.1719 29.082-24.703 55.762-45.469 78.094l-28.125 42.75 14.438 28.969c2.3984 4.4727 2.8828 9.7227 1.3398 14.555-1.5391 4.8359-4.9727 8.8359-9.5156 11.098-4.543 2.2578-9.8086 2.5781-14.59 0.89062-4.7852-1.6914-8.6797-5.2461-10.797-9.8555l-12.094-24.188-13.5 1.6875 12.281 24.562c2.3984 4.4727 2.8828 9.7227 1.3398 14.555-1.5391 4.8359-4.9727 8.8359-9.5156 11.098-4.543 2.2578-9.8086 2.5781-14.59 0.89062-4.7852-1.6914-8.6797-5.2461-10.797-9.8555l-4.7812-9.375-4.9688 8.0625c-9.375 15.562-17.625 28.969-24.094 40.125-4.3281 7.4766-11.105 13.23-19.184 16.289-8.0781 3.0547-16.969 3.2305-25.16 0.49219l-37.5-12.562c-11.242-3.8555-20.047-12.727-23.812-24-3.6719-11.312-1.7578-23.695 5.1562-33.375l22.969-32.156c-9.1016-1.6055-17.285-6.5156-22.988-13.789-5.7031-7.2695-8.5195-16.391-7.9102-25.613 0.60938-9.2188 4.6016-17.891 11.211-24.348l152.53-149.62c2.5312-4.2305 4.6641-8.6875 6.375-13.312 4.5156-13.328 13.195-24.848 24.758-32.867 11.562-8.0195 25.398-12.105 39.461-11.664 23.48-0.32812 45.562 11.152 58.781 30.562 6.0586 9.1094 7.8398 20.406 4.875 30.938-2.2266 7.3867-6.6406 13.922-12.656 18.75 3.7266 17.391 2.5273 35.477-3.4688 52.219zm-376.22 92.531h-28.125v-37.5h28.125c6.6992 0 12.887 3.5742 16.238 9.375 3.3477 5.8008 3.3477 12.949 0 18.75-3.3516 5.8008-9.5391 9.375-16.238 9.375zm75 281.25c-14.918 0-29.227-5.9258-39.773-16.477-10.551-10.547-16.477-24.855-16.477-39.773s5.9258-29.227 16.477-39.773c10.547-10.551 24.855-16.477 39.773-16.477s29.227 5.9258 39.773 16.477c10.551 10.547 16.477 24.855 16.477 39.773s-5.9258 29.227-16.477 39.773c-10.547 10.551-24.855 16.477-39.773 16.477zm262.5 95.531c-0.44531 4.6562-2.6133 8.9805-6.082 12.121-3.4727 3.1406-7.9883 4.8672-12.668 4.8477h-150c-4.6797 0.019531-9.1953-1.707-12.668-4.8477-3.4688-3.1406-5.6367-7.4648-6.082-12.121v-7.5938c0-48.469 42.094-87.938 93.75-87.938s93.75 39.469 93.75 87.938v7.5938zm103.12-151.78h-18.75v56.25c0 6.6992-3.5742 12.887-9.375 16.238-5.8008 3.3477-12.949 3.3477-18.75 0-5.8008-3.3516-9.375-9.5391-9.375-16.238v-56.25h-18.75c-6.6992 0-12.887-3.5742-16.238-9.375-3.3477-5.8008-3.3477-12.949 0-18.75 3.3516-5.8008 9.5391-9.375 16.238-9.375h18.75v-18.75c0-6.6992 3.5742-12.887 9.375-16.238 5.8008-3.3477 12.949-3.3477 18.75 0 5.8008 3.3516 9.375 9.5391 9.375 16.238v18.75h18.75c6.6992 0 12.887 3.5742 16.238 9.375 3.3477 5.8008 3.3477 12.949 0 18.75-3.3516 5.8008-9.5391 9.375-16.238 9.375z" />
+    </g>
+  </svg>
+);
diff --git a/www/routes/index-route.tsx b/www/routes/index-route.tsx
@@ -3,6 +3,7 @@ import type { JSXChild, JSXHandler } from "revolution";
 import { useAppHtml } from "./app.html.tsx";
 import { Footer } from "../components/footer.tsx";
 import { IconTSLogo } from "../components/icons/typescript.tsx";
+import { IconCartouche } from "../components/icons/cartouche.tsx";
 
 export function indexRoute(): JSXHandler {
   return function* () {
@@ -49,14 +50,14 @@ export function indexRoute(): JSXHandler {
                 </h2>
                 <p class="mt-6 text-lg leading-8 text-gray-600">
                   Effection gives you control over asyncronous operations with{" "}
-                  <a href="/docs/thinking-in-effection">
+                  <a class="underline underline-offset-4" href="/docs/thinking-in-effection">
                     Structured Concurrency guarantees
                   </a>
                   . We ensure that all asyncronous operations are well behaved
                   so you can focus on using async instead of managing it.
                 </p>
               </hgroup>
-              <div class="mx-auto mt-8 max-w-2xl sm:mt-12 lg:mt-16 lg:max-w-4xl grid grid-cols-2 gap-y-4">
+              <div class="mx-auto mt-8 max-w-2xl sm:mt-12 lg:mt-16 lg:max-w-4xl md:grid md:grid-cols-2 md:gap-y-4">
                 <Feature icon={"🛡️"} summary={"Leak proof"}>
                   Effection code cleans up after itself, and that means never
                   having to remember to manually close a resource or detach a
@@ -98,7 +99,7 @@ export function indexRoute(): JSXHandler {
               {/* No build steps. No esoteric APIs, and no new odd-ball
               paradigms to learn; Effection leans into JavaScript's natural
               constructs at every turn, so code always feels intuitive. */}
-              <div class="mx-auto mt-8 max-w-2xl sm:mt-12 lg:mt-16 lg:max-w-4xl grid grid-cols-2 gap-y-4">
+              <div class="mx-auto mt-8 max-w-2xl sm:mt-12 lg:mt-16 lg:max-w-4xl md:grid md:grid-cols-2 md:gap-y-4">
                 <Feature icon={"😎"} summary="Use familiar language constructs">
                   <>
                     Use <code>let</code>, <code>const</code>, <code>for</code>,{" "}
@@ -120,15 +121,25 @@ export function indexRoute(): JSXHandler {
                 <Feature icon={"😵‍💫"} summary="No esoteric APIs">
                   <>
                     Small API focused excusively on what you need to gain
-                    Structured Concurrency guarantees in
-                    JavaScript and nothing else.
+                    Structured Concurrency guarantees in JavaScript and nothing
+                    else.
                   </>
                 </Feature>
-                <Feature icon={"💎"} summary="No build step">
+                <Feature
+                  icon={<IconCartouche />}
+                  summary="Async/Await/Promise alternatives"
+                  iconSize="h-14 w-14"
+                >
                   <>
-                    Use in TypeScript or JavaScript projects without modifying
-                    your build setup. Effection operations can be used and
-                    distributed in pure ESM code.
+                    For every Async/Await/Promise API we provide Structured
+                    Concurrency compliant Effection alternative. Checkout our{" "}
+                    <a
+                      class="underline underline-offset-4"
+                      href="/docs/async-rosetta-stone"
+                    >
+                      Async Rosetta Stone
+                    </a>{" "}
+                    for translations.
                   </>
                 </Feature>
                 <Feature icon={"💪"} summary="Small but powerful">
@@ -138,6 +149,13 @@ export function indexRoute(): JSXHandler {
                     into any project.
                   </>
                 </Feature>
+                <Feature icon={"💎"} summary="No build step">
+                  <>
+                    Use in TypeScript or JavaScript projects without modifying
+                    your build setup. Effection operations can be used and
+                    distributed in pure ESM code.
+                  </>
+                </Feature>
               </div>
             </section>
             <Footer />
@@ -152,15 +170,17 @@ function Feature({
   summary,
   icon,
   children,
+  iconSize = "h-10 w-10 text-4xl",
 }: {
   summary: string;
   icon: JSXChild;
   children: JSXChild;
+  iconSize?: string;
 }) {
   return (
-    <div class="relative pl-16">
+    <div class="relative pl-16 mb-8">
       <dt class="text-base font-semibold leading-7 text-gray-900">
-        <div class="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg text-4xl">
+        <div class={`absolute left-0 top-0 flex items-center justify-center rounded-lg ${iconSize}`}>
           {icon}
         </div>
         {summary}

diff --git a/www/tailwind.config.ts b/www/tailwind.config.ts
@@ -28,6 +28,7 @@ function presetFrontside() {
           "blue-primary": "#14315D",
           "blue-secondary": "#26ABE8",
           "pink-secondary": "#F74D7B",
+          "typescript-blue": "#3178c6"
         },
         screens: {
           ...defaultTheme.screens,