Merge pull request #30 from gone-bike/stats-section

add StatsSection, StatsCard components

astro/src/components/cards/StatsCard.astro

@@ -0,0 +1,48 @@
+---
+export type StatsCardBg = "indigo" | "blue" | "teal";
+
+export interface StatsCardProps {
+ number: string;
+ text: string;
+ backColor: StatsCardBg;
+}
+
+const { number, text, backColor } = Astro.props as StatsCardProps;
+---
+
+<li
+ class:list={[
+ "list-none w-full rounded-lg px-2 py-4",
+ {
+ "bg-indigo-100": backColor === "indigo",
+ "bg-blue-100": backColor === "blue",
+ "bg-teal-100": backColor === "teal",
+ },
+ ]}
+>
+ <p
+ class:list={[
+ "text-3xl font-bold mb-1 text-center",
+ {
+ "text-indigo-500": backColor === "indigo",
+ "text-blue-500": backColor === "blue",
+ "text-teal-500": backColor === "teal",
+ },
+ ]}
+ >
+ {number}
+ </p>
+
+ <h3
+ class:list={[
+ "font-normal text-center",
+ {
+ "text-indigo-700": backColor === "indigo",
+ "text-blue-700": backColor === "blue",
+ "text-teal-700": backColor === "teal",
+ },
+ ]}
+ >
+ {text}
+ </h3>
+</li>

astro/src/components/sections/StatsSection.astro

@@ -0,0 +1,26 @@
+---
+import { t } from "i18next";
+
+import StatsCard from "@components/cards/StatsCard.astro";
+import BaseContainer from "@components/base/BaseContainer.astro";
+---
+
+<section class="pb-6">
+ <BaseContainer>
+ <div class="pb-8 border-b border-gray-200 md:pb-10">
+ <ul class="flex flex-col gap-6 md:flex-row">
+ <StatsCard
+ number="320,000"
+ text={t("homepage.stat1")}
+ backColor="indigo"
+ />
+ <StatsCard
+ number="1,420,000"
+ text={t("homepage.stat2")}
+ backColor="blue"
+ />
+ <StatsCard number="€5,6M" text={t("homepage.stat3")} backColor="teal" />
+ </ul>
+ </div>
+ </BaseContainer>
+</section>

astro/src/pages/index.astro

@@ -5,9 +5,10 @@ import { localizePath } from "astro-i18next";
 import SearchForm from "@components/SearchForm.astro";
 import BaseLayout from "@layouts/Base.astro";
 import Search from "@components/Search.astro";
-import Card from "@components/statisticsCard.astro";
+import Card from "@components/cards/StatsCard.astro";
 import Bike from "@components/Card.astro";
 import HeroSection from "@components/sections/HeroSection.astro";
+import StatsSection from "@components/sections/StatsSection.astro";
 
 changeLanguage("en");
 ---
@@ -16,13 +17,8 @@ changeLanguage("en");
  <HeroSection />
 
  <!-- Statistics -->
- <div class="flex justify-center gap-4">
- <Card key="320,000" value={t("homepage.stat1")} backColor="#E5EDFF" />
- <Card key="1,420,000" value={t("homepage.stat2")} backColor="#aec8ff" />
- <Card key="€5,6M" value={t("homepage.stat3")} backColor="#D5F5F6" />
- </div>
+ <StatsSection />
 
- <br />
  <div class="font-bold text-2xl text-center">
  <span>{t("homepage.search_filter")}</span>
  </div>