Merge version_4_1781572488927 into main

Update theme fonts
2026-06-16 01:14:55 +00:00 · 2026-06-16 01:14:49 +00:00 · 2026-06-16 01:14:09 +00:00 · 2026-06-16 01:14:06 +00:00 · 2026-06-16 01:07:28 +00:00 · 2026-06-16 01:07:25 +00:00
8 changed files with 342 additions and 191 deletions
--- a/src/index.css
+++ b/src/index.css
@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
@import "tailwindcss";
@import "./styles/masks.css";
@import "./styles/animations.css";

 :root {
  /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #050012;
-  --card: #0f0b21;
-  --foreground: #f0e6ff;
-  --primary-cta: #c89bff;
-  --primary-cta-text: #050012;
-  --secondary-cta: #1d123b;
-  --secondary-cta-text: #f0e6ff;
-  --accent: #684f7b;
-  --background-accent: #65417c;
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1c1c1c;
+  --primary-cta-text: #f5f5f5;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #1c1c1c;
+  --accent: #15479c;
+  --background-accent: #a8cce8;

  /* @layout/border-radius/rounded */
  --radius: 1rem;
@@ -88,7 +88,7 @@
  --color-background-accent: var(--background-accent);

  /* Fonts */
-  --font-sans: 'Inter Tight', sans-serif;
+  --font-sans: 'DM Sans', sans-serif;
  --font-tight: "Inter Tight", sans-serif;
  --font-mono: monospace;

@@ -137,7 +137,7 @@ body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
-  font-family: 'Inter Tight', sans-serif;
+  font-family: 'DM Sans', sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -150,7 +150,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Inter Tight', sans-serif;
+  font-family: 'Manrope', sans-serif;
 }

 /* Default card/button styles. Template theme.css imports come after this file
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,187 +1,32 @@
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
-import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
-import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
-import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.

-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import PricingSection from './HomePage/sections/Pricing';
+import MetricsSection from './HomePage/sections/Metrics';
+import FaqSection from './HomePage/sections/Faq';
+import ContactSection from './HomePage/sections/Contact';
+
+
+
+{/* webild-stub @2026-06-16T01:07:23.104Z: add a customer testimonial section to build social proof and reinforce the trust established by your 'Nuestros Números' metrics. */}
+
+import TestimonialsSection from './HomePage/sections/Testimonials';export default function HomePage(): React.JSX.Element {
  return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroSplitVerticalMarquee
-      tag="Servicio Oficial"
-      title="Bienvenidos a la página oficial de recarga de diamantes al mejor precio"
-      description="Disponible en Paraguay, Brasil y Argentina. Recargas rápidas, seguras y profesionales."
-      primaryButton={{
-        text: "Ver Paquetes",
-        href: "#pricing",
-      }}
-      secondaryButton={{
-        text: "Más Juegos",
-        href: "#contact",
-      }}
-      leftItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/hex-textured-background-networking_23-2150080759.jpg",
-        },
-      ]}
-      rightItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/party-composition-with-colorful-confetti_23-2147852252.jpg",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />

-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingSimpleCards
-      tag="Seleccioná tu paquete"
-      title="Seleccioná cuántos diamantes necesitás y el monto a pagar"
-      description="Elige tu opción ideal y completa el formulario debajo."
-      plans={[
-        {
-          tag: "Popular",
-          price: "Gs. 10.000",
-          description: "100 + 10 💎",
-          features: [
-            "Recarga Instantánea",
-            "Soporte 24/7",
-          ],
-        },
-        {
-          tag: "Oferta",
-          price: "Gs. 19.000",
-          description: "200 + 20 💎",
-          features: [
-            "Recarga Instantánea",
-            "Soporte 24/7",
-          ],
-        },
-        {
-          tag: "Destacado",
-          price: "Gs. 24.000",
-          description: "310 + 31 💎",
-          features: [
-            "Recarga Instantánea",
-            "Soporte 24/7",
-          ],
-        },
-        {
-          tag: "Pro",
-          price: "Gs. 40.000",
-          description: "520 + 52 💎",
-          features: [
-            "Recarga Instantánea",
-            "Soporte 24/7",
-          ],
-        },
-        {
-          tag: "Elite",
-          price: "Gs. 52.000",
-          description: "682 💎",
-          features: [
-            "Recarga Instantánea",
-            "Soporte 24/7",
-          ],
-        },
-        {
-          tag: "Pro",
-          price: "Gs. 74.000",
-          description: "900 💎",
-          features: [
-            "Recarga Instantánea",
-            "Soporte 24/7",
-          ],
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />

-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsSimpleCards
-      tag="Nuestros Números"
-      title="Confianza comprobada por miles de jugadores"
-      description="Trabajamos con transparencia y rapidez todos los días."
-      metrics={[
-        {
-          value: "5000+",
-          description: "Recargas completadas",
-        },
-        {
-          value: "100%",
-          description: "Clientes satisfechos",
-        },
-        {
-          value: "24/7",
-          description: "Soporte activo",
-        },
-        {
-          value: "15 min",
-          description: "Tiempo promedio de entrega",
-        },
-        {
-          value: "3",
-          description: "Países operando",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
+      <TestimonialsSection />

-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqTwoColumn
-      tag="Dudas frecuentes"
-      title="Preguntas habituales sobre el servicio"
-      description="Resolvemos tus inquietudes para que tu compra sea segura."
-      items={[
-        {
-          question: "¿Es seguro recargar?",
-          answer: "Totalmente. Trabajamos bajo los términos de servicio oficiales.",
-        },
-        {
-          question: "¿Cuánto tarda?",
-          answer: "Generalmente menos de 15 minutos tras verificar el pago.",
-        },
-        {
-          question: "¿Qué métodos aceptan?",
-          answer: "Transferencias bancarias, billeteras electrónicas y cripto.",
-        },
-        {
-          question: "¿Hacen reembolsos?",
-          answer: "Si el pedido no puede ser entregado, realizamos la devolución.",
-        },
-        {
-          question: "¿Necesitan mi contraseña?",
-          answer: "Nunca pedimos contraseñas, solo tu ID de jugador.",
-        },
-      ]}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />

-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Otras consultas"
-      text="¿Quieres recargar otro juego en específico? (Roblox, FC Mobile, etc.). ¡Comunícate ahora!"
-      primaryButton={{
-        text: "Contactar por WhatsApp",
-        href: "https://wa.me/595983309979?text=Hola.!%20Quiero%20recargar.%20Juego:%20",
-      }}
-      secondaryButton={{
-        text: "Sitios W'ed oficial",
-        href: "https://atom.bio/carlosbenitez0983",
-      }}
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
    </>
  );
 }
--- a/src/pages/HomePage/sections/Contact.tsx
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,27 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Otras consultas"
+          text="¿Quieres recargar otro juego en específico? (Roblox, FC Mobile, etc.). ¡Comunícate ahora!"
+          primaryButton={{
+            text: "Contactar por WhatsApp",
+            href: "https://wa.me/595983309979?text=Hola.!%20Quiero%20recargar.%20Juego:%20",
+          }}
+          secondaryButton={{
+            text: "Sitios W'ed oficial",
+            href: "https://atom.bio/carlosbenitez0983",
+          }}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Faq.tsx
+++ b/src/pages/HomePage/sections/Faq.tsx
@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "faq" section.
+
+import React from 'react';
+import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqTwoColumn
+          tag="Dudas frecuentes"
+          title="Preguntas habituales sobre el servicio"
+          description="Resolvemos tus inquietudes para que tu compra sea segura."
+          items={[
+            {
+              question: "¿Es seguro recargar?",
+              answer: "Totalmente. Trabajamos bajo los términos de servicio oficiales.",
+            },
+            {
+              question: "¿Cuánto tarda?",
+              answer: "Generalmente menos de 15 minutos tras verificar el pago.",
+            },
+            {
+              question: "¿Qué métodos aceptan?",
+              answer: "Transferencias bancarias, billeteras electrónicas y cripto.",
+            },
+            {
+              question: "¿Hacen reembolsos?",
+              answer: "Si el pedido no puede ser entregado, realizamos la devolución.",
+            },
+            {
+              question: "¿Necesitan mi contraseña?",
+              answer: "Nunca pedimos contraseñas, solo tu ID de jugador.",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,38 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroSplitVerticalMarquee
+          tag="Servicio Oficial"
+          title="Bienvenidos a la página oficial de recarga de diamantes al mejor precio"
+          description="Disponible en Paraguay, Brasil y Argentina. Recargas rápidas, seguras y profesionales."
+          primaryButton={{
+            text: "Ver Paquetes",
+            href: "#pricing",
+          }}
+          secondaryButton={{
+            text: "Más Juegos",
+            href: "#contact",
+          }}
+          leftItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/hex-textured-background-networking_23-2150080759.jpg",
+            },
+          ]}
+          rightItems={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/party-composition-with-colorful-confetti_23-2147852252.jpg",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Metrics.tsx
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,42 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsSimpleCards
+          tag="Nuestros Números"
+          title="Confianza comprobada por miles de jugadores"
+          description="Trabajamos con transparencia y rapidez todos los días."
+          metrics={[
+            {
+              value: "5000+",
+              description: "Recargas completadas",
+            },
+            {
+              value: "100%",
+              description: "Clientes satisfechos",
+            },
+            {
+              value: "24/7",
+              description: "Soporte activo",
+            },
+            {
+              value: "15 min",
+              description: "Tiempo promedio de entrega",
+            },
+            {
+              value: "3",
+              description: "Países operando",
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Pricing.tsx
+++ b/src/pages/HomePage/sections/Pricing.tsx
@@ -0,0 +1,76 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingSimpleCards from '@/components/sections/pricing/PricingSimpleCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingSimpleCards
+          tag="Seleccioná tu paquete"
+          title="Seleccioná cuántos diamantes necesitás y el monto a pagar"
+          description="Elige tu opción ideal y completa el formulario debajo."
+          plans={[
+            {
+              tag: "Popular",
+              price: "Gs. 10.000",
+              description: "100 + 10 💎",
+              features: [
+                "Recarga Instantánea",
+                "Soporte 24/7",
+              ],
+            },
+            {
+              tag: "Oferta",
+              price: "Gs. 19.000",
+              description: "200 + 20 💎",
+              features: [
+                "Recarga Instantánea",
+                "Soporte 24/7",
+              ],
+            },
+            {
+              tag: "Destacado",
+              price: "Gs. 24.000",
+              description: "310 + 31 💎",
+              features: [
+                "Recarga Instantánea",
+                "Soporte 24/7",
+              ],
+            },
+            {
+              tag: "Pro",
+              price: "Gs. 40.000",
+              description: "520 + 52 💎",
+              features: [
+                "Recarga Instantánea",
+                "Soporte 24/7",
+              ],
+            },
+            {
+              tag: "Elite",
+              price: "Gs. 52.000",
+              description: "682 💎",
+              features: [
+                "Recarga Instantánea",
+                "Soporte 24/7",
+              ],
+            },
+            {
+              tag: "Pro",
+              price: "Gs. 74.000",
+              description: "900 💎",
+              features: [
+                "Recarga Instantánea",
+                "Soporte 24/7",
+              ],
+            },
+          ]}
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
--- a/src/pages/HomePage/sections/Testimonials.tsx
+++ b/src/pages/HomePage/sections/Testimonials.tsx
@@ -0,0 +1,81 @@
+import { motion } from "motion/react"
+import ScrollReveal from "@/components/ui/ScrollReveal"
+import TextAnimation from "@/components/ui/TextAnimation"
+import RatingStars from "@/components/ui/RatingStars"
+import Tag from "@/components/ui/Tag"
+import ImageOrVideo from "@/components/ui/ImageOrVideo"
+
+export default function TestimonialsSection() {
+  const testimonials = [
+    {
+      name: "Carlos M.",
+      role: "Jugador de Free Fire",
+      quote: "¡Excelente servicio! Los diamantes llegaron en menos de 5 minutos. Totalmente recomendado.",
+      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1566492031523-87d281758a56?auto=format&fit=crop&w=150&h=150"
+    },
+    {
+      name: "Lucía G.",
+      role: "Jugadora de Clash Royale",
+      quote: "Siempre recargo aquí. Los precios son los mejores y la atención por WhatsApp es súper rápida.",
+      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&h=150"
+    },
+    {
+      name: "Marcos T.",
+      role: "Jugador de Roblox",
+      quote: "Muy confiable. Al principio tenía dudas pero todo salió perfecto. Ya soy cliente fijo.",
+      rating: 5,
+      imageSrc: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=150&h=150"
+    }
+  ]
+
+  return (
+    <section className="relative w-full py-24 bg-background overflow-hidden" data-webild-section="testimonials">
+      <div className="w-content-width mx-auto px-6">
+        <div className="flex flex-col items-center text-center mb-16">
+          <ScrollReveal variant="fade">
+            <Tag text="Testimonios" className="mb-4" />
+          </ScrollReveal>
+          <TextAnimation 
+            text="Lo que dicen nuestros jugadores" 
+            variant="fade-blur" 
+            tag="h2" 
+            className="text-4xl md:text-5xl font-bold text-foreground mb-6"
+            gradientText={false}
+          />
+          <ScrollReveal variant="fade" delay={0.2}>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              Miles de jugadores ya confían en nosotros para recargar sus diamantes de forma rápida y segura.
+            </p>
+          </ScrollReveal>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {testimonials.map((testimonial, index) => (
+            <ScrollReveal variant="fade" key={index} delay={0.1 * (index + 1)} className="h-full">
+              <div className="card h-full p-8 flex flex-col rounded-theme border border-border/50 bg-card hover:border-primary-cta/30 transition-colors duration-300">
+                <RatingStars rating={testimonial.rating} className="mb-6 text-primary-cta" />
+                <p className="text-foreground text-lg mb-8 flex-grow italic">
+                  "{testimonial.quote}"
+                </p>
+                <div className="flex items-center gap-4 mt-auto">
+                  <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-primary-cta/20">
+                    <ImageOrVideo 
+                      imageSrc={testimonial.imageSrc} 
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                  <div>
+                    <h4 className="text-foreground font-semibold">{testimonial.name}</h4>
+                    <p className="text-sm text-muted-foreground">{testimonial.role}</p>
+                  </div>
+                </div>
+              </div>
+            </ScrollReveal>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
Author	SHA1	Message	Date
bender	fb953ebae6	Merge version_4_1781572488927 into main Merge version_4_1781572488927 into main	2026-06-16 01:14:55 +00:00
bender	f75d8a06fc	Update theme fonts	2026-06-16 01:14:49 +00:00
bender	3184d6afc5	Merge version_3_1781572445559 into main Merge version_3_1781572445559 into main	2026-06-16 01:14:09 +00:00
bender	670ccb0a93	Update theme colors	2026-06-16 01:14:06 +00:00
bender	f6f108305d	Merge version_2_1781571993734 into main Merge version_2_1781571993734 into main	2026-06-16 01:07:28 +00:00
kudinDmitriyUp	1afe59b4b2	Bob AI (stub): add a customer testimonial section to build social proof and	2026-06-16 01:07:25 +00:00
bender	b168379a00	Merge version_1_1781571491947 into main Merge version_1_1781571491947 into main	2026-06-16 01:03:01 +00:00