/* All sections of the site. Compose them in app.jsx. */ const { useState, useEffect, useRef, useCallback } = React; /* Hook: fade-in on viewport */ function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal"); const io = new IntersectionObserver( (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add("in")), { threshold: 0.12, rootMargin: "0px 0px -40px 0px" } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } /* ================= HEADER ================= */ const Header = ({ content, lang, setLang }) => { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return (
Shlomo Kalichman.
{/* Language switch */}
{content.headerCta}
{/* Mobile menu drawer */} {open && (
)}
); }; /* ================= HERO ================= */ const Hero = ({ content, lang }) => { const isRTL = lang === "he"; const titleLines = content.hero.title.split("\n"); return (
{/* Background glows */}
{/* Text column */}
{content.hero.availability}

{titleLines.map((line, i) => { const isHighlight = line.trim() === content.hero.titleHighlight?.trim(); return ( {isHighlight ? ( {line} ) : line} ); })}

{content.hero.statement}

{content.hero.support}

{/* Visual column */}
{/* Organic blob */}
{/* Dot grid — top */}
{/* Dot grid — bottom */}
{/* Accent dots */}
{/* Portrait */}
שלמה קליחמן
{/* Floating cards — desktop */}
{content.hero.floating.map((card, i) => ( ))}
{/* Floating cards — mobile grid */}
{content.hero.floating.slice(0, 4).map((card, i) => (
{card.title}
))}
); }; const FloatingCard = ({ data, index, lang }) => { const isRTL = lang === "he"; const positions = [ { [isRTL ? "right" : "left"]: 0, top: "16%" }, { [isRTL ? "right" : "left"]: -8, top: "42%" }, { [isRTL ? "right" : "left"]: 4, bottom: "12%" }, { [isRTL ? "left" : "right"]: 8, top: "31%" }, { [isRTL ? "left" : "right"]: 4, bottom: "9%" }, ]; return (
{data.title}
); }; /* ================= PROOF ================= */ const Proof = ({ content }) => (
{content.proof.cards.map((c, i) => (

{c.title}

{c.body}

))}
); /* ================= ABOUT ================= */ const About = ({ content, lang }) => (
{content.about.eyebrow}

{content.about.title.split("\n").map((l, i) => {l})}

{content.about.paragraphs.map((p, i) => (

{p}

))}
); /* ================= EXPERTISE ================= */ const Expertise = ({ content, lang }) => (
{content.expertise.eyebrow}

{content.expertise.title.split("\n").map((l, i) => {l})}

{content.expertise.intro}

{content.expertise.cards.map((c, i) => ( ))}
); const ExpertiseCard = ({ card, index }) => { const colorMap = [ { bg: "var(--coral-soft)", icon: "var(--coral-deep)" }, { bg: "var(--teal-soft)", icon: "var(--teal)" }, { bg: "#F1E0BF", icon: "#6E5325" }, { bg: "var(--teal-soft)", icon: "var(--teal)" }, { bg: "var(--coral-soft)", icon: "var(--coral-deep)" }, { bg: "#EFEAD8", icon: "var(--olive)" }, ]; const c = colorMap[index % colorMap.length]; return (

{card.title}

{card.body}

{card.tags.map((t, i) => {t})}
); }; /* ================= PROJECTS ================= */ const Projects = ({ content, openModal }) => (
{content.projects.eyebrow}

{content.projects.title}

{content.projects.intro}

{content.projects.items.map((p, i) => ( openModal(p)} /> ))}
); const ProjectCard = ({ project, readMore, onClick }) => (
{project.tags.slice(0, 2).map((t, i) => ( {t} ))}

{project.title}

{project.summary}

); /* ================= CASE STUDY MODAL ================= */ const Modal = ({ project, content, onClose }) => { const closeBtnRef = useRef(null); useEffect(() => { if (!project) return; const onKey = (e) => e.key === "Escape" && onClose(); document.body.style.overflow = "hidden"; window.addEventListener("keydown", onKey); closeBtnRef.current?.focus(); return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); }; }, [project, onClose]); if (!project) return null; const L = content.projects.modalLabels; return (
e.stopPropagation()} style={{ background: "var(--bg)", borderRadius: 22, width: "100%", maxWidth: 880, overflow: "hidden", boxShadow: "0 40px 80px -20px rgba(0,0,0,0.4)", position: "relative", animation: "modal-slide .25s ease", }}>
{project.tags.map((t, i) => ( {t} ))}

{project.summary}

{L.tech}
{project.modal.tech.map((t, i) => {t})}
{L.outcome}

{project.modal.outcome}

); }; const ModalBlock = ({ label, text }) => (
{label}

{text}

); /* ================= TESTIMONIALS ================= */ const Testimonials = ({ content }) => (
{content.testimonials.eyebrow}

{content.testimonials.title}

{content.testimonials.items.map((t, i) => )}
); const TestimonialCard = ({ t, index }) => { const colorMap = { coral: { bg: "var(--coral-soft)", fg: "var(--coral-deep)" }, teal: { bg: "var(--teal-soft)", fg: "var(--teal)" }, olive: { bg: "#EFEAD8", fg: "var(--olive)" }, }; const c = colorMap[t.color] || colorMap.coral; return (

"{t.quote}"

{t.photo ? ( {t.name} ) : (
{t.avatar}
)}
{t.name}
{t.role} · {t.company}
); }; /* ================= CONTACT ================= */ const Contact = ({ content, lang }) => { const [form, setForm] = useState({ name: "", email: "", interest: content.contact.interests[0], message: "" }); const [sent, setSent] = useState(false); const onSubmit = (e) => { e.preventDefault(); if (!form.name || !form.email || !form.message) return; setSent(true); setTimeout(() => setSent(false), 4000); setForm({ name: "", email: "", interest: content.contact.interests[0], message: "" }); }; return (
{/* decorative shapes */}
{/* LEFT */}
{content.contact.eyebrow}

{content.contact.headline.split("\n").map((l, i) => {l})}

{content.contact.support}

{/* RIGHT — form */}
setForm({ ...form, name: v })} /> setForm({ ...form, email: v })} />
setForm({ ...form, interest: v })} options={content.contact.interests} />
setForm({ ...form, message: v })} />
); }; const Field = ({ label, type = "text", value, onChange, placeholder, options }) => { const baseInput = { width: "100%", padding: "12px 14px", borderRadius: 12, border: "1px solid var(--line)", background: "#FFFFFF", fontSize: 14.5, color: "var(--ink)", fontFamily: "inherit", outline: "none", transition: "border-color .15s, box-shadow .15s", }; const handleFocus = (e) => { e.target.style.borderColor = "var(--coral)"; e.target.style.boxShadow = "0 0 0 3px rgba(232,100,42,0.15)"; }; const handleBlur = (e) => { e.target.style.borderColor = "var(--line)"; e.target.style.boxShadow = "none"; }; return (