Refine coming soon experience and global ambient UI

components/layout/animated-logo.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { motion, useMotionTemplate, useMotionValue, useSpring } from "framer-motion";
+import Image from "next/image";
+
+export function AnimatedLogo() {
+  const rotateX = useMotionValue(0);
+  const rotateY = useMotionValue(0);
+  const springX = useSpring(rotateX, { stiffness: 180, damping: 18 });
+  const springY = useSpring(rotateY, { stiffness: 180, damping: 18 });
+  const glowX = useMotionTemplate`${springY}px`;
+  const glowY = useMotionTemplate`${springX}px`;
+
+  function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left - rect.width / 2;
+    const offsetY = event.clientY - rect.top - rect.height / 2;
+
+    rotateX.set((-offsetY / rect.height) * 14);
+    rotateY.set((offsetX / rect.width) * 14);
+  }
+
+  function handlePointerLeave() {
+    rotateX.set(0);
+    rotateY.set(0);
+  }
+
+  return (
+    <motion.div
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
+      animate={{
+        y: [0, -6, 0],
+        scale: [1, 1.015, 1],
+      }}
+      transition={{
+        duration: 8,
+        repeat: Number.POSITIVE_INFINITY,
+        ease: "easeInOut",
+      }}
+      style={{
+        rotateX: springX,
+        rotateY: springY,
+        transformPerspective: 900,
+      }}
+      className="relative mx-auto flex w-fit items-center justify-center"
+    >
+      <motion.div
+        animate={{
+          opacity: [0.28, 0.42, 0.28],
+          scale: [0.96, 1.04, 0.96],
+        }}
+        transition={{
+          duration: 6,
+          repeat: Number.POSITIVE_INFINITY,
+          ease: "easeInOut",
+        }}
+        style={{
+          x: glowX,
+          y: glowY,
+        }}
+        className="absolute inset-0 -z-10 rounded-full bg-brand-primary/20 blur-3xl"
+      />
+
+      <Image
+        src="/logos/light-primary.svg"
+        alt="mohfarawati"
+        width={220}
+        height={52}
+        className="block h-auto w-[140px] dark:hidden sm:w-[180px] lg:w-[220px]"
+        priority
+      />
+      <Image
+        src="/logos/dark-primary.svg"
+        alt="mohfarawati"
+        width={220}
+        height={52}
+        className="hidden h-auto w-[140px] dark:block sm:w-[180px] lg:w-[220px]"
+        priority
+      />
+    </motion.div>
+  );
+}

components/layout/floating-preferences.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { LocaleToggle } from "@/components/layout/locale-toggle";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { cn } from "@/lib/utils";
+
+type FloatingPreferencesProps = {
+  locale: string;
+  className?: string;
+};
+
+export function FloatingPreferences({
+  locale,
+  className,
+}: FloatingPreferencesProps) {
+  const t = useTranslations("navigation");
+
+  return (
+    <div className={cn("fixed inset-x-0 top-0 z-50 px-4 pt-4 sm:px-6", className)}>
+      <div className="mx-auto flex w-full max-w-max items-center justify-center gap-2">
+        <ThemeToggle ariaLabel={t("themeToggle")} className="bg-surface-1/90" />
+        <LocaleToggle locale={locale} />
+      </div>
+    </div>
+  );
+}

components/layout/locale-toggle.tsx

@@ -1,8 +1,15 @@
 "use client";
 
+import { Languages } from "lucide-react";
 import { usePathname } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { AppLocale, getLocalizedPath, stripLocalePrefix } from "@/lib/locale";
 
 type LocaleToggleProps = {
@@ -16,20 +23,32 @@ export function LocaleToggle({ locale }: LocaleToggleProps) {
   const currentLocale = (["de", "en", "ar"].includes(locale) ? locale : "de") as AppLocale;
 
   return (
-    <div className="flex items-center gap-2">
-      {locales.map((targetLocale) => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
         <Button
-          key={targetLocale}
-          asChild
-          variant={targetLocale === currentLocale ? "secondary" : "outline"}
-          size="sm"
-          className="text-xs"
+          type="button"
+          variant="outline"
+          size="icon"
+          aria-label={`Locale: ${currentLocale.toUpperCase()}`}
         >
-          <a href={getLocalizedPath(targetLocale, currentPath)}>
-            {targetLocale.toUpperCase()}
-          </a>
+          <Languages className="h-4 w-4" />
         </Button>
-      ))}
-    </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-[8rem]">
+        {locales.map((targetLocale) => (
+          <DropdownMenuItem key={targetLocale} asChild>
+            <a
+              href={getLocalizedPath(targetLocale, currentPath)}
+              className="flex items-center justify-between gap-4"
+            >
+              <span>{targetLocale.toUpperCase()}</span>
+              {targetLocale === currentLocale ? (
+                <span className="text-xs text-muted-foreground">Active</span>
+              ) : null}
+            </a>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }