fix: Refactor svgs to accept props. Add hero image in landing

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/app/page.tsx

@@ -1,20 +1,21 @@
 import AnimatedPageWrapper from "@/components/generic/AnimatedPageWrapper"
 import SearchBar from "../components/search/SearchBar"
 import MainContainer from "@/components/generic/MainContainer"
+import Header from "@/components/header/Header"
+import GiftHeroImage from "@/images/GiftHero"
 
 /**
  * Renders the landing page view. Which consists of a Title, subtitle and a search bar.
  */
 export default function Home() {
   return (
     <AnimatedPageWrapper>
-      <MainContainer className="h-screen">
-        <h1 className="bg-clip-text text-transparent bg-gradient-to-b from-slate-900 to-slate-600 text-4xl font-extrabold text-center">
-          SIMPLE SHOP
-        </h1>
-        <p className="bg-white rounded-xl max-w-fit bg-opacity-70 mb-12 mt-4 mx-auto py-1 px-4 shadow-[5px_5px_10px_#b0b2b3,-5px_-5px_10px_#ffffff]">
+      <Header />
+      <MainContainer className="h-[calc(100vh-57px)] place-content-start">
+        <h2 className="bg-white rounded-xl max-w-fit bg-opacity-70 my-8 mx-auto py-1 px-4 shadow-[5px_5px_10px_#b0b2b3,-5px_-5px_10px_#ffffff]">
           Online Store
-        </p>
+        </h2>
+        <GiftHeroImage className="w-10/12 mx-auto my-10" />
         <SearchBar />
       </MainContainer>
     </AnimatedPageWrapper>

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/buttons/DisplaySearchBar.tsx

@@ -0,0 +1,14 @@
+import SearchIcon from "@/icons/Search"
+import { type ComponentPropsWithoutRef } from "react"
+
+type ButtonProps = ComponentPropsWithoutRef<"button">
+
+const DisplaySearchBar = ({ ...props }: ButtonProps) => {
+  return (
+    <button {...props} aria-label="Display search bar">
+      <SearchIcon />
+    </button>
+  )
+}
+
+export default DisplaySearchBar

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/buttons/HideSearchBar.tsx

@@ -0,0 +1,14 @@
+import { type ComponentPropsWithoutRef } from "react"
+import DownChevron from "@/icons/DownChevron"
+
+type ButtonProps = ComponentPropsWithoutRef<"button">
+
+const HideSearchBar = (props: ButtonProps) => {
+  return (
+    <button {...props} aria-label="Hide search bar">
+      <DownChevron />
+    </button>
+  )
+}
+
+export default HideSearchBar

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/header/Header.tsx

@@ -1,14 +1,14 @@
 import Link from "next/link"
 
-import CartIcon from "@/icons/CartIcon"
+import CartLogo from "@/icons/CartLogo"
 
 const Header = () => {
   return (
     <header className="h-fit px-2 flex border-b items-center sticky top-0 z-10 inset-x-0 bg-slate-50 bg-opacity-80">
       <Link href="/" aria-label="Return to home page">
-        <CartIcon className="w-10 bg-slate-50 rounded-full p-1 border-2 m-2" />
+        <CartLogo className="w-10 bg-slate-50 rounded-full p-1 border-2 m-2" />
       </Link>
-      <h1 className="pl-2 text-2xl font-bold text-center">Simple Shop</h1>
+      <h1 className="pl-2 text-xl font-extrabold text-center">SIMPLE SHOP</h1>
     </header>
   )
 }

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/products/ProductCard.tsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 import Link from "next/link"
 
 import ProductRating from "./ProductRating"
-import AddToCartIcon from "@/icons/AddToCartIcon"
+import CartPlus from "@/icons/CartPlus"
 
 import { type Product } from "@/lib/types"
 import CategoryButton from "./CategoryButton"
@@ -63,7 +63,7 @@ const ProductCard = ({ product }: { product: Product }) => {
           onClick={handleClick}
           className="z-10 absolute right-4 bottom-4 rounded-full w-12 h-12 flex flex-col place-items-center place-content-center shadow-[3px_3px_3px_#b0b2b3,-3px_-3px_3px_#ffffff] active:border active:shadow-none transition-shadow duration-50"
         >
-          <AddToCartIcon />
+          <CartPlus className="w-7" />
         </button>
       </article>
     </Link>

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/search/DynamicSearchBar.tsx

@@ -3,10 +3,10 @@
 import { useEffect, useRef, useState } from "react"
 
 import SearchBar from "./SearchBar"
-import ToggleSearchIcon from "@/icons/ToggleSearchIcon"
-import DownChevronIcon from "@/icons/DownChevronIcon"
+import DownChevron from "@/icons/DownChevron"
 
 import autoAnimate from "@formkit/auto-animate"
+import DisplaySearchBar from "../buttons/DisplaySearchBar"
 
 /**
  * A search bar that can be toggled on and off.
@@ -26,16 +26,16 @@ const DynamicSearchBar = () => {
   return (
     <div ref={parent}>
       {!show ? (
-        <ToggleSearchIcon
+        <DisplaySearchBar
           onClick={toggleBar}
-          className="w-12 fixed right-6 mx-auto bottom-6 bg-slate-50 rounded-full p-2 shadow-[4px_4px_6px_#b0b2b3,-7px_-7px_10px_#eeeeee] active:border active:shadow-none transition-shadow duration-50"
+          className="w-10 fixed right-6 mx-auto bottom-6 text-slate-600 bg-slate-50 rounded-full p-2 shadow-[4px_4px_6px_#b0b2b3,-7px_-7px_10px_#eeeeee] active:border active:shadow-none transition-shadow duration-50"
         />
       ) : (
         <div className="fixed flex flex-col inset-x-0 bottom-2">
           <div className="h-16 mb-2">
             <SearchBar />
           </div>
-          <DownChevronIcon
+          <DownChevron
             onClick={toggleBar}
             className="w-10 mb-1 mx-auto rounded-full p-2 bg-slate-50 shadow-[3px_3px_3px_#b0b2b3,-3px_-3px_3px_#ffffff] active:border active:shadow-none transition-shadow duration-50"
           />

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/search/SearchBar.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation"
 import { useForm } from "react-hook-form"
 import { type SubmitHandler } from "react-hook-form"
-import FormSearchIcon from "../../icons/FormSearchIcon"
+import SearchIcon from "../../icons/Search"
 
 type FormValues = {
   searchInput: string
@@ -36,7 +36,7 @@ const SearchBar = (): JSX.Element => {
       </label>
       <div className="relative">
         <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-slate-300">
-          <FormSearchIcon />
+          <SearchIcon className="w-4" />
         </div>
         <input
           {...register("searchInput", { required: true })}

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/icons/CartIcon.tsx → pruebas/02-bazar-universal/fernandochaza/simple-shop/src/icons/CartLogo.tsx

@@ -1,10 +1,11 @@
-const CartIcon = ({ className, ...props }: { className?: string }) => {
+import { type SVGProps } from "react"
+
+const CartLogo = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      fill="none"
+      fill="currentColor"
       viewBox="0 0 24 24"
-      className={className}
       {...props}
     >
       <g fill="#292D32">
@@ -19,4 +20,4 @@ const CartIcon = ({ className, ...props }: { className?: string }) => {
   )
 }
 
-export default CartIcon
+export default CartLogo

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/icons/AddToCartIcon.tsx → pruebas/02-bazar-universal/fernandochaza/simple-shop/src/icons/CartPlus.tsx

@@ -1,20 +1,17 @@
-import React from "react"
+import { type SVGProps } from "react"
 
-const AddToCartIcon = () => {
+const CartPlus = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      className="icon icon-tabler icon-tabler-shopping-cart-plus"
-      width="24"
-      height="24"
       viewBox="0 0 24 24"
-      strokeWidth="2"
+      strokeWidth="1.5"
       stroke="currentColor"
       fill="none"
       strokeLinecap="round"
       strokeLinejoin="round"
+      {...props}
     >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
       <path d="M4 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
       <path d="M12.5 17h-6.5v-14h-2"></path>
       <path d="M6 5l14 1l-.86 6.017m-2.64 .983h-10.5"></path>
@@ -24,4 +21,4 @@ const AddToCartIcon = () => {
   )
 }
 
-export default AddToCartIcon
+export default CartPlus

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/icons/DownChevron.tsx

@@ -0,0 +1,17 @@
+import { type SVGProps } from "react"
+
+const DownChevron = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.6"
+        d="m6 10 6 6 6-6"
+      />
+    </svg>
+  )
+}
+
+export default DownChevron

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/icons/NextChevron.tsx

@@ -1,4 +1,6 @@
-const NextChevron = () => {
+import { type SVGProps } from "react"
+
+const NextChevron = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
       <path

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/icons/PreviousChevron.tsx

@@ -1,4 +1,6 @@
-const PreviousChevron = ({ ...props }) => {
+import { type SVGProps } from "react"
+
+const PreviousChevron = (props: SVGProps<SVGSVGElement>) => {
   return (
     <svg
       {...props}

pruebas/02-bazar-universal/fernandochaza/simple-shop/src/icons/FormSearchIcon.tsx → pruebas/02-bazar-universal/fernandochaza/simple-shop/src/icons/Search.tsx

@@ -1,6 +1,8 @@
-const FormSearchIcon = () => {
+import { type SVGProps } from "react"
+
+const SearchIcon = (props: SVGProps<SVGSVGElement>) => {
   return (
-    <svg aria-hidden="true" fill="none" viewBox="0 0 20 20" width="20">
+    <svg aria-hidden="true" fill="none" viewBox="0 0 20 20" {...props}>
       <path
         stroke="currentColor"
         strokeLinecap="round"
@@ -12,4 +14,4 @@ const FormSearchIcon = () => {
   )
 }
 
-export default FormSearchIcon
+export default SearchIcon