%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/vacivi36/.trash/vacivitta/src/pages/
Upload File :
Create Path :
Current File : /home/vacivi36/.trash/vacivitta/src/pages/Produtos.jsx

import React, { useState } from 'react';
import styled, { keyframes } from 'styled-components';
import { motion, AnimatePresence } from 'framer-motion';
import { FaInfoCircle, FaCheckCircle, FaWhatsapp, FaTimes, FaChevronDown, FaChevronUp } from 'react-icons/fa';

// Animations
const floatAnimation = keyframes`
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
`;

const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const PageContainer = styled.div`
  margin-top: 100px;
  padding-bottom: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
`;

// Hero Section
const HeroSection = styled.section`
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url('/homePage.png');
  background-size: cover;
  background-position: center;
  padding: 80px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  margin: 0 20px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
  
  @media (max-width: 768px) {
    flex-direction: column;
    padding: 60px 20px;
    text-align: center;
    margin: 0 10px 30px;
  }
`;

const HeroContent = styled.div`
  width: 55%;
  
  @media (max-width: 768px) {
    width: 100%;
    margin-bottom: 40px;
  }
`;

const HeroTitle = styled(motion.h1)`
  color: #0094d9;
  font-size: 2.5rem;
  margin-bottom: 20px;
  line-height: 1.2;
  
  @media (max-width: 768px) {
    font-size: 2rem;
  }
`;

const HeroSubtitle = styled(motion.p)`
  color: #333;
  font-size: 1.2rem;
  margin-bottom: 30px;
  line-height: 1.6;
  
  @media (max-width: 768px) {
    font-size: 1rem;
  }
`;

const HeroImage = styled(motion.img)`
  width: 40%;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: ${floatAnimation} 6s ease-in-out infinite;
  
  @media (max-width: 768px) {
    width: 90%;
  }
`;

const ButtonsContainer = styled.div`
  display: flex;
  gap: 20px;
  margin-top: 30px;
  
  @media (max-width: 768px) {
    justify-content: center;
    flex-wrap: wrap;
  }
`;

const PrimaryButton = styled.button`
  background-color: #0094d9;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  
  &:hover {
    background-color: #0077b3;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 148, 217, 0.3);
  }
`;

const SecondaryButton = styled.button`
  background-color: transparent;
  color: #0094d9;
  border: 2px solid #0094d9;
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  
  &:hover {
    background-color: rgba(0, 148, 217, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 148, 217, 0.1);
  }
`;

// Products Section
const SectionTitle = styled.h2`
  color: #0094d9;
  font-size: 2rem;
  text-align: center;
  margin: 60px 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  
  @media (max-width: 768px) {
    font-size: 1.7rem;
    margin: 40px 0 30px;
  }
`;

const ProductsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  padding: 0 20px;
  position: relative;
  z-index: 3;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
  }
`;

const ProductCard = styled(motion.div)`
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: ${props => props.isExpanded ? 'auto' : '450px'};
  display: flex;
  flex-direction: column;
  position: relative;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  }
  
  @media (max-width: 768px) {
    width: 100%;
    margin: 0 auto;
    height: ${props => props.isExpanded ? 'auto' : '400px'};
  }
`;

const ProductImage = styled.img`
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  
  @media (max-width: 768px) {
    height: 180px;
  }
`;

const ProductContent = styled.div`
  padding: 25px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 200px);
  
  @media (max-width: 768px) {
    padding: 20px;
    height: calc(100% - 180px);
  }
`;

const ProductTitle = styled.h3`
  color: #333;
  font-size: 1.3rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
`;

const ProductDescription = styled.p`
  color: #666;
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1;
`;

const NutritionButton = styled.button`
  background: none;
  border: none;
  color: #0094d9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 0;
  margin-top: 15px;
  width: 100%;
  transition: all 0.2s ease;
  border-top: 1px solid #f0f0f0;
  
  &:hover {
    background-color: rgba(0, 148, 217, 0.05);
  }
`;

// Nutrition Table
const NutritionTable = styled(motion.div)`
  background: #f9f9f9;
  border-radius: 8px;
  margin-top: 15px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
`;

const NutritionTableHeader = styled.div`
  background: #0094d9;
  color: white;
  padding: 12px 15px;
  font-weight: bold;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const CloseButton = styled.button`
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 50%;
  transition: background 0.2s ease;
  
  &:hover {
    background: rgba(255, 255, 255, 0.2);
  }
`;

const NutritionRow = styled.div`
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:nth-child(odd) {
    background: rgba(0, 148, 217, 0.05);
  }
`;

const NutritionLabel = styled.span`
  color: #333;
`;

const NutritionValue = styled.span`
  color: #0094d9;
  font-weight: 500;
`;

// Benefits Section
const BenefitsSection = styled.section`
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url('/homePage2.png');
  background-size: cover;
  background-position: center;
  padding: 80px 40px;
  margin: 80px 20px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  
  @media (max-width: 768px) {
    padding: 60px 20px;
    margin: 60px 10px;
  }
`;

const BenefitsGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    gap: 20px;
  }
`;

const BenefitCard = styled(motion.div)`
  background: white;
  border-radius: 16px;
  padding: 30px 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
  }
`;

const BenefitIcon = styled.div`
  color: #3d9948;
  font-size: 2rem;
  margin-bottom: 20px;
`;

const BenefitTitle = styled.h4`
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 10px;
`;

const BenefitDescription = styled.p`
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
`;

// Final CTA
const CTASection = styled.section`
  background: #f5f5f5;
  padding: 60px;
  text-align: center;
  border-radius: 16px;
  margin: 0 20px 60px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  
  @media (max-width: 768px) {
    padding: 40px 20px;
    margin: 0 10px 40px;
  }
`;

const CTATitle = styled(motion.h2)`
  color: #0094d9;
  font-size: 2rem;
  margin-bottom: 20px;
  
  @media (max-width: 768px) {
    font-size: 1.7rem;
  }
`;

const ProductCategory = styled.div`
  display: inline-block;
  background-color: rgba(0, 148, 217, 0.1);
  color: #0094d9;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 20px;
  margin-top: 12px;
`;

// Main Component
function Produtos() {
  // State for nutrition tables visibility
  const [expandedTable, setExpandedTable] = useState(null);

  // Toggle function for nutrition tables
  const toggleTable = (id) => {
    setExpandedTable(prev => prev === id ? null : id);
  };

  // Animation variants
  const cardVariants = {
    hidden: { opacity: 0, y: 30 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: { duration: 0.5 }
    }
  };

  const tableVariants = {
    hidden: { opacity: 0, height: 0 },
    visible: { 
      opacity: 1, 
      height: 'auto',
      transition: { duration: 0.3 }
    },
    exit: {
      opacity: 0,
      height: 0,
      transition: { duration: 0.2 }
    }
  };

  const staggerContainer = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };
  
  // Products data
  const foodProducts = [
    {
      id: 'papinha-manga',
      title: '🥭 Papinha de manga',
      image: '/papinhamanga.jpg',
      description: 'Papinha 100% natural, sem conservantes e açúcares adicionados. Ideal para bebês a partir de 6 meses.',
      nutrition: [
        { label: 'Valor energético', value: '50 kcal (7% VD)' },
        { label: 'Carboidratos', value: '12g (13% VD)' },
        { label: 'Açúcares totais', value: '12g' },
        { label: 'Açúcares adicionados', value: '0g' },
        { label: 'Proteínas', value: '0,5g' },
        { label: 'Gorduras totais', value: '0g' },
        { label: 'Fibras alimentares', value: '1,3g' },
        { label: 'Sódio', value: '6mg (2% VD)' },
      ]
    },
    {
      id: 'papinha-pera-espinafre',
      title: '🍐🥦 Papinha pera, espinafre e abobrinha',
      image: '/papinhapera.jpg',
      description: 'Mistura nutritiva de vegetais e frutas, proporcionando vitaminas essenciais. Ideal para bebês a partir de 6 meses.',
      nutrition: [
        { label: 'Valor energético', value: '48 kcal (7% VD)' },
        { label: 'Carboidratos', value: '12g (13% VD)' },
        { label: 'Açúcares totais', value: '8,1g' },
        { label: 'Proteínas', value: '0,9g' },
        { label: 'Gorduras totais', value: '0,2g' },
        { label: 'Fibras alimentares', value: '0,9g (2% VD)' },
        { label: 'Sódio', value: '8,1mg (2% VD)' },
      ]
    },
    {
      id: 'papinha-maca-ameixa',
      title: '🍎🍑 Papinha maçã e ameixa',
      image: '/papinhamaca.jpg',
      description: 'Combinação frutada que auxilia no bom funcionamento intestinal. Ideal para bebês a partir de 6 meses.',
      nutrition: [
        { label: 'Valor energético', value: '66 kcal (9% VD)' },
        { label: 'Carboidratos', value: '16g (17% VD)' },
        { label: 'Açúcares totais', value: '13g' },
        { label: 'Proteínas', value: '0,5g' },
        { label: 'Gorduras totais', value: '0,3g' },
        { label: 'Fibras alimentares', value: '1,5g (5% VD)' },
        { label: 'Sódio', value: '9,7mg (3% VD)' },
      ]
    },
    {
      id: 'papinha-maca-cenoura',
      title: '🍎🥕🍠 Papinha maçã, cenoura e batata-doce',
      image: '/papinhabatata.jpg',
      description: 'Rica em vitamina A e fibras, promove uma alimentação balanceada. Ideal para bebês a partir de 6 meses.',
      nutrition: [
        { label: 'Valor energético', value: '51 kcal (7% VD)' },
        { label: 'Carboidratos', value: '12g (13% VD)' },
        { label: 'Açúcares totais', value: '8,1g' },
        { label: 'Proteínas', value: '0,7g (6% VD)' },
        { label: 'Gorduras totais', value: '0,3g' },
        { label: 'Fibras alimentares', value: '1,3g (3% VD)' },
        { label: 'Sódio', value: '13,4mg (4% VD)' },
      ]
    },
    {
      id: 'papinha-banana-mirtilo',
      title: '🍌🫐🌾 Papinha banana, mirtilo e quinoa',
      image: '/papinhabanana.jpg',
      description: 'Fonte de energia com antioxidantes e proteínas da quinoa. Ideal para bebês a partir de 6 meses.',
      nutrition: [
        { label: 'Valor energético', value: '81 kcal (12% VD)' },
        { label: 'Carboidratos', value: '19g (20% VD)' },
        { label: 'Açúcares totais', value: '13g' },
        { label: 'Proteínas', value: '1,2g (11% VD)' },
        { label: 'Gorduras totais', value: '0,4g' },
        { label: 'Fibras alimentares', value: '0,9g (1% VD)' },
        { label: 'Sódio', value: '5,3mg (1% VD)' },
      ]
    },
    {
      id: 'biscoitinho-denticao',
      title: '🎃🍎 Biscoitinho de dentição',
      image: '/biscoitinho.jpg',
      description: 'Auxilia no alívio do desconforto durante a dentição. Dissolve-se facilmente na boca. Para bebês a partir de 7 meses.',
      nutrition: [
        { label: 'Valor energético', value: '16 kcal (2% VD)' },
        { label: 'Carboidratos', value: '3,7g (4% VD)' },
        { label: 'Açúcares totais', value: '0,4g' },
        { label: 'Proteínas', value: '0g' },
        { label: 'Gorduras totais', value: '0g' },
        { label: 'Fibras alimentares', value: '0g' },
        { label: 'Sódio', value: '1,2mg (0% VD)' },
      ]
    },
    {
      id: 'palitinhos-vegetais',
      title: '🥕🌱 Palitinhos vegetais',
      image: '/palitinhos.jpg',
      description: 'Snack crocante e nutritivo, perfeito para o desenvolvimento da coordenação motora. Para crianças a partir de 8 meses.',
      nutrition: [
        { label: 'Valor energético', value: '79 kcal (11% VD)' },
        { label: 'Carboidratos', value: '13g (14% VD)' },
        { label: 'Açúcares totais', value: '1,5g' },
        { label: 'Proteínas', value: '2g (18% VD)' },
        { label: 'Gorduras totais', value: '1,9g (10% VD)' },
        { label: 'Fibras alimentares', value: '0,6g (2% VD)' },
        { label: 'Sódio', value: '3,5mg (1% VD)' },
      ]
    },
  ];

  const nonFoodProducts = [
    {
      id: 'higiene-1',
      title: 'Kit Conveniência',
      image: '/kit.jpg',
      description: 'Kit com 6 unidades de ponteiras descártaveis.',
      category: 'Higiene'
    },
    {
      id: 'higiene-2',
      title: 'Lenços Limpa Chupeta',
      image: '/lencin.jpg',
      description: 'Lenços umedecidos de limpeza rápida e segura para chupetas.',
      category: 'Higiene'
    },
    {
      id: 'alivio-1',
      title: 'Desentupidor de nariz',
      image: '/assoar.jpg',
      description: 'Desentupidor de nariz de alívio imediato e eficaz macio.',
      category: 'Alívio respiratório'
    },
    {
      id: 'monitor-1',
      title: 'Xô Febre',
      image: '/febre.jpg',
      description: 'Compressa refrescante para álivio imediato da febre.',
      category: 'Monitoramento'
    },
    {
      id: 'monitor-2',
      title: 'Adesivo termômetro digital infantil',
      image: '/adesivo.jpg',
      description: 'Termômetro digital de alta precisão com ponta flexível e leitura rápida em 10 segundos.',
      category: 'Monitoramento'
    },
    {
      id: 'brincos-1',
      title: 'Brinco infantil hipoalergênico',
      image: '/brincos.jpg',
      description: 'Brincos de ouro 18k com base hipoalergênica, ideais para primeiros furos.',
      category: 'Brincos'
    },
  ];

  // Benefits data
  const benefits = [
    {
      icon: '✅',
      title: '100% seguros e testados',
      description: 'Todos os produtos passam por rigorosos testes de segurança e qualidade antes de chegarem às suas mãos.'
    },
    {
      icon: '✅',
      title: 'Sem conservantes artificiais',
      description: 'Fórmulas naturais livres de conservantes químicos, corantes e ingredientes artificiais.'
    },
    {
      icon: '✅',
      title: 'Ingredientes naturais',
      description: 'Utilizamos apenas ingredientes naturais, orgânicos e sustentáveis em nossos produtos.'
    },
    {
      icon: '✅',
      title: 'Desenvolvidos por especialistas',
      description: 'Produtos criados por equipe de nutricionistas, pediatras e especialistas em desenvolvimento infantil.'
    },
  ];

  return (
    <PageContainer>
      {/* Hero Section */}
      <HeroSection>
        <HeroContent>
          <HeroTitle
            initial={{ opacity: 0, y: -30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            🌱 Nutrição e cuidado: essenciais para o bem-estar do seu bebê
          </HeroTitle>
          <HeroSubtitle
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.3 }}
          >
            🍼 Conheça nossa seleção de produtos naturais, seguros e nutritivos — desenvolvidos especialmente para os pequenos.
          </HeroSubtitle>
          <ButtonsContainer>
            <SecondaryButton onClick={() => window.open('https://wa.me/551108001233333', '_blank')}>
              <FaWhatsapp /> Fale com uma especialista
            </SecondaryButton>
          </ButtonsContainer>
        </HeroContent>
        <HeroImage 
          src="" 
          alt=""
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.8 }}
        />
      </HeroSection>

      {/* Products Section - Food */}
      <SectionTitle style={{ textTransform: 'none' }}>🍽️ Nutrição saudável para os pequenos</SectionTitle>
      <ProductsGrid
        as={motion.div}
        variants={staggerContainer}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.1, margin: "-100px" }}
      >
        {foodProducts.map(product => (
          <ProductCard 
            key={product.id} 
            variants={cardVariants}
            isExpanded={expandedTable === product.id}
            initial={{ opacity: 1, y: 0 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.1 }}
          >
            <ProductImage src={product.image || '/default-food.jpg'} alt={product.title} />
            <ProductContent>
              <ProductTitle>{product.title}</ProductTitle>
              <ProductDescription>{product.description}</ProductDescription>
              <NutritionButton onClick={() => toggleTable(product.id)}>
                <FaInfoCircle /> 
                {expandedTable === product.id ? 'Fechar tabela nutricional' : 'Ver tabela nutricional'}
                {expandedTable === product.id ? <FaChevronUp style={{marginLeft: '5px'}} /> : <FaChevronDown style={{marginLeft: '5px'}} />}
              </NutritionButton>
              
              <AnimatePresence>
                {expandedTable === product.id && (
                  <NutritionTable
                    variants={tableVariants}
                    initial="hidden"
                    animate="visible"
                    exit="exit"
                  >
                    <NutritionTableHeader>
                      Informação Nutricional (por 100g)
                      <CloseButton onClick={() => toggleTable(product.id)}>
                        <FaTimes />
                      </CloseButton>
                    </NutritionTableHeader>
                    {product.nutrition.map((item, index) => (
                      <NutritionRow key={index}>
                        <NutritionLabel>{item.label}</NutritionLabel>
                        <NutritionValue>{item.value}</NutritionValue>
                      </NutritionRow>
                    ))}
                  </NutritionTable>
                )}
              </AnimatePresence>
            </ProductContent>
          </ProductCard>
        ))}
      </ProductsGrid>

      {/* Products Section - Non-Food */}
      <SectionTitle style={{ textTransform: 'none' }}>👶 Produtos para cuidado e bem-estar</SectionTitle>
      <ProductsGrid
        as={motion.div}
        variants={staggerContainer}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.1, margin: "-100px" }}
      >
        {nonFoodProducts.map(product => (
          <ProductCard 
            key={product.id} 
            variants={cardVariants}
            initial={{ opacity: 1, y: 0 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.1 }}
          >
            <ProductImage src={product.image || '/default-product.jpg'} alt={product.title} />
            <ProductContent>
              <ProductTitle>
                {product.title}
              </ProductTitle>
              <ProductDescription>{product.description}</ProductDescription>
              <ProductDescription style={{ color: '#0094d9', marginTop: '10px', fontWeight: '500' }}>
                Categoria: {product.category}
              </ProductDescription>
            </ProductContent>
          </ProductCard>
        ))}
      </ProductsGrid>

      {/* Benefits Section */}
      <BenefitsSection>
        <SectionTitle style={{ textTransform: 'none' }}>✨ Benefícios e diferenciais</SectionTitle>
        <BenefitsGrid
          as={motion.div}
          variants={staggerContainer}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
        >
          {benefits.map((benefit, index) => (
            <BenefitCard key={index} variants={cardVariants}>
              <BenefitIcon>{benefit.icon}</BenefitIcon>
              <BenefitTitle>{benefit.title}</BenefitTitle>
              <BenefitDescription>{benefit.description}</BenefitDescription>
            </BenefitCard>
          ))}
        </BenefitsGrid>
      </BenefitsSection>

      {/* Final CTA */}
    
    </PageContainer>
  );
}

export default Produtos;

Zerion Mini Shell 1.0