diff --git a/public/fonts/Inter-VariableFont.ttf b/public/fonts/Inter-VariableFont.ttf new file mode 100644 index 0000000..ec3164e Binary files /dev/null and b/public/fonts/Inter-VariableFont.ttf differ diff --git a/src/assets/icons/flag.svg b/src/assets/icons/flag.svg new file mode 100644 index 0000000..2014a52 --- /dev/null +++ b/src/assets/icons/flag.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/star.svg b/src/assets/icons/star.svg new file mode 100644 index 0000000..a6bbf9e --- /dev/null +++ b/src/assets/icons/star.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Vision/Grid.astro b/src/components/Vision/Grid.astro index 7403e86..4a41b87 100644 --- a/src/components/Vision/Grid.astro +++ b/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 = [ { features.map((feature) => ( - + )) } diff --git a/src/components/ui/GridCell.astro b/src/components/ui/GridCell.astro index 2666d4f..6550a11 100644 --- a/src/components/ui/GridCell.astro +++ b/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; ---
-

- {title} -

+
+

+ {title} +

+ { + badge && ( +
+
+ +
+

{badge}

+
+ ) + } +

{description}

diff --git a/src/components/ui/GridContainer.astro b/src/components/ui/GridContainer.astro index 7374125..feb0d58 100644 --- a/src/components/ui/GridContainer.astro +++ b/src/components/ui/GridContainer.astro @@ -1,5 +1,5 @@
diff --git a/src/styles/global.scss b/src/styles/global.scss index 3d2afdf..12d0ae8 100644 --- a/src/styles/global.scss +++ b/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; diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 96fffa8..c71bd2f 100644 --- a/tailwind.config.cjs +++ b/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', },