feat: add tools section (#21)

* feat: add tools section * fix: styles
crafter-station · Feb 1, 2024 · c8920d0 · c8920d0
1 parent 74849d2
commit c8920d0
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 4 deletions.
diff --git a/src/components/atoms/icons/circles-icon.astro b/src/components/atoms/icons/circles-icon.astro
@@ -1,8 +1,8 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   class="icon icon-tabler icon-tabler-circles"
-  width="14"
-  height="14"
+  width="20"
+  height="20"
   viewBox="0 0 24 24"
   stroke-width="1.5"
   stroke="currentColor"

diff --git a/src/components/atoms/icons/tools-icon.astro b/src/components/atoms/icons/tools-icon.astro
@@ -1,8 +1,8 @@
 <svg
   xmlns="http://www.w3.org/2000/svg"
   class="icon icon-tabler icon-tabler-tools"
-  width="22"
-  height="22"
+  width="20"
+  height="20"
   viewBox="0 0 24 24"
   stroke-width="1.5"
   stroke="currentColor"

diff --git a/src/components/organisms/tools-section.astro b/src/components/organisms/tools-section.astro
@@ -0,0 +1,49 @@
+---
+import { getI18N } from "@/i18n/utils"
+
+import BrandDiscord from "../atoms/icons/brand-discord.astro"
+import BrandFigma from "../atoms/icons/brand-figma.astro"
+import BrandLinear from "../atoms/icons/brand-linear.astro"
+import BrandNextJs from "../atoms/icons/brand-next-js.astro"
+import BrandSupabase from "../atoms/icons/brand-supabase.astro"
+import BrandTailwind from "../atoms/icons/brand-tailwind.astro"
+import BrandVercel from "../atoms/icons/brand-vercel.astro"
+import BrandWoocommerce from "../atoms/icons/brand-woocommerce.astro"
+import BrandWordpress from "../atoms/icons/brand-wordpress.astro"
+import ToolsIcon from "../atoms/icons/tools-icon.astro"
+
+const { currentLocale } = Astro
+const i18n = getI18N(currentLocale)
+---
+
+<section
+  class="animate-fade-up flex flex-col items-center gap-8 lg:gap-16 px-4 pt-4"
+>
+  <section class="text-center flex flex-col items-center gap-8 lg:gap-20">
+    <p
+      class="flex items-center w-fit gap-2 uppercase bg-stone-900 rounded-md px-4 py-1 text-sm font-semibold border border-stone-700 text-white/60"
+    >
+      <ToolsIcon />
+      <span class="pt-0.5">
+        {i18n.TOOLS.BADGE}
+      </span>
+    </p>
+    <h1
+      class="font-semibold text-3xl md:text-4xl leading-tight lg:text-6xl"
+      set:html={i18n.TOOLS.TITLE}
+    />
+    <section
+      class="flex flex-wrap w-full gap-x-20 gap-y-10 lg:gap-x-24 lg:gap-y-12 justify-center"
+    >
+      <BrandWordpress />
+      <BrandWoocommerce />
+      <BrandNextJs />
+      <BrandFigma />
+      <BrandTailwind />
+      <BrandSupabase />
+      <BrandVercel />
+      <BrandDiscord />
+      <BrandLinear />
+    </section>
+  </section>
+</section>
diff --git a/src/components/pages/home.astro b/src/components/pages/home.astro
@@ -3,11 +3,13 @@ import Layout from "@/layouts/layout.astro"
 import HeroSection from "@/components/organisms/hero-section.astro"
 import { getMetadata } from "@/i18n/utils"
 import FaqSection from "../organisms/faq-section.astro"
+import ToolsSection from "../organisms/tools-section.astro"
 
 const metadata = getMetadata(Astro.currentLocale)
 ---
 
 <Layout metadata={metadata.homepage}>
   <HeroSection />
+  <ToolsSection />
   <FaqSection />
 </Layout>
diff --git a/src/i18n/content.translation.json b/src/i18n/content.translation.json
@@ -17,6 +17,10 @@
       "VIEW_RECENT_WORK": "Ver trabajos recientes",
       "RECENT_WORK": "Trabajos recientes"
     },
+    "TOOLS": {
+      "BADGE": "Nuestras Herramientas",
+      "TITLE": "Combinamos lo mejor de dos mundos: </br><span class='animated-yellow-gradient'>modernidad</span> y <span class='animated-yellow-gradient'>solidez</span>"
+    },
     "FAQ": {
       "BADGE": "Preguntas Frecuentes",
       "TITLE": "Preguntas? Respuestas.",
@@ -99,6 +103,10 @@
       "VIEW_RECENT_WORK": "View recent work",
       "RECENT_WORK": "Recent work"
     },
+    "TOOLS": {
+      "BADGE": "Our Tools",
+      "TITLE": "We combine the best of two worlds: </br><span class='animated-yellow-gradient'>modernity</span> and <span class='animated-yellow-gradient'>solidity</span>"
+    },
     "FAQ": {
       "BADGE": "FAQ",
       "TITLE": "Questions? Answers.",