From 392558ec4ec70831f8511814b8ca0ff797e3d6cc Mon Sep 17 00:00:00 2001 From: Telkens Date: Sun, 24 Mar 2024 14:48:42 -0500 Subject: [PATCH] Add payment info section --- package-lock.json | 6 ++ package.json | 1 + src/app/page.tsx | 2 + src/components/PaymentMethods/InfoCard.tsx | 23 ++++++++ .../PaymentMethods/PaymentMethodsDesktop.tsx | 17 ++++++ .../PaymentMethods/PaymentMethodsMobile.tsx | 59 +++++++++++++++++++ src/components/PaymentMethods/index.tsx | 16 +++++ src/lib/constants.ts | 17 ++++++ 8 files changed, 141 insertions(+) create mode 100644 src/components/PaymentMethods/InfoCard.tsx create mode 100644 src/components/PaymentMethods/PaymentMethodsDesktop.tsx create mode 100644 src/components/PaymentMethods/PaymentMethodsMobile.tsx create mode 100644 src/components/PaymentMethods/index.tsx diff --git a/package-lock.json b/package-lock.json index d8674df..b93ca28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@types/react-star-ratings": "^2.3.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", + "keen-slider": "^6.8.6", "next": "14.1.0", "next-themes": "^0.2.1", "react": "^18", @@ -2957,6 +2958,11 @@ "node": ">=4.0" } }, + "node_modules/keen-slider": { + "version": "6.8.6", + "resolved": "https://registry.npmjs.org/keen-slider/-/keen-slider-6.8.6.tgz", + "integrity": "sha512-dcEQ7GDBpCjUQA8XZeWh3oBBLLmyn8aoeIQFGL/NTVkoEOsmlnXqA4QykUm/SncolAZYGsEk/PfUhLZ7mwMM2w==" + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", diff --git a/package.json b/package.json index 62b4312..dec0af4 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@types/react-star-ratings": "^2.3.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", + "keen-slider": "^6.8.6", "next": "14.1.0", "next-themes": "^0.2.1", "react": "^18", diff --git a/src/app/page.tsx b/src/app/page.tsx index 572acc4..080c0cd 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -11,6 +11,7 @@ export const metadata: Metadata = { import Blog from "@/components/Blog"; import BrandsCarousel from "@/components/BrandsCarousel"; import { Reviews } from "@/components/Reviews"; +import { PaymentMethods } from '@/components/PaymentMethods' import { ReviewsSkeleton } from "@/components/Reviews/ReviewsSkeleton"; import { Suspense } from "react"; @@ -25,6 +26,7 @@ export default function Home() { }> + ) } diff --git a/src/components/PaymentMethods/InfoCard.tsx b/src/components/PaymentMethods/InfoCard.tsx new file mode 100644 index 0000000..7d3b522 --- /dev/null +++ b/src/components/PaymentMethods/InfoCard.tsx @@ -0,0 +1,23 @@ +import Image from "next/image"; + +interface InfoCardProps { + title: string; + description: string; + img: string; +} + +export const InfoCard = ({ title, description, img }: InfoCardProps) => { + return ( +
+ {description} +
+

+ {title} +

+

+ {description} +

+
+
+ ); +}; diff --git a/src/components/PaymentMethods/PaymentMethodsDesktop.tsx b/src/components/PaymentMethods/PaymentMethodsDesktop.tsx new file mode 100644 index 0000000..e001b5f --- /dev/null +++ b/src/components/PaymentMethods/PaymentMethodsDesktop.tsx @@ -0,0 +1,17 @@ +import { PAYMENT_METHODS } from "@/lib/constants"; +import { InfoCard } from "./InfoCard"; + +export const PaymentMethodsDesktop = () => { + return ( + <> + {PAYMENT_METHODS.map((item) => ( + + ))} + + ); +}; diff --git a/src/components/PaymentMethods/PaymentMethodsMobile.tsx b/src/components/PaymentMethods/PaymentMethodsMobile.tsx new file mode 100644 index 0000000..046de82 --- /dev/null +++ b/src/components/PaymentMethods/PaymentMethodsMobile.tsx @@ -0,0 +1,59 @@ +"use client"; + +import { useKeenSlider } from "keen-slider/react"; +import "keen-slider/keen-slider.min.css"; + +import { PAYMENT_METHODS } from "@/lib/constants"; +import { InfoCard } from "./InfoCard"; + +export const PaymentMethodsMobile = () => { + const [sliderRef] = useKeenSlider( + { + loop: true, + }, + [ + (slider) => { + let timeout: ReturnType; + let mouseOver = false; + function clearNextTimeout() { + clearTimeout(timeout); + } + function nextTimeout() { + clearTimeout(timeout); + if (mouseOver) return; + timeout = setTimeout(() => { + slider.next(); + }, 4000); + } + slider.on("created", () => { + slider.container.addEventListener("mouseover", () => { + mouseOver = true; + clearNextTimeout(); + }); + slider.container.addEventListener("mouseout", () => { + mouseOver = false; + nextTimeout(); + }); + nextTimeout(); + }); + slider.on("dragStarted", clearNextTimeout); + slider.on("animationEnded", nextTimeout); + slider.on("updated", nextTimeout); + }, + ] + ); + + return ( +
+ {PAYMENT_METHODS.map((item) => ( +
+ +
+ ))} +
+ ); +}; diff --git a/src/components/PaymentMethods/index.tsx b/src/components/PaymentMethods/index.tsx new file mode 100644 index 0000000..47d1bd1 --- /dev/null +++ b/src/components/PaymentMethods/index.tsx @@ -0,0 +1,16 @@ +"use client"; + +import useMobile from "@/hooks/useMobile"; + +import { PaymentMethodsMobile } from "./PaymentMethodsMobile"; +import { PaymentMethodsDesktop } from "./PaymentMethodsDesktop"; + +export const PaymentMethods = () => { + const { isMobile } = useMobile(); + + return ( +
+ {isMobile ? : } +
+ ); +}; diff --git a/src/lib/constants.ts b/src/lib/constants.ts index dc19de2..94b2d1c 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -141,4 +141,21 @@ export const BRANDS = [ name: "Volvo", image: "/images/brands/volvo-logo.webp" }, +] +export const PAYMENT_METHODS = [ + { + img: '/icons/contact.svg', + title: 'Todos los medios de pago', + description: 'Ofrecemos una variedad de métodos de pago seguros y confiables, para garantizar una experiencia de compra sin preocupaciones.' + }, + { + img: '/icons/contact.svg', + title: 'Envío a todo el país', + description: 'Entregamos en todo Colombia, desde grandes ciudades hasta áreas rurales, con envíos rápidos, seguros y rasteables.' + }, + { + img: '/icons/contact.svg', + title: 'Compra segura', + description: 'Tu seguridad es nuestra prioridad. Utilizamos tecnología SSL y métodos de pago verificados para proteger tus datos sin riesgos.' + } ] \ No newline at end of file