+
+ {SUPPORTED_LANGUAGES.map((lang) => {
+ const active = lang === current;
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..d16637b
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,127 @@
+import { Menu, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { rivusLogoSrc } from '../lib/logos';
+import { NAV_SECTIONS } from '../lib/sections';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { ThemeToggle } from './ThemeToggle';
+
+export function Navbar({
+ isDark,
+ onToggleTheme,
+}: {
+ isDark: boolean;
+ onToggleTheme: () => void;
+}) {
+ const { t } = useTranslation();
+ const [open, setOpen] = useState(false);
+ const [scrolled, setScrolled] = useState(false);
+
+ useEffect(() => {
+ const onScroll = () => setScrolled(window.scrollY > 8);
+ onScroll();
+ window.addEventListener('scroll', onScroll, { passive: true });
+ return () => window.removeEventListener('scroll', onScroll);
+ }, []);
+
+ useEffect(() => {
+ document.body.style.overflow = open ? 'hidden' : '';
+ return () => {
+ document.body.style.overflow = '';
+ };
+ }, [open]);
+
+ const closeMenu = () => setOpen(false);
+
+ return (
+
+
+ })
+
+
+
+
+
+
+
+
+
+
+
+
+ {NAV_SECTIONS.map((section) => (
+
+ {t(section.labelKey)}
+
+ ))}
+
+
+
+
+
+
+ {t('nav.cta')}
+
+
+
+ -
+ {STEPS.map((step, index) => (
+
+
+
+
+ {String(index + 1).padStart(2, '0')}
+
+ {index < STEPS.length - 1 && (
+
+ )}
+
+ + {t(`process.steps.${step}.title`)} +
++ {t(`process.steps.${step}.description`)} +
+
+
+
+ {SERVICES.map(({ key, Icon }, index) => (
+
+
+ ))}
+
+
+
+
+ + {t(`services.items.${key}.title`)} +
++ {t(`services.items.${key}.description`)} +
+
+ {eyebrow && (
+
+ {eyebrow}
+
+ )}
+
+ );
+}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..1865561
--- /dev/null
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,32 @@
+import { Moon, Sun } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+export function ThemeToggle({
+ isDark,
+ onToggle,
+ className = '',
+}: {
+ isDark: boolean;
+ onToggle: () => void;
+ className?: string;
+}) {
+ const { t } = useTranslation();
+
+ return (
+
+ );
+}
diff --git a/src/components/WhyUs.tsx b/src/components/WhyUs.tsx
new file mode 100644
index 0000000..e5431e0
--- /dev/null
+++ b/src/components/WhyUs.tsx
@@ -0,0 +1,62 @@
+import { motion } from 'framer-motion';
+import {
+ MessageCircle,
+ ShieldCheck,
+ Sparkles,
+ Target,
+ type LucideIcon,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+import { SectionHeader } from './Services';
+
+type Key = 'senior' | 'delivery' | 'communication' | 'quality';
+
+const PILLARS: { key: Key; Icon: LucideIcon }[] = [
+ { key: 'senior', Icon: Sparkles },
+ { key: 'delivery', Icon: Target },
+ { key: 'communication', Icon: MessageCircle },
+ { key: 'quality', Icon: ShieldCheck },
+];
+
+export function WhyUs() {
+ const { t } = useTranslation();
+
+ return (
+ {title}
+ {subtitle && ( +{subtitle}
+ )} +
+
+
+ {PILLARS.map(({ key, Icon }, index) => (
+
+
+ ))}
+
+
+
+
+ + {t(`whyus.items.${key}.title`)} +
++ {t(`whyus.items.${key}.description`)} +
+