+
+
+ );
+}
diff --git a/src/components/CTA.jsx b/src/components/CTA.jsx
deleted file mode 100644
index 7ca2070..0000000
--- a/src/components/CTA.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Play } from 'lucide-react';
-
-export default function CTA() {
- const { t } = useTranslation();
- const cta = t('cta', { returnObjects: true });
-
- return (
-
-
-
-
-
+ {/* Title */}
+
+
+
+ {/* Subtitle */}
+
+
+
+
+ {/* Subtitle */}
+
+
-
- {contact.title}
+
- {contact.title}
+
+
{contact.subtitle} @@ -59,8 +113,9 @@ export default function ContactForm() { required value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} - className="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-red-700 focus:outline-none transition-colors" + className={`w-full bg-gray-900 border rounded-lg px-4 py-3 text-white focus:outline-none transition-colors ${errors.name ? 'border-red-500 focus:border-red-500' : 'border-gray-700 focus:border-red-700'}`} /> + {errors.name &&
{errors.name}
}{errors.message}
} {/* Honeypot fields - hidden from users */} @@ -140,9 +197,10 @@ export default function ContactForm() { {formSent && ( @@ -150,6 +208,12 @@ export default function ContactForm() {{contact.success}
)}
+
+ {formError && (
+
+
+ )}
{formError}
+
-
-
-
-
- - {t('features.title')} -
-- {t('features.subtitle')} -
-
- {t('features.items', { returnObjects: true }).map((feature, i) => {
- const Icon = Icons[feature.icon];
- return (
-
-
-
- );
- })}
-
-
- {feature.title}
-{feature.desc}
-
+
+
+ {/* Title with highlight sweep */}
+
+
+
+ {String(index + 1).padStart(2, '0')}
+
+
+
+ {feature.title}
+
+
+
+ + {feature.desc} +
+
+
+ {/* ── Section header ──────────────────────────────────────────── */}
+
+
+
+
+
+
+ {/* ── Feature grid ────────────────────────────────────────────── */}
+ {/*
+ 3-column grid instead of stacking cards:
+ - 9 items scan in ~2 seconds vs ~15s of scrolling
+ - Staggered fade-in still gives motion and life
+ - Much less scroll fatigue on a landing page
+ */}
+
+
+
+
+ {items.map((feature, i) => (
+
+
-
-
-
-
-
-
-
-
-
- - {t('hero.tagline')} -
-- {t('hero.subtitle')} -
-- {t('hero.description')} -
- -
-
-
+
+ {/* ── Main headline — ScrambleIn ──────────────────────────────── */}
+
+
+ {/* ── Scroll hint ────────────────────────────────────────────────── */}
+
+
+
+
+ {/* ── Rotating subtitle — TextRotate ─────────────────────── */}
+
+
+
+
+ {/* ── Description — VerticalCutReveal ────────────────────────── */}
+
+
+
+ {/* ── Rotating subtitle — TextRotate ─────────────────────── */}
+
+
+
+
+ {hero.description}
+
+
+
+ {/* ── CTAs ───────────────────────────────────────────────────── */}
+
+
+
+
- {/* Header */}
-
-
-
-
-
-
- - {t('iceberg.title')} -
-- {t('iceberg.subtitle')} -
-
- {/* WordPress Iceberg */}
-
-
- {/* Tip */}
-
-
- {/* AhojSvet - Clean Side */}
-
-
-
- {/* Waterline + Reveal Button */}
-
-
-
- {tipItems.map((item, i) => {
- const Icon = iconMap[item.icon];
- return (
-
-
-
- );
- })}
-
-
-
-
- {item.label}
- {item.desc}
-
-
-
- {/* Hidden Costs */}
-
-
-
-
-
-
-
-
-
-
-
- {hiddenItems.map((item, i) => {
- const Icon = iconMap[item.icon];
- const visible = i < visibleCount;
- return (
-
-
- {/* Summary */}
- {visibleCount >= hiddenItems.length && (
-
-
- );
- })}
-
-
-
-
-
- {item.label}
-
-
- {item.desc}
-
-
- )}
-
- 10+ skrytých nákladov
-
-
- ...a to sme ešte nezačali riešiť škálovanie.
-
-
-
-
-
-
-
-
- Bez prekvapení
-
- {t('iceberg.ahojsvet.title')}
-{t('iceberg.ahojsvet.subtitle')}
-
- {ahojsvetPoints.map((p, i) => (
-
-
-
-
- ))}
-
-
-
-
- {p.label}
- {p.desc}
-
+
+ {/* Header */}
+
+
+
+
+
+
+
+
+ + {t("iceberg.subtitle")} +
+
+
+ {/* ── WordPress Iceberg (physics side) ─────────────────────────── */}
+
+
+
+ {/* Visible tip items */}
+
+ {/* ── AhojSvet side ────────────────────────────────────────────── */}
+
+
+
+ {/* Waterline + toggle button */}
+
+
+
+ {tipItems.map((item, i) => {
+ const Icon = iconMap[item.icon] ?? HelpCircle;
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+ {item.label}
+ {item.desc}
+
+
+
+ {/* ── Physics drop zone ────────────────────────────────────── */}
+ {revealed && (
+
+
+
+
+
+
+
+ {/* Label */}
+
+ {hiddenItems.map((item: any, i: number) => {
+ const Icon = iconMap[item.icon] ?? HelpCircle;
+ const pos = staggered(i, hiddenItems.length);
+ return (
+
+
+ );
+ })}
+
+
+
+ )}
+
+
+
+
+
+ {/* Severity dot */}
+
+
+
+
+
+ {item.label}
+
+
+ {item.desc}
+
+
+
+
+
+
+
+
+
+ {t("iceberg.ahojsvet.badge", { defaultValue: "Bez prekvapení" })}
+
+ + {t("iceberg.ahojsvet.title")} +
++ {t("iceberg.ahojsvet.subtitle")} +
+
+ {ahojsvetPts.map((p: any, i: number) => (
+
+
+
+
+ ))}
+
+
+
+
+ {p.label}
+ {p.desc}
+
-
-
-
-
- - {wild.title} -
-- {wild.subtitle} -
-
- {projects.map((project, i) => (
-
-
-
-
- {project.placeholder ? (
- 
- )}
-
-
-
-
- ))}
- {project.name}
-{project.desc}
-
-
- {wild.cta}
-
+
+ {/* ── Header ─────────────────────────────────────────────────── */}
+
+
+
+ {/* ── CTA link ────────────────────────────────────────────────── */}
+
+
+
+
+
+
+ {/*
+ ── Parallax card grid ────────────────────────────────────────
+ Floating tracks the cursor across the entire grid container.
+ Each FloatingElement drifts at its own depth — card 1 moves
+ toward the cursor, card 2 slightly away — creating a tactile
+ sense of depth that rewards slow mouse movement.
+
+ sensitivity={0.06}: gentle enough not to feel seasick on fast
+ mouse sweeps but noticeable on deliberate hover.
+ easingFactor={0.04}: very smooth lag — elements trail the
+ cursor like they have real weight.
+
+ NOTE: FloatingElement does NOT change layout — it only applies
+ a CSS transform. The grid spacing is handled by the inner div.
+ */}
+
+
+
+
+ {projects.map((project, i) => (
+
+
+
+ ))}
+
+
+ {project.placeholder ? (
+
+
+
+
+ {project.name}
+{project.desc}
+
+
+ {wild.cta}
+
+
+
+
+ {open && (
+
+ );
+}
+
+// ── Navigation ──────────────────────────────────────────────────────────────
+
+export default function Navigation({ scrollY }: { scrollY: number }) {
+ const { t } = useTranslation();
+ const [menuOpen, setMenuOpen] = useState(false);
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Screenshots.jsx b/src/components/Screenshots.jsx
deleted file mode 100644
index 8c5681e..0000000
--- a/src/components/Screenshots.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BarChart3, ShoppingBag, FileText, Blocks } from 'lucide-react';
-
-export default function Screenshots() {
- const { t } = useTranslation();
- const [activeTab, setActiveTab] = useState(0);
- const tabs = t('screenshots.tabs', { returnObjects: true });
-
- const iconMap = {
- 0: BarChart3,
- 1: ShoppingBag,
- 2: FileText,
- 3: Blocks
- };
-
- const CurrentIcon = iconMap[activeTab];
-
- return (
-
+ {languages.filter(l => l.code !== i18n.language).map(({ code, label, Flag }) => (
+
+ ))}
+
+ )}
+
-
- - {t('screenshots.title')} -
- -
- {tabs.map((tab, i) => (
-
- ))}
-
-
-
-
-
-
-
-
- - {tabs[activeTab]} screenshot -
-
+
+
+
+
+
+
+
+
+ {tabs.map((tab, i) => (
+
+ ))}
+
+
+
+
+
+ ![{tabs[activeTab]}]({imageMap[activeTab]})
+
+
-
-
-
-
- - {t('speed.title')} -
-- {t('speed.subtitle')} -
-
- {t('speed.selector')}
- {t('speed.networks', { returnObjects: true }).map(net => (
-
- ))}
-
-
- {Object.entries(t('speed.metrics', { returnObjects: true })).map(([key, label]) => {
- const asData = speedData[network].ahojsvet[key];
- const wpData = speedData[network].wordpress[key];
- const percentFaster = Math.round((1 - asData[0] / wpData[0]) * 100);
-
- return (
-
-
-
- );
- })}
- {label}
-
-
-
-
- AhojSvet
-
-
-
- Load time:
- {asData[0]}{t('speed.units.time')}
-
-
- Data:
- {asData[1]}{t('speed.units.size')}
-
-
- Requests:
- {asData[2]} {t('speed.units.requests')}
-
-
-
- WordPress + WooCommerce
-
-
-
- Load time:
- {wpData[0]}{t('speed.units.time')}
-
-
- Data:
- {wpData[1]}{t('speed.units.size')}
-
-
- Requests:
- {wpData[2]} {t('speed.units.requests')}
-
-
-
- {percentFaster}% rýchlejšie
-
-
-
+
+ );
+}
+
+export default function SpeedComparison() {
+ const { t } = useTranslation();
+ const [network, setNetwork] = useState('WiFi');
+ const [revealed, setRevealed] = useState(false);
+
+ const metrics = Object.entries(t('speed.metrics', { returnObjects: true }) as Record{label}
+
+
+
+
+ AhojSvet
+
+
+
+ Load time:
+ {asData[0]}{t('speed.units.time')}
+
+
+ Data:
+ {asData[1]}{t('speed.units.size')}
+
+
+ Requests:
+ {asData[2]} {t('speed.units.requests')}
+
+
+
+ WordPress + WooCommerce
+
+
+
+ Load time:
+ {wpData[0]}{t('speed.units.time')}
+
+
+ Data:
+ {wpData[1]}{t('speed.units.size')}
+
+
+ Requests:
+ {wpData[2]} {t('speed.units.requests')}
+
+
+
+ {percentFaster}% rýchlejšie
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('speed.selector')}
+ {(t('speed.networks', { returnObjects: true }) as string[]).map(net => (
+
+ ))}
+
+
+
+
+ {/* Collapse button after all items */}
+ {revealed && (
+
+ {metrics.slice(0, 2).map(([key, label]) => {
+ const asData = speedData[network].ahojsvet[key];
+ const wpData = speedData[network].wordpress[key];
+ const percentFaster = Math.round((1 - asData[0] / wpData[0]) * 100);
+ return (
+
+
+
+
+ {/* Gradient overlay + reveal button */}
+ {!revealed && (
+
+ {metrics.slice(2).map(([key, label], i) => {
+ const asData = speedData[network].ahojsvet[key];
+ const wpData = speedData[network].wordpress[key];
+ const percentFaster = Math.round((1 - asData[0] / wpData[0]) * 100);
+ return (
+
+
+ );
+ })}
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
-
-
- {/* Bleeding Sword Divider */}
-
-
-
- - {t('problem.title')} -
-- {t('problem.subtitle')} -
-
- {t('problem.cards', { returnObjects: true }).map((card, i) => (
-
-
-
- ))}
- {card.title}
- {card.desc}
-
-
-
- 
-
-
-
+ {card.title}
+
+ {card.desc}
+
+
+
+
+
+
+
+
+ + {subtitle} +
+
+ {cards.map((card, i) => (
+
+
+
+ ))}
+
+ {card.title}
+
+ + {card.desc} +
+
+ {/* Lightspeed canvas (behind content) */}
+
+
+
+ {/* Fade to white — seamless transition into Features */}
+
+
+ {/* Section header */}
+
+
+
+
+
+
+ {/* Stat cards */}
+
+
+
+
+ {cards.map((card, i) => (
+
+
+ {children}
+
+
+
+ {children}
+
+
+ )
+}
+
+const StackingCardsContext = createContext<{
+ progress: MotionValue
+ {children}
+
+
+ {children}
+
+ )
+}
diff --git a/src/components/fancy/physics/gravity.tsx b/src/components/fancy/physics/gravity.tsx
new file mode 100644
index 0000000..51f118e
--- /dev/null
+++ b/src/components/fancy/physics/gravity.tsx
@@ -0,0 +1,512 @@
+"use client"
+
+import {
+ createContext,
+ forwardRef,
+ ReactNode,
+ useCallback,
+ useContext,
+ useEffect,
+ useImperativeHandle,
+ useRef,
+ useState,
+} from "react"
+import { calculatePosition } from "@/utils/calculate-position"
+import { parsePathToVertices } from "@/utils/svg-path-to-vertices"
+import { debounce } from "lodash"
+import decomp from "poly-decomp"
+import Matter, {
+ Bodies,
+ Common,
+ Engine,
+ Events,
+ Mouse,
+ MouseConstraint,
+ Query,
+ Render,
+ Runner,
+ World,
+} from "matter-js"
+
+import { cn } from "@/lib/utils"
+
+type GravityProps = {
+ children: ReactNode
+ debug?: boolean
+ gravity?: { x: number; y: number }
+ resetOnResize?: boolean
+ grabCursor?: boolean
+ addTopWall?: boolean
+ autoStart?: boolean
+ className?: string
+}
+
+type PhysicsBody = {
+ element: HTMLElement
+ body: Matter.Body
+ props: MatterBodyProps
+}
+
+type MatterBodyProps = {
+ children: ReactNode
+ matterBodyOptions?: Matter.IBodyDefinition
+ isDraggable?: boolean
+ bodyType?: "rectangle" | "circle" | "svg"
+ sampleLength?: number
+ x?: number | string
+ y?: number | string
+ angle?: number
+ className?: string
+}
+
+export type GravityRef = {
+ start: () => void
+ stop: () => void
+ reset: () => void
+}
+
+const GravityContext = createContext<{
+ registerElement: (
+ id: string,
+ element: HTMLElement,
+ props: MatterBodyProps
+ ) => void
+ unregisterElement: (id: string) => void
+} | null>(null)
+
+export const MatterBody = ({
+ children,
+ className,
+ matterBodyOptions = {
+ friction: 0.1,
+ restitution: 0.1,
+ density: 0.001,
+ isStatic: false,
+ },
+ bodyType = "rectangle",
+ isDraggable = true,
+ sampleLength = 15,
+ x = 0,
+ y = 0,
+ angle = 0,
+ ...props
+}: MatterBodyProps) => {
+ const elementRef = useRef
+ {children}
+
+ )
+}
+
+const Gravity = forwardRef
+ {children}
+
+