Merge branch 'develop' of git.lumeweb.com:LumeWeb/lumeweb.com into develop

src/assets/icons/flag.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1051_672)">
+<path d="M11.6862 0.258338C11.3823 0.1324 11.0329 0.202275 10.8006 0.43465C9.77356 1.46084 8.10225 1.46165 7.07444 0.43465C5.41287 -1.22529 2.71131 -1.22529 1.05056 0.43465C0.897813 0.586588 0.8125 0.793776 0.8125 1.00909V11.5716C0.8125 12.0201 1.17569 12.3841 1.625 12.3841C2.07431 12.3841 2.4375 12.0201 2.4375 11.5716V7.87228C3.47019 7.06221 4.97331 7.13209 5.92556 8.08353C7.58713 9.74346 10.2895 9.74346 11.9494 8.08353C12.1022 7.93078 12.1875 7.7244 12.1875 7.50909V1.00909C12.1875 0.680026 11.9892 0.384275 11.6862 0.258338Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1051_672">
+<rect width="13" height="13" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/star.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1051_659)">
+<path d="M14.6663 6.53324C14.6663 6.66658 14.597 6.79998 14.4583 6.93331L11.5497 9.73328L12.2383 13.7999C12.2437 13.7999 12.2463 13.8666 12.2463 13.9333C12.2463 14.0666 12.217 14.1332 12.1583 14.1999C12.105 14.2666 12.025 14.3333 11.9177 14.3333C11.8163 14.3333 11.7097 14.3333 11.5977 14.2666L7.99967 12.3333L4.40194 14.2666C4.28441 14.3333 4.17754 14.3333 4.08141 14.3333C3.96921 14.3333 3.88374 14.2666 3.82501 14.1999C3.77154 14.1332 3.74487 14.0666 3.74487 13.9333C3.74487 13.9333 3.75021 13.8666 3.76087 13.7999L4.45001 9.73328L1.53334 6.93331C1.39981 6.79998 1.33301 6.66658 1.33301 6.53324C1.33301 6.33324 1.48261 6.19991 1.78174 6.19991L5.80414 5.59998L7.60701 1.93331C7.70834 1.73331 7.83967 1.59998 7.99967 1.59998C8.15967 1.59998 8.29101 1.73331 8.39234 1.93331L10.195 5.59998L14.2177 6.19991C14.517 6.19991 14.6663 6.33324 14.6663 6.53324Z" fill="#020E10"/>
+<path d="M14.6663 5.86662C14.6663 5.99995 14.597 6.13335 14.4583 6.26668L11.5497 9.06665L12.2383 13.1333C12.2437 13.1333 12.2463 13.2 12.2463 13.2667C12.2463 13.4 12.217 13.4666 12.1583 13.5333C12.105 13.6 12.025 13.6667 11.9177 13.6667C11.8163 13.6667 11.7097 13.6667 11.5977 13.6L7.99967 11.6667L4.40194 13.6C4.28441 13.6667 4.17754 13.6667 4.08141 13.6667C3.96921 13.6667 3.88374 13.6 3.82501 13.5333C3.77154 13.4666 3.74487 13.4 3.74487 13.2667C3.74487 13.2667 3.75021 13.2 3.76087 13.1333L4.45001 9.06665L1.53334 6.26668C1.39981 6.13335 1.33301 5.99995 1.33301 5.86662C1.33301 5.66662 1.48261 5.53328 1.78174 5.53328L5.80414 4.93335L7.60701 1.26668C7.70834 1.06668 7.83967 0.93335 7.99967 0.93335C8.15967 0.93335 8.29101 1.06668 8.39234 1.26668L10.195 4.93335L14.2177 5.53328C14.517 5.53328 14.6663 5.66662 14.6663 5.86662Z" fill="#020E10"/>
+</g>
+<defs>
+<clipPath id="clip0_1051_659">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/Vision/Grid.astro

@@ -4,27 +4,32 @@ import GridContainer from "../ui/GridContainer.astro";
 
 const features = [
   {
-    title: "Decentralized Websites (Goal)",
+    title: "Decentralized Websites",
+    badge: "goal" as const,
     description:
       "You should be able to gain access to any website on any network, in a secure and decentralized way",
   },
   {
-    title: "Decentralized Publishing (Idea)",
+    title: "Decentralized Publishing",
+    badge: "idea" as const,
     description:
       "You should be able to easily publish a blog or any other basic website for personal or professional use",
   },
   {
-    title: "Website Building Tools (Idea)",
+    title: "Website Building Tools",
+    badge: "idea" as const,
     description:
       "You should be able to easily build a website that targets the decentralized web",
   },
   {
-    title: "eCommerce (Idea)",
+    title: "eCommerce",
+    badge: "idea" as const,
     description:
       "You should be be able to buy or sell in a free market without censorship or politics blocking your ability to transact",
   },
   {
-    title: "Earn a Living (Idea)",
+    title: "Earn a Living",
+    badge: "idea" as const,
     description:
       "You should be able to monetize your content or skills, without a middleman or gatekeeper. You should be able to be free to live your best life by having access to an open market so that you are never chained down or restricted",
   },
@@ -40,7 +45,11 @@ const features = [
     </div>
     {
       features.map((feature) => (
-        <GridCell title={feature.title} description={feature.description} />
+        <GridCell
+          title={feature.title}
+          description={feature.description}
+          badge={feature.badge}
+        />
       ))
     }
   </GridContainer>

src/components/ui/GridCell.astro

@@ -1,18 +1,42 @@
 ---
+import flagSvg from "/src/assets/icons/flag.svg?raw";
+import starSvg from "/src/assets/icons/star.svg?raw";
 export interface Props {
   title: string;
   description: string;
+  badge?: "idea" | "goal";
 }
 
-const { title, description } = Astro.props;
+const BADGE_ICON = {
+  goal: flagSvg,
+  idea: starSvg,
+};
+
+const { title, description, badge } = Astro.props;
 ---
 
 <div
   class="md:w-full h-full p-10 rounded-md bg-black mx-[10px] space-y-5 hover:ring-2 ring-primary transition-all flex flex-col justify-center"
 >
-  <h3 class="font-body text-xl md:text-3xl">
+  <div>
-    {title}
+    <h3 class="font-body text-xl md:text-3xl">
-  </h3>
+      {title}
+    </h3>
+    {
+      badge && (
+        <div
+          class={`mt-1 py-1 px-2 rounded-sm ${
+            badge === "idea" ? "bg-[#E9541F]" : "bg-[#54A7CD]"
+          } text-black flex-row justify-center items-center gap-1 inline-flex`}
+        >
+          <div class="[&>svg]:w-3 [&>svg]:h-3">
+            <Fragment set:html={BADGE_ICON[badge]} />
+          </div>
+          <h4 class="font-inter font-bold text-md uppercase">{badge}</h4>
+        </div>
+      )
+    }
+  </div>
   <p class="text-lg md:text-xl text-body font-body">
     {description}
   </p>

src/components/ui/GridContainer.astro

@@ -1,5 +1,5 @@
 <div
-  class="flex flex-col justify-between items-start gap-y-10 md:grid md:grid-cols-3 md:gap-x-10 md:gap-y-10"
+  class="flex flex-col justify-between items-start gap-y-10 xl:grid xl:grid-cols-3 xl:gap-x-10 xl:gap-y-10"
 >
   <slot />
 </div>

src/styles/global.scss

@@ -33,6 +33,14 @@
   src: url("/fonts/ibm-plex-sans-devanagari.woff2") format('woff2');
 }
 
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/fonts/Inter-VariableFont.ttf") format('ttf');
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.cjs

@@ -15,6 +15,7 @@ module.exports = {
     },
     fontFamily: {
       'body': '"Jaldi", sans-serif',
+      'inter': '"Inter", sans-serif',
       'display': '"JetBrains Mono", monospace',
       'display2': '"IBM Plex Sans Devanagari", monospace',
     },