// Miss-Scully homepage — section components
// Exposed on window at the bottom for use by homepage-app.jsx
const { useState, useEffect, useRef } = React;
// Resource indirection so the standalone bundler can inline code-referenced assets
const RES = (id, fallback) =>
window.__resources && window.__resources[id] || fallback;
/* ---------- shared hooks ---------- */
function useReducedMotion() {
const [reduced, setReduced] = useState(
() => window.matchMedia('(prefers-reduced-motion: reduce)').matches
);
useEffect(() => {
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
const fn = (e) => setReduced(e.matches);
mq.addEventListener('change', fn);
return () => mq.removeEventListener('change', fn);
}, []);
return reduced;
}
function useReveal() {
// Visible by default; JS adds .pre to hide, then removes it as elements enter
// the viewport. Failsafe reveals everything if IO never fires.
useEffect(() => {
if (!('IntersectionObserver' in window)) return;
const els = Array.from(document.querySelectorAll('[data-reveal]:not(.in)'));
els.forEach((el) => el.classList.add('pre'));
const io = new IntersectionObserver(
(entries) => {
entries.forEach((en) => {
if (en.isIntersecting) {
en.target.classList.remove('pre');
en.target.classList.add('in');
io.unobserve(en.target);
}
});
},
{ threshold: 0.12 }
);
els.forEach((el) => io.observe(el));
const failsafe = setTimeout(() => {
els.forEach((el) => el.classList.remove('pre'));
}, 1500);
return () => {
io.disconnect();
clearTimeout(failsafe);
};
}, []);
}
/* ---------- paw glyph (simple circles only) ---------- */
function PawMark({ size = 28, color = 'var(--accent)' }) {
return (
);
}
/* ---------- header ---------- */
function Header({ active }) {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const fn = () => setScrolled(window.scrollY > 12);
window.addEventListener('scroll', fn, { passive: true });
fn();
return () => window.removeEventListener('scroll', fn);
}, []);
const links = [
['Anifit Shop', 'Anifit Shop.html'],
['Tractive GPS', 'Tractive GPS.html'],
['Animalia Versicherung', 'Animalia Versicherung.html'],
['Hundezubehör', 'Hundezubehoer.html'],
['Über uns', 'Ueber uns.html']];
return (
);
}
/* ---------- hero with 3D scene ---------- */
function Hero({ headline, intensity }) {
const reduced = useReducedMotion();
const sceneRef = useRef(null);
const target = useRef({ rx: 0, ry: 0 });
const current = useRef({ rx: 0, ry: 0 });
useEffect(() => {
if (reduced || intensity === 0) {
if (sceneRef.current) sceneRef.current.style.transform = '';
return;
}
const fine = window.matchMedia('(pointer: fine)').matches;
let raf;
const tick = () => {
const c = current.current,t = target.current;
c.rx += (t.rx - c.rx) * 0.07;
c.ry += (t.ry - c.ry) * 0.07;
if (sceneRef.current) {
sceneRef.current.style.transform =
'rotateX(' + c.rx.toFixed(3) + 'deg) rotateY(' + c.ry.toFixed(3) + 'deg)';
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
const onMove = (e) => {
const nx = e.clientX / window.innerWidth - 0.5;
const ny = e.clientY / window.innerHeight - 0.5;
target.current.ry = nx * 9 * intensity;
target.current.rx = -ny * 7 * intensity;
};
const onScroll = () => {
// gentle scroll-driven tilt for touch devices
const y = Math.min(window.scrollY / 600, 1);
target.current.rx = -4 * intensity * y;
target.current.ry = 3 * intensity * y;
};
if (fine) window.addEventListener('pointermove', onMove, { passive: true });else
window.addEventListener('scroll', onScroll, { passive: true });
return () => {
cancelAnimationFrame(raf);
window.removeEventListener('pointermove', onMove);
window.removeEventListener('scroll', onScroll);
};
}, [reduced, intensity]);
const z = (n) => ({ transform: 'translateZ(' + Math.round(n * (0.4 + 0.6 * intensity)) + 'px)' });
return (
Hunde- & Katzenshop · Zürich
{headline}
Frischfutter in Anifit-Qualität aus der Schweiz, Tractive GPS-Tracker und
Animalia Tierversicherungen – sorgfältig ausgewählt von Scully,
der Chefin auf vier Pfoten.
Versandkostenfrei ab CHF 69 in der ganzen Schweiz
Chefin Ms. Scully
Anifit Frischfutter
Naturnah · aus der Schweiz
Tractive GPS · Live
Versandkostenfrei ab CHF 69
);
}
/* ---------- 3D showcase ---------- */
function Showcase3D() {
return (
Miss-Scully Welt
Wo Hunde & Katzen zu Hause sind
Ein Blick in die Welt von Scully & Co.
{/*
Higgsfield 3D-Video: Legen Sie die Datei assets/hero-3d.mp4 ins Projekt
und kommentieren Sie das
-Element ein – es ersetzt dann die beiden Fotos.
*/}
Miss-Scully · Schweiz
NATURNAH
Wo Hunde & Katzen zu Hause sind
Das beste Leben für Ihren Hund und Ihre Katze — direkt aus der Schweiz.
);
}
/* ---------- homepage video ---------- */
function VideoSection() {
// Video-Element wird erst gemountet, wenn die Datei existiert (HEAD-Check) –
// bis dahin zeigt der Rahmen den Platzhalter, ohne Lade-Fehler in der Konsole.
const [videoReady, setVideoReady] = useState(false);
useEffect(() => {
let alive = true;
fetch('assets/startseite-video.mp4', { method: 'HEAD' }).
then((r) => {if (alive && r.ok) setVideoReady(true);}).
catch(() => {});
return () => {alive = false;};
}, []);
return (
{videoReady ?
:
}
Miss-Scully · Schweiz
);
}
/* ---------- video hero (vollflächig) ---------- */
function VideoHero({ headline }) {
return (
Hunde- & Katzenshop · Zürich
{headline}
Frischfutter in Anifit-Qualität aus der Schweiz, Tractive GPS-Tracker
und Animalia Tierversicherungen – sorgfältig ausgewählt von Scully,
der Chefin auf vier Pfoten.
Versandkostenfrei ab CHF 69 in der ganzen Schweiz
);
}
/* ---------- video stories ---------- */
function VideoStoryFrame({ wide, src, slotId, placeholder, title, text, href, label }) {
const [ready, setReady] = useState(false);
useEffect(() => {
let alive = true;
fetch(src, { method: 'HEAD' }).
then((r) => {if (alive && r.ok) setReady(true);}).
catch(() => {});
return () => {alive = false;};
}, []);
return (
{ready ?
:
}
{title}
{text}
{label}
);
}
function VideoStories() {
return (
Miss-Scully in Bewegung
Erleben statt nur lesen
);
}
/* ---------- trust bar ---------- */
function TrustBar() {
const items = [
'Anifit-Qualität aus der Schweiz',
'Offizieller Animalia-Partner',
'Tractive GPS Fachhändler',
'Schweizer Shop · Zürich'];
return (
{items.map((t) =>
{t}
)}
);
}
/* ---------- pillars with 3D tilt ---------- */
function TiltCard({ children, className, href, intensity }) {
const ref = useRef(null);
const reduced = useReducedMotion();
const onMove = (e) => {
if (reduced || intensity === 0) return;
if (!window.matchMedia('(pointer: fine)').matches) return;
const el = ref.current;
const r = el.getBoundingClientRect();
const nx = (e.clientX - r.left) / r.width - 0.5;
const ny = (e.clientY - r.top) / r.height - 0.5;
el.style.transform =
'perspective(900px) rotateX(' + -ny * 8 * intensity + 'deg) rotateY(' +
nx * 10 * intensity + 'deg) translateY(-6px)';
};
const onLeave = () => {
if (ref.current) ref.current.style.transform = '';
};
return (
{children}
);
}
function Pillars({ intensity }) {
const pillars = [
{
num: '01',
tag: 'Frischfutter',
title: 'Anifit Shop',
text: 'Frischfutter für Hunde & Katzen mit hohem Fleischanteil – ohne künstliche Zusätze.',
href: 'Anifit Shop.html',
tone: 'tone-green',
span: 'span-7'
},
{
num: '02',
tag: 'GPS-Tracker',
title: 'Tractive GPS',
text: 'Live-Ortung für Ihren Vierbeiner – damit Sie immer wissen, wo er gerade schnüffelt.',
href: 'Tractive GPS.html',
tone: 'tone-terra',
span: 'span-5'
},
{
num: '03',
tag: 'Versicherung',
title: 'Animalia Tierversicherung',
text: 'Als offizieller Partner vermitteln wir den passenden Schutz für Hund & Katze.',
href: 'Animalia Versicherung.html',
tone: 'tone-sand',
span: 'span-5'
},
{
num: '04',
tag: 'Zubehör',
title: 'Hundezubehör',
text: 'Ausgewähltes Zubehör, das Scullys feine Nase überzeugt hat.',
href: 'Hundezubehoer.html',
tone: 'tone-ink',
span: 'span-7'
}];
return (
Alles für Ihren Vierbeiner
Vier gute Gründe für Miss-Scully
);
}
/* ---------- fresh food story ---------- */
function Story() {
const points = [
{
t: 'Hoher Fleischanteil',
d: 'Frischfleisch in Lebensmittelqualität statt Füllstoffe – so frisst Ihr Tier, was es wirklich braucht.'
},
{
t: 'Ohne künstliche Zusätze',
d: 'Keine Lockstoffe, keine künstlichen Konservierungs- oder Farbstoffe. Natur pur.'
},
{
t: 'Persönliche Beratung',
d: 'Als Anifit-Berater begleitet Nicolas die Futterumstellung persönlich – von der ersten Dose an.'
}];
return (
Frischfutter statt Trockenfutter
Weil dein Tier Familie ist
Miss-Scully vereint Qualität, Natur und Herz für Hund & Katze.
Darum setzen wir auf naturnahe Ernährung in Anifit-Qualität.
Frischfutter entdecken
Gut umsorgt – von der Schnauze bis zur Pfote
{points.map((p, i) =>
{p.t}
{p.d}
)}
);
}
/* ---------- Animalia premium calculator ---------- */
function AnimaliaCalc({ breedType }) {
const calcUrl =
'https://animalia.ch/de/pramienrechner-versicherung-hund-katze?codeAgent=9590&breedType=' + (
breedType || 'dog');
return (
Animalia Tierversicherung
Berechnen Sie Ihre Prämie direkt hier
Als offizieller Animalia-Partner bieten wir Ihnen den Prämienrechner
gleich hier an – in wenigen Minuten zur passenden Versicherung für
Hund oder Katze.
Der Rechner lädt nicht?{' '}
Prämienrechner in neuem Fenster öffnen →
);
}
/* ---------- the duo ---------- */
function Duo({ hideHead }) {
return (
{hideHead ? null :
Über uns
Die Chefin auf vier Pfoten & ihr Assistent auf zwei Beinen
}
Chief Tasting Officer (CTO)
Ms. Scully
«Mit ihrer feinen Nase sorgt sie dafür, dass nur die besten Produkte
in den Shop kommen.»
Der Mensch, der alles möglich macht
Nicolas Piccolo-Leeser
«Mit Leidenschaft und Erfahrung wähle ich nachhaltige Produkte aus,
die Hunde und Katzen gesund und glücklich machen.»
);
}
/* ---------- CTA band ---------- */
function CTABand() {
return (
Bereit für die Futterumstellung?
Scully hat schon mal vorgekostet. Persönliche Beratung inklusive –
versandkostenfrei ab CHF 69.
);
}
/* ---------- SEO text ---------- */
function SeoText() {
return (
Miss-Scully – Ihr Hunde- und Katzenshop in der Schweiz
Miss-Scully ist Ihr Schweizer Online-Shop für gesunde Tiernahrung
und durchdachtes Hundezubehör. Im Zentrum steht naturnahes{' '}
Anifit Frischfutter für Hunde und
Katzen aus schonender Herstellung – mit hohem Fleischanteil,
ohne unnötige Zusätze. Als zertifizierter Anifit-Ernährungsberater
begleiten wir Sie persönlich bei der Futterumstellung – auf Deutsch
und Englisch, schweizweit.
Ergänzt wird das Sortiment durch handgefertigtes{' '}
Hundezubehör von EMMY & PEPE :
Hundegeschirre, Halsbänder, Leinen, Gassitaschen, orthopädische
Hundebetten und Reisekörbchen.
GPS-Tracker und Tierversicherung – alles aus einer Hand
Mit dem Tractive GPS-Tracker für Hunde
und Katzen wissen Sie jederzeit, wo Ihr Liebling ist – mit
Live-Ortung, virtuellem Zaun und Gesundheitsmonitoring. Und als
Partner von Animalia Tierversicherung {' '}
helfen wir Ihnen, Tierarztkosten abzusichern, bevor sie entstehen.
Ob Welpe oder Senior, Stubentiger oder Freigänger: Bei Miss-Scully
in Zürich finden Sie alles für ein gesundes, sicheres und glückliches
Tierleben – lernen Sie uns kennen oder
stöbern Sie im Ratgeber-Blog .
);
}
/* ---------- footer ---------- */
function Footer() {
return (
Förrlibuckstrasse 201 8005 Zürich
);
}
Object.assign(window, {
useReducedMotion, useReveal, PawMark,
Header, Hero, VideoHero, VideoStories, TrustBar, Showcase3D, VideoSection, Pillars, Story, AnimaliaCalc, Duo, CTABand, Footer
});