Merge version_2_1783199463852 into main #1
@@ -38,7 +38,7 @@ export default function Layout() {
|
||||
];
|
||||
|
||||
return (
|
||||
<StyleProvider buttonVariant="bubble" siteBackground="noise" heroBackground="lightRaysCenter">
|
||||
<StyleProvider buttonVariant="magnetic" siteBackground="noise" heroBackground="none">
|
||||
<SiteBackgroundSlot />
|
||||
<SectionErrorBoundary name="navbar">
|
||||
<NavbarDropdown
|
||||
|
||||
@@ -5,15 +5,15 @@
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||
--background: #050012;
|
||||
--card: #040121;
|
||||
--foreground: #f0e6ff;
|
||||
--primary-cta: #c89bff;
|
||||
--primary-cta-text: #050012;
|
||||
--secondary-cta: #1d123b;
|
||||
--secondary-cta-text: #f0e6ff;
|
||||
--accent: #684f7b;
|
||||
--background-accent: #65417c;
|
||||
--background: #ffffff;
|
||||
--card: #f8f9fa;
|
||||
--foreground: #111827;
|
||||
--primary-cta: #6366f1;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #e0e7ff;
|
||||
--secondary-cta-text: #4f46e5;
|
||||
--accent: #6b7280;
|
||||
--background-accent: #f3f4f6;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 1.5rem;
|
||||
|
||||
@@ -1,262 +1,37 @@
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import TeamProfileCards from '@/components/sections/team/TeamProfileCards';
|
||||
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
|
||||
import { TrendingUp, Users, Zap } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in the sibling sections/ folder (one file per section).
|
||||
// Edit those section files directly. Non-block content (wrappers,
|
||||
// non-inlinable sections) is preserved inline; extracted section blocks
|
||||
// become component refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import TeamSection from './HomePage/sections/Team';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
|
||||
import MetricsSection from './HomePage/sections/Metrics';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroCenteredLogos
|
||||
avatarsSrc={[
|
||||
"http://img.b2bpic.net/free-photo/smiling-man-wearing-white-shirt_23-2152009541.jpg",
|
||||
"http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
"http://img.b2bpic.net/free-photo/emotional-young-bearded-man-asking-something-isolated-dark-wall_140725-97014.jpg",
|
||||
"http://img.b2bpic.net/free-photo/crazy-hero-happy-expression_1194-4140.jpg",
|
||||
]}
|
||||
avatarText="Spolupracujeme s lídrami"
|
||||
title="UvaWeb: Budúcnosť vášho marketingu začína dnes"
|
||||
description="Vytvárame pohlcujúce digitálne zážitky, ktoré definujú značky. Špičková kreativita spojená s dátami a špičkovou technológiou."
|
||||
primaryButton={{
|
||||
text: "Zistiť viac",
|
||||
href: "#services",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Kontaktovať nás",
|
||||
href: "#contact",
|
||||
}}
|
||||
names={[
|
||||
"Google",
|
||||
"Microsoft",
|
||||
"Amazon",
|
||||
"Apple",
|
||||
"Tesla",
|
||||
"Adobe",
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/color-year-purple-tones-abstract-landscape-with-fantasy-aesthetic_23-2151394052.jpg"
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutMediaOverlay
|
||||
tag="O nás"
|
||||
title="Marketing, ktorý mení pravidlá hry"
|
||||
description="UvaWeb je agentúra, ktorá sa zameriava na inováciu. Veríme, že každá značka si zaslúži vizuálnu identitu, ktorá nielen vyzerá skvele, ale aj funguje na úrovni konverzií."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2402.jpg"
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesImageBento
|
||||
tag="Naše služby"
|
||||
title="Digitálne riešenia na mieru"
|
||||
description="Kompletný servis pre vašu digitálnu transformáciu."
|
||||
items={[
|
||||
{
|
||||
title: "Stratégia",
|
||||
description: "Dátami riadená stratégia.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-dressed-white-t-shirt-using-virtual-reality-glasses-with-graph-charts-numbers-lines-technology-concept_613910-5163.jpg",
|
||||
},
|
||||
{
|
||||
title: "Produkcia",
|
||||
description: "Vizuálna tvorba obsahu.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-drinking-coffee_23-2148128284.jpg",
|
||||
},
|
||||
{
|
||||
title: "Analytika",
|
||||
description: "Výkonnostné dáta.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/future-visions-business-technology-concept_23-2151893423.jpg",
|
||||
},
|
||||
{
|
||||
title: "Branding",
|
||||
description: "Identita vašej firmy.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/comparison-different-types-brush-strokes_23-2150105302.jpg",
|
||||
},
|
||||
{
|
||||
title: "Networking",
|
||||
description: "Globálne prepojenia.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/workers-working-together-network-graphic_53876-123893.jpg",
|
||||
},
|
||||
{
|
||||
title: "SEO Optimalizácia",
|
||||
description: "Viditeľnosť online.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/search-searching-finding-looking-optimisation-concept_53876-16304.jpg",
|
||||
},
|
||||
{
|
||||
title: "AI Automatizácia",
|
||||
description: "Inteligentné systémy.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-low-poly-background-with-shallow-depth-field_1048-6794.jpg",
|
||||
},
|
||||
]}
|
||||
textAnimation="fade"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ServicesSection />
|
||||
<MetricsSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsIconCards
|
||||
tag="Výsledky"
|
||||
title="Čísla, ktoré hovoria za všetko"
|
||||
description="Naša efektivita je overená rokmi úspešných kampaní."
|
||||
metrics={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Rýchlosť rastu",
|
||||
value: "150%",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
title: "Konverzie",
|
||||
value: "2.4x",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Spokojní klienti",
|
||||
value: "500+",
|
||||
},
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeCards
|
||||
tag="Referencie"
|
||||
title="Čo o nás hovoria"
|
||||
description="Naši klienti sú naši partneri na ceste k úspechu."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Michal S.",
|
||||
role: "CEO",
|
||||
quote: "UvaWeb zmenili náš biznis k lepšiemu.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",
|
||||
},
|
||||
{
|
||||
name: "Anna K.",
|
||||
role: "Marketing Dir.",
|
||||
quote: "Skvelá kreativita a profesionálny prístup.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-businesswoman-smiling-camera_74855-3966.jpg",
|
||||
},
|
||||
{
|
||||
name: "Peter J.",
|
||||
role: "Founder",
|
||||
quote: "Výsledky prišli skôr, než sme čakali.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-smoking-pipe_1154-103.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena M.",
|
||||
role: "Manager",
|
||||
quote: "Najlepšia voľba pre modernú značku.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12867.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jakub L.",
|
||||
role: "CTO",
|
||||
quote: "Technicky špičková úroveň marketingu.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg",
|
||||
},
|
||||
]}
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamProfileCards
|
||||
tag="Náš tím"
|
||||
title="Expertíza v každom detaile"
|
||||
description="Spoznajte ľudí, ktorí za tým stoja."
|
||||
items={[
|
||||
{
|
||||
title: "Michal Uva",
|
||||
description: "Creative Director",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/african-man-guy-black-suit-students-with-laptop-girl-white-blouse_1157-41603.jpg",
|
||||
buttonText: "Kontaktovať",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-coworkers-looking-monitor_23-2149370564.jpg",
|
||||
},
|
||||
{
|
||||
title: "Lucia Webová",
|
||||
description: "Head of Strategy",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-making-quarter-review_23-2148411833.jpg",
|
||||
buttonText: "Kontaktovať",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-confident-man_1098-18449.jpg",
|
||||
},
|
||||
{
|
||||
title: "Patrik Inovátor",
|
||||
description: "Tech Lead",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-business-people-working-team_1098-21600.jpg",
|
||||
buttonText: "Kontaktovať",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-curly-haired-beautiful-woman-smiles-happily-wears-fashionable-purple-jacket-one-tone-with-background-feels-delighted-poses-glad-indoor-talks-coworker-positive-emotions-concept_273609-45280.jpg",
|
||||
},
|
||||
]}
|
||||
textAnimation="fade"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TeamSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTwoColumn
|
||||
tag="FAQ"
|
||||
title="Časté otázky"
|
||||
description="Všetko, čo potrebujete vedieť."
|
||||
items={[
|
||||
{
|
||||
question: "Ako prebieha spolupráca?",
|
||||
answer: "Individuálne podľa potrieb klienta.",
|
||||
},
|
||||
{
|
||||
question: "Aké sú ceny?",
|
||||
answer: "Pripravíme ponuku na mieru vašim cieľom.",
|
||||
},
|
||||
{
|
||||
question: "Aký je čas realizácie?",
|
||||
answer: "Záleží od rozsahu projektu.",
|
||||
},
|
||||
{
|
||||
question: "Poskytujete analytiku?",
|
||||
answer: "Áno, reportujeme každý mesiac.",
|
||||
},
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Kontakt"
|
||||
text="Ste pripravení posunúť svoju značku ďalej?"
|
||||
primaryButton={{
|
||||
text: "Napíšte nám",
|
||||
href: "mailto:info@uvaweb.sk",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Zobraziť portfólio",
|
||||
href: "#services",
|
||||
}}
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
22
src/pages/HomePage/sections/About.tsx
Normal file
22
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutMediaOverlay
|
||||
tag="O nás"
|
||||
title="Marketing, ktorý mení pravidlá hry"
|
||||
description="UvaWeb je agentúra, ktorá sa zameriava na inováciu. Veríme, že každá značka si zaslúži vizuálnu identitu, ktorá nielen vyzerá skvele, ale aj funguje na úrovni konverzií."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-dark-room-modern-futuristic-sci-fi-background-3d-illustration_35913-2402.jpg"
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
src/pages/HomePage/sections/Contact.tsx
Normal file
28
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
// 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="Kontakt"
|
||||
text="Ste pripravení posunúť svoju značku ďalej?"
|
||||
primaryButton={{
|
||||
text: "Napíšte nám",
|
||||
href: "mailto:info@uvaweb.sk",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Zobraziť portfólio",
|
||||
href: "#services",
|
||||
}}
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
src/pages/HomePage/sections/Faq.tsx
Normal file
39
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
// 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="FAQ"
|
||||
title="Časté otázky"
|
||||
description="Všetko, čo potrebujete vedieť."
|
||||
items={[
|
||||
{
|
||||
question: "Ako prebieha spolupráca?",
|
||||
answer: "Individuálne podľa potrieb klienta.",
|
||||
},
|
||||
{
|
||||
question: "Aké sú ceny?",
|
||||
answer: "Pripravíme ponuku na mieru vašim cieľom.",
|
||||
},
|
||||
{
|
||||
question: "Aký je čas realizácie?",
|
||||
answer: "Záleží od rozsahu projektu.",
|
||||
},
|
||||
{
|
||||
question: "Poskytujete analytiku?",
|
||||
answer: "Áno, reportujeme každý mesiac.",
|
||||
},
|
||||
]}
|
||||
textAnimation="slide-up"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
src/pages/HomePage/sections/Hero.tsx
Normal file
44
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
// 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 HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroCenteredLogos
|
||||
avatarsSrc={[
|
||||
"http://img.b2bpic.net/free-photo/smiling-man-wearing-white-shirt_23-2152009541.jpg",
|
||||
"http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||||
"http://img.b2bpic.net/free-photo/emotional-young-bearded-man-asking-something-isolated-dark-wall_140725-97014.jpg",
|
||||
"http://img.b2bpic.net/free-photo/crazy-hero-happy-expression_1194-4140.jpg",
|
||||
]}
|
||||
avatarText="Spolupracujeme s lídrami"
|
||||
title="UvaWeb: Budúcnosť vášho marketingu začína dnes"
|
||||
description="Vytvárame pohlcujúce digitálne zážitky, ktoré definujú značky. Špičková kreativita spojená s dátami a špičkovou technológiou."
|
||||
primaryButton={{
|
||||
text: "Zistiť viac",
|
||||
href: "#services",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Kontaktovať nás",
|
||||
href: "#contact",
|
||||
}}
|
||||
names={[
|
||||
"Google",
|
||||
"Microsoft",
|
||||
"Amazon",
|
||||
"Apple",
|
||||
"Tesla",
|
||||
"Adobe",
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/color-year-purple-tones-abstract-landscape-with-fantasy-aesthetic_23-2151394052.jpg"
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
203
src/pages/HomePage/sections/Metrics.tsx
Normal file
203
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { motion, useScroll, useTransform, useInView } from 'motion/react';
|
||||
import { TrendingUp, Users, Search, MousePointerClick, ArrowUpRight } from 'lucide-react';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import CursorTrail from "@/components/ui/CursorTrail";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const isInView = useInView(containerRef, { once: false, amount: 0.3 });
|
||||
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
||||
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ["start end", "end start"]
|
||||
});
|
||||
|
||||
// Animate metrics based on scroll
|
||||
const profitValue = useTransform(scrollYProgress, [0.2, 0.8], [0, 345]);
|
||||
const leadsValue = useTransform(scrollYProgress, [0.2, 0.8], [0, 89]);
|
||||
const visitorsValue = useTransform(scrollYProgress, [0.2, 0.8], [0, 12500]);
|
||||
const rankingValue = useTransform(scrollYProgress, [0.2, 0.8], [50, 1]);
|
||||
|
||||
const [displayValues, setDisplayValues] = useState({
|
||||
profit: 0,
|
||||
leads: 0,
|
||||
visitors: 0,
|
||||
ranking: 50
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!containerRef.current) return;
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
setMousePos({
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
return () => window.removeEventListener('mousemove', handleMouseMove);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribeProfit = profitValue.on("change", v => setDisplayValues(prev => ({ ...prev, profit: Math.round(v) })));
|
||||
const unsubscribeLeads = leadsValue.on("change", v => setDisplayValues(prev => ({ ...prev, leads: Math.round(v) })));
|
||||
const unsubscribeVisitors = visitorsValue.on("change", v => setDisplayValues(prev => ({ ...prev, visitors: Math.round(v) })));
|
||||
const unsubscribeRanking = rankingValue.on("change", v => setDisplayValues(prev => ({ ...prev, ranking: Math.round(v) })));
|
||||
|
||||
return () => {
|
||||
unsubscribeProfit();
|
||||
unsubscribeLeads();
|
||||
unsubscribeVisitors();
|
||||
unsubscribeRanking();
|
||||
};
|
||||
}, [profitValue, leadsValue, visitorsValue, rankingValue]);
|
||||
|
||||
return (
|
||||
<div id="metrics" data-webild-section="metrics" className="relative w-full py-32 bg-background overflow-hidden" ref={containerRef}>
|
||||
<CursorTrail color={{ r: 99, g: 102, b: 241 }} />
|
||||
|
||||
{/* Mouse-following spotlight */}
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
|
||||
animate={{
|
||||
background: `radial-gradient(600px circle at ${mousePos.x}px ${mousePos.y}px, rgba(99, 102, 241, 0.05), transparent 40%)`
|
||||
}}
|
||||
/>
|
||||
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<div className="w-content-width mx-auto relative z-10">
|
||||
<div className="text-center max-w-3xl mx-auto mb-20">
|
||||
<ScrollReveal variant="slide-up">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-cta/10 text-primary-cta text-sm font-medium mb-6">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span>Interaktívne výsledky</span>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<TextAnimation
|
||||
text="Sledujte, ako váš biznis rastie"
|
||||
variant="slide-up"
|
||||
tag="h2"
|
||||
gradientText={false}
|
||||
className="text-4xl md:text-6xl font-bold text-foreground mb-6 tracking-tight"
|
||||
/>
|
||||
|
||||
<ScrollReveal variant="slide-up" delay={0.2}>
|
||||
<p className="text-xl text-accent">
|
||||
Moderný web nie je len vizitka. Je to predajný nástroj, ktorý pracuje 24/7.
|
||||
Posúvajte stránku a sledujte, aký vplyv má kvalitný marketing na vaše čísla.
|
||||
</p>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Profit Chart Card */}
|
||||
<motion.div
|
||||
className="card p-8 rounded-2xl border border-border/50 relative overflow-hidden group"
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<TrendingUp className="w-24 h-24 text-primary-cta" />
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary-cta/10 flex items-center justify-center mb-6">
|
||||
<TrendingUp className="w-6 h-6 text-primary-cta" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-accent mb-2">Nárast tržieb</h3>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-5xl font-bold text-foreground">+{displayValues.profit}%</span>
|
||||
<span className="text-sm text-green-500 flex items-center"><ArrowUpRight className="w-4 h-4" /> YoY</span>
|
||||
</div>
|
||||
|
||||
{/* Animated Chart */}
|
||||
<div className="mt-8 h-32 flex items-end gap-2">
|
||||
{[40, 55, 45, 70, 65, 85, 100].map((height, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="flex-1 bg-primary-cta/20 rounded-t-md relative overflow-hidden"
|
||||
initial={{ height: "10%" }}
|
||||
animate={isInView ? { height: `${height}%` } : { height: "10%" }}
|
||||
transition={{ duration: 1.5, delay: i * 0.1, ease: "easeOut" }}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute bottom-0 left-0 right-0 bg-primary-cta"
|
||||
initial={{ height: "0%" }}
|
||||
animate={isInView ? { height: `${(displayValues.profit / 345) * 100}%` } : { height: "0%" }}
|
||||
transition={{ duration: 0.1 }}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{/* Google Ranking Card */}
|
||||
<motion.div
|
||||
className="card p-8 rounded-2xl border border-border/50 relative overflow-hidden group"
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-4">
|
||||
<Search className="w-5 h-5 text-blue-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-accent mb-1">Pozícia v Google</h3>
|
||||
<div className="text-4xl font-bold text-foreground">#{displayValues.ranking}</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm text-accent mb-1">Organická návštevnosť</div>
|
||||
<div className="text-2xl font-bold text-foreground">+{Math.round((50 - displayValues.ranking) * 12.5)}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 w-full bg-background rounded-full h-2 overflow-hidden">
|
||||
<motion.div
|
||||
className="h-full bg-blue-500"
|
||||
style={{ width: `${100 - (displayValues.ranking / 50 * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* Leads Card */}
|
||||
<motion.div
|
||||
className="card p-6 rounded-2xl border border-border/50 relative overflow-hidden group"
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center mb-4">
|
||||
<MousePointerClick className="w-5 h-5 text-purple-500" />
|
||||
</div>
|
||||
<h3 className="text-sm font-medium text-accent mb-1">Nové dopyty</h3>
|
||||
<div className="text-3xl font-bold text-foreground">{displayValues.leads} / mesiac</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Visitors Card */}
|
||||
<motion.div
|
||||
className="card p-6 rounded-2xl border border-border/50 relative overflow-hidden group"
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center mb-4">
|
||||
<Users className="w-5 h-5 text-emerald-500" />
|
||||
</div>
|
||||
<h3 className="text-sm font-medium text-accent mb-1">Návštevníci</h3>
|
||||
<div className="text-3xl font-bold text-foreground">
|
||||
{displayValues.visitors > 1000 ? `${(displayValues.visitors / 1000).toFixed(1)}k` : displayValues.visitors}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
src/pages/HomePage/sections/Services.tsx
Normal file
58
src/pages/HomePage/sections/Services.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "services" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ServicesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesImageBento
|
||||
tag="Naše služby"
|
||||
title="Digitálne riešenia na mieru"
|
||||
description="Kompletný servis pre vašu digitálnu transformáciu."
|
||||
items={[
|
||||
{
|
||||
title: "Stratégia",
|
||||
description: "Dátami riadená stratégia.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-dressed-white-t-shirt-using-virtual-reality-glasses-with-graph-charts-numbers-lines-technology-concept_613910-5163.jpg",
|
||||
},
|
||||
{
|
||||
title: "Produkcia",
|
||||
description: "Vizuálna tvorba obsahu.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-drinking-coffee_23-2148128284.jpg",
|
||||
},
|
||||
{
|
||||
title: "Analytika",
|
||||
description: "Výkonnostné dáta.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/future-visions-business-technology-concept_23-2151893423.jpg",
|
||||
},
|
||||
{
|
||||
title: "Branding",
|
||||
description: "Identita vašej firmy.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/comparison-different-types-brush-strokes_23-2150105302.jpg",
|
||||
},
|
||||
{
|
||||
title: "Networking",
|
||||
description: "Globálne prepojenia.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/workers-working-together-network-graphic_53876-123893.jpg",
|
||||
},
|
||||
{
|
||||
title: "SEO Optimalizácia",
|
||||
description: "Viditeľnosť online.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/search-searching-finding-looking-optimisation-concept_53876-16304.jpg",
|
||||
},
|
||||
{
|
||||
title: "AI Automatizácia",
|
||||
description: "Inteligentné systémy.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-low-poly-background-with-shallow-depth-field_1048-6794.jpg",
|
||||
},
|
||||
]}
|
||||
textAnimation="fade"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
44
src/pages/HomePage/sections/Team.tsx
Normal file
44
src/pages/HomePage/sections/Team.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "team" section.
|
||||
|
||||
import React from 'react';
|
||||
import TeamProfileCards from '@/components/sections/team/TeamProfileCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TeamSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamProfileCards
|
||||
tag="Náš tím"
|
||||
title="Expertíza v každom detaile"
|
||||
description="Spoznajte ľudí, ktorí za tým stoja."
|
||||
items={[
|
||||
{
|
||||
title: "Michal Uva",
|
||||
description: "Creative Director",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/african-man-guy-black-suit-students-with-laptop-girl-white-blouse_1157-41603.jpg",
|
||||
buttonText: "Kontaktovať",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/three-coworkers-looking-monitor_23-2149370564.jpg",
|
||||
},
|
||||
{
|
||||
title: "Lucia Webová",
|
||||
description: "Head of Strategy",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-making-quarter-review_23-2148411833.jpg",
|
||||
buttonText: "Kontaktovať",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-confident-man_1098-18449.jpg",
|
||||
},
|
||||
{
|
||||
title: "Patrik Inovátor",
|
||||
description: "Tech Lead",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-business-people-working-team_1098-21600.jpg",
|
||||
buttonText: "Kontaktovať",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-curly-haired-beautiful-woman-smiles-happily-wears-fashionable-purple-jacket-one-tone-with-background-feels-delighted-poses-glad-indoor-talks-coworker-positive-emotions-concept_273609-45280.jpg",
|
||||
},
|
||||
]}
|
||||
textAnimation="fade"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
src/pages/HomePage/sections/Testimonials.tsx
Normal file
53
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeCards
|
||||
tag="Referencie"
|
||||
title="Čo o nás hovoria"
|
||||
description="Naši klienti sú naši partneri na ceste k úspechu."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Michal S.",
|
||||
role: "CEO",
|
||||
quote: "UvaWeb zmenili náš biznis k lepšiemu.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-female-professional-making-eye-contact-against-colored-background_662251-651.jpg",
|
||||
},
|
||||
{
|
||||
name: "Anna K.",
|
||||
role: "Marketing Dir.",
|
||||
quote: "Skvelá kreativita a profesionálny prístup.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-businesswoman-smiling-camera_74855-3966.jpg",
|
||||
},
|
||||
{
|
||||
name: "Peter J.",
|
||||
role: "Founder",
|
||||
quote: "Výsledky prišli skôr, než sme čakali.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-smoking-pipe_1154-103.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena M.",
|
||||
role: "Manager",
|
||||
quote: "Najlepšia voľba pre modernú značku.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12867.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jakub L.",
|
||||
role: "CTO",
|
||||
quote: "Technicky špičková úroveň marketingu.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg",
|
||||
},
|
||||
]}
|
||||
textAnimation="fade-blur"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user