+
+ );
+
+ const FormInput = ({ id, label, type = "text", error, ...props }) => (
+
+
+
+
+ {title}
+{description}
+
+
+
+ {error && (
+
+ );
return (
- {error.message}
+ )} +
-
+
{/* Content Container */}
-
+
{/* Text Content */}
-
-
{title}
-{subtitle}
-
- ) => {
+ return (
+
+
-
-
-
-
-
- Horário Flexível
-- Atendemos de segunda a sábado, das 10h às 20h -
-
-
-
-
-
-
- Consulta Gratuita
-- Primeira consulta sem compromisso para discutir seu projeto -
-
-
+
-
-
-
- Localização Central
-- Estúdio localizado no centro da cidade, fácil acesso -
-
+
{/* Form */}
-
+ Estúdio de Arte Corporal
+
+ {title}
+{subtitle}
+
+
-
);
};
-export default AppointmentSection;
+export default AppointmentSection;
\ No newline at end of file
diff --git a/src/components/ArtistsSection.tsx b/src/components/ArtistsSection.tsx
index b79b452..6d35942 100644
--- a/src/components/ArtistsSection.tsx
+++ b/src/components/ArtistsSection.tsx
@@ -1,6 +1,5 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
-import ArtistCard from "./ArtistCard";
import { Button } from "./ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";
@@ -20,6 +19,50 @@ interface ArtistsSectionProps {
artists?: Artist[];
}
+// Implementação atualizada do ArtistCard
+const ArtistCard = ({
+ name,
+ photo,
+ specialties,
+ experience,
+ sampleWorks,
+ bio,
+}: Omit
+ {/* Imagem do artista com altura responsiva */}
+
+ );
+};
+
const ArtistsSection = ({
title = "Nossos Artistas",
subtitle = "Conheça os talentosos profissionais que transformarão suas ideias em arte na pele",
@@ -28,25 +71,28 @@ const ArtistsSection = ({
id: "1",
name: "Maria Silva",
photo:
- "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1000&auto=format&fit=crop",
+ "/public/tatto/Maria Silva-artista.jpg",
specialties: ["Realismo", "Blackwork", "Aquarela"],
experience: "8 anos",
sampleWorks: [
- "https://images.unsplash.com/photo-1590246814883-57764a28a6c6?q=80&w=300&auto=format&fit=crop",
- "https://images.unsplash.com/photo-1561120589-7d6730102dc0?q=80&w=300&auto=format&fit=crop",
- ],
+ "/gallery/gallery1.jpg",
+
+ "/gallery/gallery1.jpg",
+ ],
bio: "Especialista em transformar ideias em arte única na pele. Formada pela Escola de Artes Visuais, com passagens por estúdios renomados em São Paulo e Nova York.",
},
{
id: "2",
name: "Carlos Mendes",
photo:
- "https://images.unsplash.com/photo-1531891570158-e71b35a485bc?q=80&w=1000&auto=format&fit=crop",
+ "/tatto/Carlos Mendes-artista.jpg",
specialties: ["Old School", "Tribal", "Geométrico"],
experience: "12 anos",
sampleWorks: [
- "https://images.unsplash.com/photo-1598971861713-54ad16a7e72e?q=80&w=300&auto=format&fit=crop",
- "https://images.unsplash.com/photo-1594067598377-478c61d59f3f?q=80&w=300&auto=format&fit=crop",
+ "/gallery/gallery1.jpg",
+
+ "/gallery/gallery1.jpg",
+
],
bio: "Mestre em estilos tradicionais e contemporâneos. Participou de convenções internacionais e possui certificações em técnicas avançadas de sombreamento.",
},
@@ -54,12 +100,14 @@ const ArtistsSection = ({
id: "3",
name: "Ana Oliveira",
photo:
- "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?q=80&w=1000&auto=format&fit=crop",
+ "/tatto/Ana Oliveira-artista.jpg",
specialties: ["Minimalista", "Fineline", "Pontilhismo"],
experience: "5 anos",
sampleWorks: [
- "https://images.unsplash.com/photo-1581342878583-5f71d2dac3d7?q=80&w=300&auto=format&fit=crop",
- "https://images.unsplash.com/photo-1568515045052-f9a854d70bfd?q=80&w=300&auto=format&fit=crop",
+ "/gallery/gallery1.jpg",
+
+ "/gallery/gallery1.jpg",
+
],
bio: "Especializada em traços finos e designs minimalistas. Formada em Artes Plásticas com foco em técnicas de ilustração contemporânea.",
},
@@ -67,19 +115,47 @@ const ArtistsSection = ({
id: "4",
name: "Rafael Costa",
photo:
- "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1000&auto=format&fit=crop",
+ "/tatto/Rafael Costa-artista.jpeg",
specialties: ["Oriental", "Colorido", "Cover-up"],
experience: "10 anos",
sampleWorks: [
- "https://images.unsplash.com/photo-1598971861713-54ad16a7e72e?q=80&w=300&auto=format&fit=crop",
- "https://images.unsplash.com/photo-1550537687-c91072c4792d?q=80&w=300&auto=format&fit=crop",
- ],
+ "/gallery/gallery1.jpg",
+
+ "/gallery/gallery1.jpg",
+ ],
bio: "Especialista em arte oriental e coberturas complexas. Estudou técnicas tradicionais no Japão e trabalhou em estúdios renomados na Ásia e Europa.",
},
],
}: ArtistsSectionProps) => {
const [currentIndex, setCurrentIndex] = useState(0);
- const cardsToShow = 3;
+ const [cardsToShow, setCardsToShow] = useState(1);
+ const [isMobile, setIsMobile] = useState(true);
+
+ // Ajustar número de cartões baseado no tamanho da tela
+ useEffect(() => {
+ const handleResize = () => {
+ const mobile = window.innerWidth < 768;
+ setIsMobile(mobile);
+
+ if (mobile) {
+ setCardsToShow(1);
+ } else if (window.innerWidth < 1024) {
+ setCardsToShow(2);
+ } else {
+ setCardsToShow(3);
+ }
+ };
+
+ // Inicializar com base no tamanho de tela atual
+ handleResize();
+
+ // Adicionar event listener para redimensionamento
+ window.addEventListener('resize', handleResize);
+
+ // Limpar event listener quando o componente for desmontado
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
const maxIndex = Math.max(0, artists.length - cardsToShow);
const handlePrevious = () => {
@@ -90,17 +166,25 @@ const ArtistsSection = ({
setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
};
- const visibleArtists = artists.slice(
- currentIndex,
- currentIndex + cardsToShow,
- );
+ // Calcular largura e gap com base no tamanho da tela
+ const getCardWidth = () => {
+ if (isMobile) return window.innerWidth - 32; // Largura total menos padding
+ if (window.innerWidth < 1024) return 320;
+ return 350;
+ };
+
+ const getCardGap = () => {
+ if (isMobile) return 0;
+ if (window.innerWidth < 1024) return 24;
+ return 32;
+ };
return (
-
+ 
+
+
+
+ {name}
+Experiência: {experience}
+
+ {specialties.map((specialty, index) => (
+
+ {specialty}
+
+ ))}
+
+ {bio}
+ +
-
+
{/* Navigation buttons */}
-
+
-
+
- {/* Artists cards */}
+ {/* Artists cards - adaptado para dispositivos móveis */}
- {/* Mobile view indicator dots */}
-
-
- {artists.map((artist) => (
-
-
- ))}
-
+ {isMobile ? (
+ // Layout para dispositivos móveis (1 cartão por vez, centralizado)
+
+ {artists.map((artist) => (
+
+
+ ))}
+
+ )}
+ {artists.map((artist, index) => (
+
+ ) : (
+
+
+ ))}
+
- {Array.from({ length: maxIndex + 1 }).map((_, index) => (
+ {/* Indicadores de página (dots) */}
+
+ {Array.from({ length: artists.length - (isMobile ? 0 : cardsToShow - 1) }).map((_, index) => (