@salifbiaye/create-boutique 0.6.0 → 0.7.0

package/templates/storefront/src/modules/ub/review-form.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { useActionState, useState } from "react"
+import { useT } from "@lib/boutique/i18n-client"
+import { submitReview, type ReviewFormState } from "@lib/data/review-actions"
+
+/**
+ * Formulaire d'avis d'un produit (page « Laisser un avis », lien de l'e-mail « commande livrée »).
+ * Étoiles au clavier et à la souris (boutons radio), prénom prérempli, titre facultatif, commentaire.
+ * Envoi par action serveur ; le backend vérifie tout (jeton, commande, produit, doublon).
+ */
+export default function ReviewForm({ token, productId, firstName }: { token: string; productId: string; firstName: string }) {
+  const t = useT()
+  const [state, action, pending] = useActionState<ReviewFormState, FormData>(submitReview, {})
+  const [rating, setRating] = useState(0)
+  const [hover, setHover] = useState(0)
+
+  if (state.ok) return <p className="ub-rform__done">{t("reviews.thanks")}</p>
+
+  const shown = hover || rating
+  return (
+    <form action={action} className="ub-rform">
+      <input type="hidden" name="token" value={token} />
+      <input type="hidden" name="product_id" value={productId} />
+      <fieldset className="ub-rform__stars" onMouseLeave={() => setHover(0)}>
+        <legend>{t("reviews.yourRating")}</legend>
+        {[1, 2, 3, 4, 5].map((n) => (
+          <label key={n} onMouseEnter={() => setHover(n)} className={n <= shown ? "is-on" : undefined} title={t(`reviews.rating${n}`)}>
+            <input type="radio" name="rating" value={n} required checked={rating === n} onChange={() => setRating(n)} />
+            <span aria-hidden>★</span>
+            <span className="ub-sr">{t(`reviews.rating${n}`)}</span>
+          </label>
+        ))}
+        <span className="ub-rform__hint" aria-live="polite">
+          {shown ? t(`reviews.rating${shown}`) : ""}
+        </span>
+      </fieldset>
+      <label className="ub-rform__field">
+        <span>{t("reviews.name")}</span>
+        <input name="author_name" required maxLength={40} defaultValue={firstName} autoComplete="given-name" />
+      </label>
+      <label className="ub-rform__field">
+        <span>
+          {t("reviews.titleField")} <small>{t("reviews.optional")}</small>
+        </span>
+        <input name="title" maxLength={80} />
+      </label>
+      <label className="ub-rform__field">
+        <span>{t("reviews.comment")}</span>
+        <textarea name="comment" required minLength={10} maxLength={1000} rows={4} placeholder={t("reviews.commentHint")} />
+      </label>
+      {state.error && (
+        <p className="ub-rform__error" role="alert">
+          {t(`reviews.error.${state.error}`)}
+        </p>
+      )}
+      <button type="submit" className="ub-rform__btn" disabled={pending || !rating}>
+        {pending ? t("reviews.sending") : t("reviews.send")}
+      </button>
+    </form>
+  )
+}

package/templates/storefront/src/modules/ub/reviews.tsx

@@ -0,0 +1,131 @@
+import Link from "next/link"
+import { getBoutique } from "@lib/boutique/config"
+import { t } from "@lib/boutique/i18n"
+import { getLatestReviews, getProductReviews } from "@lib/data/reviews"
+import FadeImg from "./fade-img"
+
+/**
+ * Avis clients sur le site : étoiles, section de la fiche produit, section de l'accueil.
+ * Apparence : variables du thème (--star, --surface, --ink, polices, arrondis) → s'accorde à chaque boutique.
+ * Texte simple rendu par React (jamais de HTML). CSS : styles/ub/reviews.css.
+ */
+
+/** Étoiles (note décimale : la dernière est remplie en partie) */
+export function Stars({ value, size = 16, label }: { value: number; size?: number; label?: string }) {
+  return (
+    <span className="ub-stars" role="img" aria-label={label ?? t("reviews.outOf", { value: String(value) })} style={{ ["--s" as string]: `${size}px` }}>
+      {[1, 2, 3, 4, 5].map((i) => {
+        const fill = Math.max(0, Math.min(1, value - (i - 1)))
+        return (
+          <span key={i} className="ub-stars__one" aria-hidden>
+            <span style={{ width: `${fill * 100}%` }} />
+          </span>
+        )
+      })}
+    </span>
+  )
+}
+
+const date = (iso: string) => new Intl.DateTimeFormat(getBoutique().locale, { day: "numeric", month: "long", year: "numeric" }).format(new Date(iso))
+
+/** Fiche produit : note moyenne, répartition, derniers avis. */
+export async function ProductReviews({ productId }: { productId: string }) {
+  const { reviews, summary } = await getProductReviews(productId)
+  return (
+    <section className="ub-section ub-reviews" id="avis" aria-labelledby="ub-reviews-title">
+      <div className="ub-wrap">
+        <h2 id="ub-reviews-title" className="ub-head ub-reviews__title">
+          {t("reviews.title")}
+        </h2>
+        {!summary.count ? (
+          <p className="ub-reviews__empty">{t("reviews.none")}</p>
+        ) : (
+          <div className="ub-reviews__grid">
+            <div className="ub-reviews__summary">
+              <p className="ub-reviews__avg">
+                <b>{summary.average.toLocaleString(getBoutique().locale)}</b>
+                <span>/5</span>
+              </p>
+              <Stars value={summary.average} size={22} />
+              <p className="ub-reviews__count">{t(summary.count > 1 ? "reviews.countMany" : "reviews.countOne", { count: String(summary.count) })}</p>
+              <ul className="ub-reviews__bars">
+                {[5, 4, 3, 2, 1].map((n) => {
+                  const c = summary.distribution[n - 1]
+                  return (
+                    <li key={n}>
+                      <span>{n}★</span>
+                      <span className="ub-reviews__bar" aria-hidden>
+                        <i style={{ width: `${summary.count ? (c / summary.count) * 100 : 0}%` }} />
+                      </span>
+                      <span>{c}</span>
+                    </li>
+                  )
+                })}
+              </ul>
+              <p className="ub-reviews__how">{t("reviews.how")}</p>
+            </div>
+            <ul className="ub-reviews__list">
+              {reviews.map((r) => (
+                <li key={r.id} className="ub-review">
+                  <div className="ub-review__head">
+                    <Stars value={r.rating} />
+                    <span className="ub-review__verified">{t("reviews.verified")}</span>
+                  </div>
+                  {r.title && <p className="ub-review__title">{r.title}</p>}
+                  <p className="ub-review__text">{r.comment}</p>
+                  <p className="ub-review__by">
+                    {r.author_name} · {date(r.created_at)}
+                  </p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+/** Accueil : les derniers avis 4-5 étoiles sur des produits de la boutique (rien s'il n'y en a pas). */
+export async function HomeReviews() {
+  const reviews = await getLatestReviews(6)
+  if (!reviews.length) return null
+  return (
+    <section className="ub-section ub-homereviews" aria-labelledby="ub-homereviews-title">
+      <div className="ub-wrap">
+        <div className="ub-homereviews__head">
+          <p className="ub-homereviews__kicker">{t("reviews.homeKicker")}</p>
+          <h2 id="ub-homereviews-title" className="ub-head">
+            {t("reviews.homeTitle")}
+          </h2>
+        </div>
+        <ul className="ub-homereviews__list">
+          {reviews.map((r) => (
+            <li key={r.id}>
+              <figure className="ub-quote">
+                <Stars value={r.rating} />
+                <blockquote>
+                  {r.title && <b>{r.title}</b>}
+                  <p>{r.comment}</p>
+                </blockquote>
+                <figcaption>
+                  <Link href={`/products/${r.product.handle}`} className="ub-quote__product">
+                    {r.product.thumbnail && (
+                      <span className="ub-quote__img">
+                        <FadeImg src={r.product.thumbnail} alt="" />
+                      </span>
+                    )}
+                    <span>
+                      <b>{r.author_name}</b>
+                      <small>{r.product.title}</small>
+                    </span>
+                  </Link>
+                </figcaption>
+              </figure>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/modules/ub/riviera.tsx

@@ -0,0 +1,175 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import HeroImage from "./hero-image"
+import { type P, discountLabel, heroImageOf, imageOf, priceOf, splitTitle, spaced } from "./home-kit"
+import { Icon } from "./icons"
+
+/**
+ * Accueil « Riviera » (Summer, theme.json → "home": "riviera") : élégance d'été, mise en page de magazine.
+ * Hero éditorial (grand titre à empattements, visuel posé sur une « scène » en arc), lookbook (Look N°1…),
+ * « Couleurs de la saison » (vestiaire rangé par couleur), sur-mesure en 3 étapes, bandeau final. CSS : styles/ub/riviera.css.
+ */
+
+export function RivieraHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = heroImageOf(campaign)
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const { before, hl, after } = splitTitle(hero.title, hero.highlight)
+  const off = discountLabel(campaign)
+  return (
+    <section className="ub-rv-hero">
+      {/* Visuel en fond, fondu dans le décor (pas de cadre) : à droite, s'efface vers le texte */}
+      {image && <HeroImage src={image} position="center 70%" className="ub-rv-hero__bg" />}
+      <div className="ub-wrap ub-rv-hero__in">
+        <div className="ub-rv-hero__text">
+          {hero.eyebrow && <p className="ub-rv-kicker">{hero.eyebrow}</p>}
+          <h1 className="ub-rv-title">
+            {before} {hl && <em>{hl}</em>}{spaced(after)}
+          </h1>
+          {hero.sub && <p className="ub-rv-sub">{hero.sub}</p>}
+          <div className="ub-rv-actions">
+            <Link href="/store" className="ub-rv-btn ub-rv-btn--solid">
+              {hero.cta}
+            </Link>
+            {hero.cta2 && (
+              <a href="#looks" className="ub-rv-link">
+                {hero.cta2} <Icon name="arrowRight" />
+              </a>
+            )}
+          </div>
+          {off && (
+            <p className="ub-rv-note">
+              <b>{off}</b> {hero.bubble?.[2]}
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** Lookbook : 1 grande image + 2 petites, légendées « Look N° », puis une ligne « Le vestiaire ». */
+export function RivieraLookbook({ products, title }: { products: P[]; title: string }) {
+  const looks = products.filter(imageOf).slice(0, 3)
+  if (looks.length < 3) return null
+  return (
+    <section className="ub-wrap ub-rv-section" id="looks">
+      <header className="ub-rv-head">
+        <p className="ub-rv-kicker">{t("riviera.looksKicker")}</p>
+        <h2 className="ub-rv-h2">{title}</h2>
+      </header>
+      <div className="ub-rv-looks">
+        {looks.map((p, i) => {
+          const { price, onSale } = priceOf(p)
+          return (
+            <Link key={p.id} href={`/products/${p.handle}`} className={`ub-rv-look ub-rv-look--${i + 1}`}>
+              <span className="ub-rv-look__img">
+                <FadeImg src={imageOf(p)} alt="" />
+              </span>
+              <span className="ub-rv-look__cap">
+                <small>
+                  {t("riviera.look", { n: String(i + 1) })}
+                </small>
+                <b>{p.title}</b>
+                {price && (
+                  <span className="ub-rv-price">
+                    {price.calculated_price}
+                    {onSale && <s>{price.original_price}</s>}
+                  </span>
+                )}
+              </span>
+            </Link>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+/** Couleurs de la saison : le vestiaire rangé par couleur (une pastille par pièce, nuance tirée de la photo). */
+const SWATCHES = ["#e8dcc6", "#c9b48f", "#2f3b52", "#5f6f52", "#8a6a4f", "#d9d4ca", "#1f2a24", "#b7a07a"]
+export function RivieraColours({ products }: { products: P[] }) {
+  const items = products.filter(imageOf).slice(3, 11)
+  if (items.length < 4) return null
+  return (
+    <section className="ub-rv-colours">
+      <div className="ub-wrap">
+        <header className="ub-rv-head ub-rv-head--row">
+          <div>
+            <p className="ub-rv-kicker">{t("riviera.coloursKicker")}</p>
+            <h2 className="ub-rv-h2">{t("riviera.colours")}</h2>
+          </div>
+          <Link href="/store" className="ub-rv-link">
+            {t("riviera.all")} <Icon name="arrowRight" />
+          </Link>
+        </header>
+        <ul className="ub-rv-rail">
+          {items.map((p, i) => {
+            const { price, onSale } = priceOf(p)
+            return (
+              <li key={p.id}>
+                <Link href={`/products/${p.handle}`} className="ub-rv-piece">
+                  <span className="ub-rv-piece__img">
+                    <FadeImg src={imageOf(p)} alt="" />
+                  </span>
+                  <span className="ub-rv-piece__swatch" style={{ background: SWATCHES[i % SWATCHES.length] }} aria-hidden />
+                  <span className="ub-rv-piece__name">{p.title}</span>
+                  {price && (
+                    <span className="ub-rv-price">
+                      {price.calculated_price}
+                      {onSale && <s>{price.original_price}</s>}
+                    </span>
+                  )}
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/** Sur-mesure : 3 étapes, puis l'offre (texte promo + compte à rebours). */
+export function RivieraTailor({ campaign }: { campaign: Campaign }) {
+  const promo = campaign.promo
+  const steps: [string, string][] = [
+    [t("riviera.step1"), t("riviera.step1Sub")],
+    [t("riviera.step2"), t("riviera.step2Sub")],
+    [t("riviera.step3"), t("riviera.step3Sub")],
+  ]
+  return (
+    <section className="ub-wrap ub-rv-section">
+      <div className="ub-rv-tailor">
+        <div className="ub-rv-tailor__text">
+          {promo?.eyebrow && <p className="ub-rv-kicker">{promo.eyebrow}</p>}
+          <h2 className="ub-rv-h2">{promo?.title ?? campaign.hero.title}</h2>
+          {promo?.text && <p className="ub-rv-sub">{promo.text}</p>}
+          {campaign.showCountdown !== false && (
+            <div className="ub-rv-cd">
+              <CampaignCountdown endsAt={campaign.endsAt} />
+            </div>
+          )}
+          <Link href="/store" className="ub-rv-btn ub-rv-btn--light">
+            {promo?.cta ?? campaign.hero.cta}
+          </Link>
+        </div>
+        <ol className="ub-rv-steps">
+          {steps.map(([a, b], i) => (
+            <li key={a}>
+              <span className="ub-rv-steps__n">0{i + 1}</span>
+              <span>
+                <b>{a}</b>
+                <small>{b}</small>
+              </span>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </section>
+  )
+}

package/templates/storefront/src/modules/ub/souk.tsx

@@ -0,0 +1,214 @@
+import Link from "next/link"
+import { preload } from "react-dom"
+import type { Campaign } from "@lib/boutique/campaign"
+import { t } from "@lib/boutique/i18n"
+import { HttpTypes } from "@medusajs/types"
+import { CampaignCountdown } from "./campaign-blocks"
+import FadeImg from "./fade-img"
+import { type P, discountLabel, discountOf, heroImageOf, imageOf, priceOf, splitTitle, spaced } from "./home-kit"
+import { Icon } from "./icons"
+
+/**
+ * Accueil « Souk » (Mubarak · Sable, theme.json → "home": "souk") : Aïd, Korité, Tabaski.
+ * Crème, sable, terre cuite, safran, indigo ; treillis géométrique. Hero : texte à gauche, visuel collé au bord droit
+ * (fond blanc fondu dans le crème), remise en cachet de cire. Puis : les trésors au comptoir (fenêtre en arc + liste à choisir), « Pour qui ? »
+ * (catégories), carte de vœux en enveloppe avec cachet et compte à rebours. CSS : styles/ub/souk.css.
+ */
+
+const TONES = ["terra", "saffron", "indigo", "teal"] as const
+
+/** Treillis géométrique (motif de fond), dessiné en SVG. */
+function Lattice({ id, className }: { id: string; className?: string }) {
+  return (
+    <svg className={className} aria-hidden>
+      <defs>
+        <pattern id={id} width="48" height="48" patternUnits="userSpaceOnUse">
+          <path d="M24 0 48 24 24 48 0 24zM24 10 38 24 24 38 10 24z" fill="none" stroke="currentColor" strokeWidth="1" />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+    </svg>
+  )
+}
+
+export function SoukHero({ campaign }: { campaign: Campaign }) {
+  const { hero } = campaign
+  const image = heroImageOf(campaign)
+  if (image) preload(image, { as: "image", fetchPriority: "high" })
+  const { before, hl, after } = splitTitle(hero.title, hero.highlight)
+  const off = discountLabel(campaign)
+  return (
+    <section className="ub-sk-hero">
+      <Lattice id="ub-sk-lattice-hero" className="ub-sk-lattice" />
+      {/* Visuel collé au bord droit et en bas du hero, toute la hauteur ; son côté blanc (treillis) se fond dans le crème.
+          Cachet de cire avec la remise posé sur la zone fondue. */}
+      <figure className="ub-sk-visual">
+        {image ? <FadeImg src={image} alt="" priority /> : <span className="ub-ph" />}
+        {off && (
+          <p className="ub-sk-seal" aria-hidden>
+            <small>{hero.bubble?.[0]}</small>
+            <b>{off}</b>
+          </p>
+        )}
+      </figure>
+      <div className="ub-wrap ub-sk-hero__in">
+        <div className="ub-sk-hero__text">
+          {hero.eyebrow && <p className="ub-sk-kicker">{hero.eyebrow}</p>}
+          <h1 className="ub-sk-title">
+            {before} {hl && <span className="ub-sk-title__hl">{hl}</span>}{spaced(after)}
+          </h1>
+          {hero.sub && <p className="ub-sk-sub">{hero.sub}</p>}
+          <div className="ub-sk-actions">
+            <Link href="/store" className="ub-sk-btn">
+              {hero.cta} <Icon name="arrowRight" />
+            </Link>
+            {hero.cta2 && (
+              <a href="#voeux" className="ub-sk-btn ub-sk-btn--ghost">
+                {hero.cta2}
+              </a>
+            )}
+          </div>
+          <ul className="ub-sk-perks">
+            <li>
+              <Icon name="gift" /> {t("souk.perk1")}
+            </li>
+            <li>
+              <Icon name="truck" /> {t("souk.perk2")}
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * Les trésors du souk : le comptoir. À gauche, une grande fenêtre en arc outrepassé montre le produit choisi ;
+ * à droite, la liste (vignette, nom, prix, remise). Choix par boutons radio + :has() : aucun JavaScript.
+ */
+export function SoukStalls({ products, title }: { products: P[]; title: string }) {
+  const items = products.filter(imageOf).slice(0, 6)
+  if (!items.length) return null
+  return (
+    <section className="ub-sk-section ub-sk-vitrine">
+      <Lattice id="ub-sk-lattice-vitrine" className="ub-sk-lattice" />
+      <div className="ub-wrap">
+        <header className="ub-sk-head ub-sk-head--row">
+          <div>
+            <p className="ub-sk-kicker">{t("souk.stallsKicker")}</p>
+            <h2 className="ub-sk-h2">{title}</h2>
+          </div>
+          <Link href="/store" className="ub-sk-more">
+            {t("souk.all")} <Icon name="arrowRight" />
+          </Link>
+        </header>
+        <div className="ub-sk-counter">
+          <div className="ub-sk-counter__stage">
+            {items.map((p, i) => {
+              const { price, onSale } = priceOf(p)
+              const pct = Math.round(discountOf(p) * 100)
+              return (
+                <Link key={p.id} href={`/products/${p.handle}`} className="ub-sk-view" data-i={i} tabIndex={-1}>
+                  <span className="ub-sk-view__img">
+                    <FadeImg src={imageOf(p)} alt="" />
+                  </span>
+                  <span className="ub-sk-view__cap">
+                    {onSale && pct > 0 && <span className="ub-sk-view__off">-{pct}%</span>}
+                    <span className="ub-sk-view__name">{p.title}</span>
+                    {price && (
+                      <span className="ub-sk-price">
+                        <b>{price.calculated_price}</b>
+                        {onSale && <s>{price.original_price}</s>}
+                      </span>
+                    )}
+                    <span className="ub-sk-view__go">
+                      {t("souk.see")} <Icon name="arrowRight" />
+                    </span>
+                  </span>
+                </Link>
+              )
+            })}
+          </div>
+          <ul className="ub-sk-counter__list">
+            {items.map((p, i) => {
+              const { price } = priceOf(p)
+              const pct = Math.round(discountOf(p) * 100)
+              return (
+                <li key={p.id}>
+                  <input type="radio" name="ub-sk-pick" id={`ub-sk-pick-${i}`} className="ub-sk-pick" defaultChecked={i === 0} />
+                  <label htmlFor={`ub-sk-pick-${i}`} className="ub-sk-row">
+                    <span className="ub-sk-row__img">
+                      <FadeImg src={imageOf(p)} alt="" />
+                    </span>
+                    <span className="ub-sk-row__name">{p.title}</span>
+                    {pct > 0 && <span className="ub-sk-row__off">-{pct}%</span>}
+                    {price && <b className="ub-sk-row__price">{price.calculated_price}</b>}
+                  </label>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/** « Pour qui ? » : les catégories en tuiles arrondies en arc (masqué s'il n'y a pas de catégories). */
+export function SoukWho({ categories, title }: { categories: HttpTypes.StoreProductCategory[]; title: string }) {
+  const roots = categories.filter((c) => !c.parent_category).slice(0, 6)
+  if (!roots.length) return null
+  return (
+    <section className="ub-sk-section">
+      <div className="ub-wrap">
+        <header className="ub-sk-head">
+          <h2 className="ub-sk-h2">{title}</h2>
+        </header>
+        <ul className="ub-sk-who">
+          {roots.map((c, i) => (
+            <li key={c.id}>
+              <Link href={`/categories/${c.handle}`} className={`ub-sk-door is-${TONES[i % TONES.length]}`}>
+                <span>{c.name}</span>
+                <Icon name="arrowRight" />
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/** Carte de vœux : enveloppe ouverte, cachet de cire, texte de la promo et compte à rebours. */
+export function SoukLetter({ campaign }: { campaign: Campaign }) {
+  const promo = campaign.promo
+  return (
+    <section className="ub-sk-section" id="voeux">
+      <div className="ub-wrap">
+        <div className="ub-sk-letter">
+          <span className="ub-sk-letter__flap" aria-hidden />
+          <div className="ub-sk-letter__card">
+            <Lattice id="ub-sk-lattice-letter" className="ub-sk-lattice" />
+            <p className="ub-sk-kicker">{promo?.eyebrow ?? campaign.hero.eyebrow}</p>
+            <h2 className="ub-sk-h2">{promo?.title ?? campaign.hero.title}</h2>
+            {promo?.text && <p className="ub-sk-sub">{promo.text}</p>}
+            {campaign.showCountdown !== false && (
+              <div className="ub-sk-cd">
+                <CampaignCountdown endsAt={campaign.endsAt} />
+              </div>
+            )}
+            <Link href="/store" className="ub-sk-btn">
+              {promo?.cta ?? campaign.hero.cta} <Icon name="arrowRight" />
+            </Link>
+            <p className="ub-sk-sign">{t("souk.sign")}</p>
+          </div>
+          <span className="ub-sk-letter__seal" aria-hidden>
+            <svg viewBox="0 0 24 26">
+              <path d="M12 1.5 14.6 6l5.1-.7-.7 5.1 4.5 2.6-4.5 2.6.7 5.1-5.1-.7L12 24.5 9.4 20l-5.1.7.7-5.1L.5 13l4.5-2.6-.7-5.1 5.1.7z" />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </section>
+  )
+}