apps/web/src/components/language-switcher.tsx

@@ -0,0 +1,67 @@
+import { type Locale, useTranslation } from "@/lib/i18n";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@sase/ui";
+import { Check, Globe } from "lucide-react";
+
+const LOCALES: { code: Locale; label: string; name: string }[] = [
+  { code: "tr", label: "TR", name: "Türkçe" },
+  { code: "en", label: "EN", name: "English" },
+];
+
+/**
+ * Language switcher wired to the i18n store.
+ * - `inline`: segmented TR/EN row (footer)
+ * - `dropdown`: round Globe icon button + menu (app header)
+ */
+export function LanguageSwitcher({ variant = "inline" }: { variant?: "inline" | "dropdown" }) {
+  const { t, locale, setLocale } = useTranslation();
+
+  if (variant === "dropdown") {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            aria-label={t("footer.language")}
+            className="flex size-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          >
+            <Globe className="size-4" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40">
+          {LOCALES.map(({ code, name }) => (
+            <DropdownMenuItem
+              key={code}
+              onSelect={() => setLocale(code)}
+              className="justify-between"
+            >
+              {name}
+              {locale === code && <Check className="size-4 text-brand" />}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a button group, not a form fieldset; role="group" is the correct ARIA here
+    <div className="flex items-center gap-1 text-sm" role="group" aria-label={t("footer.language")}>
+      <Globe className="mr-1 size-4 text-muted-foreground" aria-hidden="true" />
+      {LOCALES.map(({ code, label }) => (
+        <button
+          key={code}
+          type="button"
+          onClick={() => setLocale(code)}
+          aria-pressed={locale === code}
+          className={`rounded-md px-2 py-1 transition-colors ${
+            locale === code
+              ? "font-semibold text-foreground"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}

apps/web/src/components/settings/settings-content.tsx

@@ -1,9 +1,11 @@
+import { LanguageSwitcher } from "@/components/language-switcher";
 import { useAuth } from "@/hooks/use-auth";
 import { api } from "@/lib/api-client";
 import { signIn } from "@/lib/auth-client";
 import { useTranslation } from "@/lib/i18n";
 import { capture } from "@/lib/posthog";
 import { toast } from "@/lib/toast";
+import { getUserSettings, setUserSetting } from "@/lib/user-settings";
 import { Button } from "@sase/ui";
 import { Input } from "@sase/ui";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@sase/ui";
@@ -20,28 +22,122 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@sase/ui";
+import { Skeleton } from "@sase/ui";
 import { useQuery } from "@tanstack/react-query";
 import {
   AlertTriangle,
-  CalendarDays,
   Copy,
+  Eye,
+  EyeOff,
   Gift,
   Link2,
+  Monitor,
+  Moon,
   Share2,
   Shield,
+  SlidersHorizontal,
+  Sun,
   Trash2,
   User,
 } from "lucide-react";
 import { useEffect, useState } from "react";
-import { ChangelogTab } from "./changelog-tab";
 
-export function SettingsContent() {
+const TAB_ITEMS = [
+  { value: "profile", icon: User, labelKey: "settings.tabs.profile" },
+  { value: "preferences", icon: SlidersHorizontal, labelKey: "settings.tabs.preferences" },
+  { value: "security", icon: Shield, labelKey: "settings.tabs.security" },
+  { value: "connections", icon: Link2, labelKey: "settings.tabs.connections" },
+  { value: "referral", icon: Gift, labelKey: "settings.tabs.referral" },
+  { value: "account", icon: Trash2, labelKey: "settings.tabs.account" },
+] as const;
+
+type ThemePref = "light" | "dark" | "system";
+
+const THEME_OPTIONS: { value: ThemePref; icon: typeof Sun; labelKey: string }[] = [
+  { value: "light", icon: Sun, labelKey: "settings.preferences.themeLight" },
+  { value: "dark", icon: Moon, labelKey: "settings.preferences.themeDark" },
+  { value: "system", icon: Monitor, labelKey: "settings.preferences.themeSystem" },
+];
+
+function applyTheme(theme: ThemePref) {
+  const isDark =
+    theme === "dark" ||
+    (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  document.documentElement.classList.toggle("dark", isDark);
+}
+
+function PasswordField({
+  id,
+  label,
+  value,
+  onChange,
+  required,
+  minLength,
+  hint,
+  error,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  required?: boolean;
+  minLength?: number;
+  hint?: string;
+  error?: string;
+}) {
   const { t } = useTranslation();
+  const [show, setShow] = useState(false);
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={id}>{label}</Label>
+      <div className="relative">
+        <Input
+          id={id}
+          type={show ? "text" : "password"}
+          value={value}
+          onChange={onChange}
+          required={required}
+          minLength={minLength}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={hint || error ? `${id}-hint` : undefined}
+          className="pr-10"
+        />
+        <button
+          type="button"
+          onClick={() => setShow((s) => !s)}
+          aria-label={
+            show ? t("settings.security.hidePassword") : t("settings.security.showPassword")
+          }
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground transition-colors hover:text-foreground"
+        >
+          {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+        </button>
+      </div>
+      {error ? (
+        <p id={`${id}-hint`} className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : hint ? (
+        <p id={`${id}-hint`} className="text-xs text-muted-foreground">
+          {hint}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function SettingsContent({
+  tab,
+  onTabChange,
+}: {
+  tab: string;
+  onTabChange: (next: string) => void;
+}) {
+  const { t, locale } = useTranslation();
   const { user, signOut } = useAuth();
 
   // Profile state
   const [name, setName] = useState(user?.name || "");
-  const [phone, setPhone] = useState("");
   const [savingProfile, setSavingProfile] = useState(false);
 
   // Security state
@@ -56,19 +152,30 @@ export function SettingsContent() {
   const [deleting, setDeleting] = useState(false);
 
   // Referral stats
-  const { data: referralStats } = useQuery({
+  const { data: referralStats, isLoading: referralLoading } = useQuery({
     queryKey: ["referral-stats"],
     queryFn: () => api.get<{ totalReferrals: number; rewardDays: number }>("/referrals/stats"),
     retry: false,
   });
 
   // Google connection status
-  const { data: connections } = useQuery({
+  const { data: connections, isLoading: connectionsLoading } = useQuery({
     queryKey: ["connections"],
     queryFn: () => api.get<{ google: boolean }>("/users/me/connections"),
     retry: false,
   });
 
+  const passwordMismatch = confirmPassword.length > 0 && newPassword !== confirmPassword;
+
+  // Appearance
+  const [theme, setTheme] = useState<ThemePref>(() => getUserSettings().theme ?? "dark");
+
+  function selectTheme(next: ThemePref) {
+    setTheme(next);
+    setUserSetting("theme", next);
+    applyTheme(next);
+  }
+
   useEffect(() => {
     if (user?.name) setName(user.name);
   }, [user?.name]);
@@ -77,7 +184,7 @@ export function SettingsContent() {
     e.preventDefault();
     setSavingProfile(true);
     try {
-      await api.patch("/users/me", { name, phone });
+      await api.patch("/users/me", { name });
       toast.success(t("settings.profile.updated"));
     } catch {
       toast.error(t("settings.profile.updateFailed"));
@@ -161,319 +268,354 @@ export function SettingsContent() {
     <div className="mx-auto max-w-3xl space-y-6">
       <h2 className="text-2xl font-bold">{t("settings.title")}</h2>
 
-      <Tabs defaultValue="profile">
-        <TabsList className="w-full flex-wrap">
-          <TabsTrigger value="profile" className="gap-2">
-            <User className="h-4 w-4" />
-            <span className="hidden sm:inline">{t("settings.tabs.profile")}</span>
-          </TabsTrigger>
-          <TabsTrigger value="security" className="gap-2">
-            <Shield className="h-4 w-4" />
-            <span className="hidden sm:inline">{t("settings.tabs.security")}</span>
-          </TabsTrigger>
-          <TabsTrigger value="connections" className="gap-2">
-            <Link2 className="h-4 w-4" />
-            <span className="hidden sm:inline">{t("settings.tabs.connections")}</span>
-          </TabsTrigger>
-          <TabsTrigger value="referral" className="gap-2">
-            <Gift className="h-4 w-4" />
-            <span className="hidden sm:inline">{t("settings.tabs.referral")}</span>
-          </TabsTrigger>
-          <TabsTrigger value="account" className="gap-2">
-            <Trash2 className="h-4 w-4" />
-            <span className="hidden sm:inline">{t("settings.tabs.account")}</span>
-          </TabsTrigger>
-          <TabsTrigger value="changelog" className="gap-2">
-            <CalendarDays className="h-4 w-4" />
-            <span className="hidden sm:inline">{t("settings.tabs.changelog")}</span>
-          </TabsTrigger>
+      <Tabs
+        value={tab}
+        onValueChange={onTabChange}
+        className="lg:grid lg:grid-cols-[210px_1fr] lg:items-start lg:gap-8"
+      >
+        <TabsList className="-mx-1 mb-2 flex w-full justify-start gap-1 overflow-x-auto px-1 lg:mx-0 lg:mb-0 lg:h-auto lg:flex-col lg:items-stretch lg:bg-transparent lg:p-0">
+          {TAB_ITEMS.map(({ value, icon: Icon, labelKey }) => (
+            <TabsTrigger
+              key={value}
+              value={value}
+              className="shrink-0 gap-2 lg:w-full lg:justify-start lg:px-3 lg:py-2"
+            >
+              <Icon className="h-4 w-4" />
+              <span>{t(labelKey)}</span>
+            </TabsTrigger>
+          ))}
         </TabsList>
 
-        {/* Profile Tab */}
-        <TabsContent value="profile">
-          <Card>
-            <CardHeader>
-              <CardTitle>{t("settings.profile.title")}</CardTitle>
-              <CardDescription>{t("settings.profile.description")}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form onSubmit={handleUpdateProfile} className="space-y-4">
-                <div className="space-y-2">
-                  <Label htmlFor="name">{t("settings.profile.name")}</Label>
-                  <Input id="name" value={name} onChange={(e) => setName(e.target.value)} />
-                </div>
-                <div className="space-y-2">
-                  <Label>{t("settings.profile.email")}</Label>
-                  <Input value={user?.email || ""} disabled />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="phone">{t("settings.profile.phone")}</Label>
-                  <Input
-                    id="phone"
-                    type="tel"
-                    placeholder={t("settings.profile.phonePlaceholder")}
-                    value={phone}
-                    onChange={(e) => setPhone(e.target.value)}
-                  />
-                </div>
-                {user?.createdAt && (
+        <div className="min-w-0">
+          {/* Profile Tab */}
+          <TabsContent value="profile">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("settings.profile.title")}</CardTitle>
+                <CardDescription>{t("settings.profile.description")}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <form onSubmit={handleUpdateProfile} className="space-y-4">
                   <div className="space-y-2">
-                    <Label>{t("settings.profile.memberSince")}</Label>
-                    <Input
-                      value={new Date(user.createdAt).toLocaleDateString("tr-TR", {
-                        day: "numeric",
-                        month: "long",
-                        year: "numeric",
-                      })}
-                      disabled
-                    />
+                    <Label htmlFor="name">{t("settings.profile.name")}</Label>
+                    <Input id="name" value={name} onChange={(e) => setName(e.target.value)} />
                   </div>
-                )}
-                <Button type="submit" disabled={savingProfile}>
-                  {savingProfile ? t("common.saving") : t("common.save")}
-                </Button>
-              </form>
-            </CardContent>
-          </Card>
-        </TabsContent>
+                  <div className="space-y-2">
+                    <Label htmlFor="email">{t("settings.profile.email")}</Label>
+                    <Input id="email" value={user?.email || ""} disabled />
+                  </div>
+                  {user?.createdAt && (
+                    <div className="space-y-2">
+                      <Label htmlFor="memberSince">{t("settings.profile.memberSince")}</Label>
+                      <Input
+                        id="memberSince"
+                        value={new Date(user.createdAt).toLocaleDateString(
+                          locale === "tr" ? "tr-TR" : "en-US",
+                          { day: "numeric", month: "long", year: "numeric" },
+                        )}
+                        disabled
+                      />
+                    </div>
+                  )}
+                  <Button type="submit" disabled={savingProfile}>
+                    {savingProfile ? t("common.saving") : t("common.save")}
+                  </Button>
+                </form>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* Preferences Tab */}
+          <TabsContent value="preferences">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("settings.preferences.title")}</CardTitle>
+                <CardDescription>{t("settings.preferences.description")}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <fieldset className="space-y-2">
+                  <legend className="mb-2 text-sm font-medium">
+                    {t("settings.preferences.theme")}
+                  </legend>
+                  <div className="grid grid-cols-3 gap-2 sm:max-w-md">
+                    {THEME_OPTIONS.map(({ value, icon: Icon, labelKey }) => (
+                      <button
+                        key={value}
+                        type="button"
+                        onClick={() => selectTheme(value)}
+                        aria-pressed={theme === value}
+                        className={`flex flex-col items-center gap-2 rounded-lg border p-3 text-sm font-medium transition-colors ${
+                          theme === value
+                            ? "border-brand bg-brand/10 text-foreground"
+                            : "border-border text-muted-foreground hover:bg-accent hover:text-foreground"
+                        }`}
+                      >
+                        <Icon className="size-5" />
+                        {t(labelKey)}
+                      </button>
+                    ))}
+                  </div>
+                </fieldset>
+
+                <Separator />
 
-        {/* Security Tab */}
-        <TabsContent value="security">
-          <Card>
-            <CardHeader>
-              <CardTitle>{t("settings.security.title")}</CardTitle>
-              <CardDescription>{t("settings.security.description")}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <form onSubmit={handleChangePassword} className="space-y-4">
                 <div className="space-y-2">
-                  <Label htmlFor="currentPassword">{t("settings.security.currentPassword")}</Label>
-                  <Input
+                  <Label>{t("settings.preferences.language")}</Label>
+                  <LanguageSwitcher variant="inline" />
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* Security Tab */}
+          <TabsContent value="security">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("settings.security.title")}</CardTitle>
+                <CardDescription>{t("settings.security.description")}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <form onSubmit={handleChangePassword} className="space-y-4">
+                  <PasswordField
                     id="currentPassword"
-                    type="password"
+                    label={t("settings.security.currentPassword")}
                     value={currentPassword}
                     onChange={(e) => setCurrentPassword(e.target.value)}
                     required
                   />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="newPassword">{t("settings.security.newPassword")}</Label>
-                  <Input
+                  <PasswordField
                     id="newPassword"
-                    type="password"
+                    label={t("settings.security.newPassword")}
                     value={newPassword}
                     onChange={(e) => setNewPassword(e.target.value)}
                     required
                     minLength={8}
+                    hint={t("settings.security.passwordHint")}
                   />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="confirmPassword">{t("settings.security.confirmPassword")}</Label>
-                  <Input
+                  <PasswordField
                     id="confirmPassword"
-                    type="password"
+                    label={t("settings.security.confirmPassword")}
                     value={confirmPassword}
                     onChange={(e) => setConfirmPassword(e.target.value)}
                     required
                     minLength={8}
+                    error={passwordMismatch ? t("auth.passwordsDoNotMatch") : undefined}
                   />
-                </div>
-                <Button type="submit" disabled={changingPassword}>
-                  {changingPassword
-                    ? t("settings.security.changing")
-                    : t("settings.security.changePassword")}
-                </Button>
-              </form>
-            </CardContent>
-          </Card>
-        </TabsContent>
+                  <Button type="submit" disabled={changingPassword || passwordMismatch}>
+                    {changingPassword
+                      ? t("settings.security.changing")
+                      : t("settings.security.changePassword")}
+                  </Button>
+                </form>
+              </CardContent>
+            </Card>
+          </TabsContent>
 
-        {/* Connections Tab */}
-        <TabsContent value="connections">
-          <Card>
-            <CardHeader>
-              <CardTitle>{t("settings.connections.title")}</CardTitle>
-              <CardDescription>{t("settings.connections.description")}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="flex items-center justify-between rounded-lg border p-4">
-                <div className="flex items-center gap-3">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
-                    <svg className="h-5 w-5" viewBox="0 0 24 24" role="img" aria-label="Google">
-                      <path
-                        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
-                        fill="#4285F4"
-                      />
-                      <path
-                        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                        fill="#34A853"
-                      />
-                      <path
-                        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                        fill="#FBBC05"
-                      />
-                      <path
-                        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                        fill="#EA4335"
-                      />
-                    </svg>
-                  </div>
-                  <div>
-                    <p className="font-medium">{t("settings.connections.google")}</p>
-                    <Badge variant={connections?.google ? "default" : "secondary"}>
-                      {connections?.google
-                        ? t("settings.connections.linked")
-                        : t("settings.connections.notLinked")}
-                    </Badge>
-                  </div>
-                </div>
-                <div>
-                  {connections?.google ? (
-                    <Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
-                      {t("settings.connections.unlink")}
-                    </Button>
-                  ) : (
-                    <Button size="sm" onClick={handleLinkGoogle}>
-                      {t("settings.connections.link")}
-                    </Button>
-                  )}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* Referral Tab */}
-        <TabsContent value="referral">
-          <Card>
-            <CardHeader>
-              <CardTitle>{t("settings.referral.title")}</CardTitle>
-              <CardDescription>{t("settings.referral.description")}</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              {user?.referralCode ? (
-                <>
-                  {/* Referral Code */}
-                  <div className="space-y-2">
-                    <Label>{t("settings.referral.yourCode")}</Label>
-                    <div className="flex items-center gap-3">
-                      <Input value={user.referralCode} readOnly className="font-mono text-lg" />
-                      <Button variant="outline" size="icon" onClick={copyReferralCode}>
-                        <Copy className="h-4 w-4" />
-                      </Button>
+          {/* Connections Tab */}
+          <TabsContent value="connections">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("settings.connections.title")}</CardTitle>
+                <CardDescription>{t("settings.connections.description")}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center justify-between rounded-lg border p-4">
+                  <div className="flex items-center gap-3">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+                      <svg className="h-5 w-5" viewBox="0 0 24 24" role="img" aria-label="Google">
+                        <path
+                          d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
+                          fill="#4285F4"
+                        />
+                        <path
+                          d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                          fill="#34A853"
+                        />
+                        <path
+                          d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                          fill="#FBBC05"
+                        />
+                        <path
+                          d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                          fill="#EA4335"
+                        />
+                      </svg>
+                    </div>
+                    <div>
+                      <p className="font-medium">{t("settings.connections.google")}</p>
+                      {connectionsLoading ? (
+                        <Skeleton className="mt-1 h-5 w-20" />
+                      ) : (
+                        <Badge variant={connections?.google ? "default" : "secondary"}>
+                          {connections?.google
+                            ? t("settings.connections.linked")
+                            : t("settings.connections.notLinked")}
+                        </Badge>
+                      )}
                     </div>
                   </div>
-
-                  {/* Share Link */}
-                  <div className="space-y-2">
-                    <Label>{t("settings.referral.shareLink")}</Label>
-                    <div className="flex items-center gap-3">
-                      <Input
-                        value={`${window.location.origin}/register?ref=${user.referralCode}`}
-                        readOnly
-                        className="text-sm"
-                      />
-                      <Button variant="outline" size="icon" onClick={copyShareLink}>
-                        <Share2 className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </div>
-
-                  <Separator />
-
-                  {/* Referral Stats */}
                   <div>
-                    <h4 className="mb-3 font-medium">{t("settings.referral.stats")}</h4>
-                    <div className="grid grid-cols-2 gap-4">
-                      <Card>
-                        <CardContent className="py-4 text-center">
-                          <p className="text-3xl font-bold">{referralStats?.totalReferrals ?? 0}</p>
+                    {connectionsLoading ? (
+                      <Skeleton className="h-8 w-24" />
+                    ) : connections?.google ? (
+                      <Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
+                        {t("settings.connections.unlink")}
+                      </Button>
+                    ) : (
+                      <Button size="sm" onClick={handleLinkGoogle}>
+                        {t("settings.connections.link")}
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* Referral Tab */}
+          <TabsContent value="referral">
+            <Card>
+              <CardHeader>
+                <CardTitle>{t("settings.referral.title")}</CardTitle>
+                <CardDescription>{t("settings.referral.description")}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                {user?.referralCode ? (
+                  <>
+                    {/* Referral Code */}
+                    <div className="space-y-2">
+                      <Label htmlFor="referralCode">{t("settings.referral.yourCode")}</Label>
+                      <div className="flex items-center gap-3">
+                        <Input
+                          id="referralCode"
+                          value={user.referralCode}
+                          readOnly
+                          className="font-mono text-lg"
+                        />
+                        <Button variant="outline" size="icon" onClick={copyReferralCode}>
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    {/* Share Link */}
+                    <div className="space-y-2">
+                      <Label htmlFor="shareLink">{t("settings.referral.shareLink")}</Label>
+                      <div className="flex items-center gap-3">
+                        <Input
+                          id="shareLink"
+                          value={`${window.location.origin}/register?ref=${user.referralCode}`}
+                          readOnly
+                          className="text-sm"
+                        />
+                        <Button variant="outline" size="icon" onClick={copyShareLink}>
+                          <Share2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* Referral Stats */}
+                    <div>
+                      <h4 className="mb-3 font-medium">{t("settings.referral.stats")}</h4>
+                      <div className="grid grid-cols-2 gap-4">
+                        <div className="rounded-lg bg-muted/50 py-4 text-center">
+                          {referralLoading ? (
+                            <Skeleton className="mx-auto h-9 w-12" />
+                          ) : (
+                            <p className="text-3xl font-bold tabular-nums">
+                              {referralStats?.totalReferrals ?? 0}
+                            </p>
+                          )}
                           <p className="text-sm text-muted-foreground">
                             {t("settings.referral.totalReferrals")}
                           </p>
-                        </CardContent>
-                      </Card>
-                      <Card>
-                        <CardContent className="py-4 text-center">
-                          <p className="text-3xl font-bold">{referralStats?.rewardDays ?? 0}</p>
+                        </div>
+                        <div className="rounded-lg bg-muted/50 py-4 text-center">
+                          {referralLoading ? (
+                            <Skeleton className="mx-auto h-9 w-12" />
+                          ) : (
+                            <p className="text-3xl font-bold tabular-nums">
+                              {referralStats?.rewardDays ?? 0}
+                            </p>
+                          )}
                           <p className="text-sm text-muted-foreground">
                             {t("settings.referral.rewardDays")}
                           </p>
-                        </CardContent>
-                      </Card>
+                        </div>
+                      </div>
                     </div>
-                  </div>
-                </>
-              ) : (
-                <p className="text-sm text-muted-foreground">{t("settings.referral.noCode")}</p>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
+                  </>
+                ) : (
+                  <p className="text-sm text-muted-foreground">{t("settings.referral.noCode")}</p>
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
 
-        {/* Account Tab */}
-        <TabsContent value="account">
-          <Card className="border-destructive/50">
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2 text-destructive">
-                <AlertTriangle className="h-5 w-5" />
-                {t("settings.account.title")}
-              </CardTitle>
-              <CardDescription>{t("settings.account.description")}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-                <DialogTrigger asChild>
-                  <Button variant="destructive">
-                    <Trash2 className="mr-2 h-4 w-4" />
-                    {t("settings.account.deleteAccount")}
-                  </Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>{t("settings.account.deleteConfirmTitle")}</DialogTitle>
-                    <DialogDescription>
-                      {t("settings.account.deleteConfirmDescription")}
-                    </DialogDescription>
-                  </DialogHeader>
-                  <div className="space-y-2">
-                    <Label>{t("settings.account.typeConfirm")}</Label>
-                    <Input
-                      value={deleteConfirmText}
-                      onChange={(e) => setDeleteConfirmText(e.target.value)}
-                      placeholder={t("settings.account.confirmWord")}
-                    />
-                  </div>
-                  <DialogFooter>
-                    <Button
-                      variant="outline"
-                      onClick={() => {
-                        setDeleteDialogOpen(false);
-                        setDeleteConfirmText("");
-                      }}
-                    >
-                      {t("common.cancel")}
+          {/* Account Tab */}
+          <TabsContent value="account">
+            <Card className="border-destructive/50">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-destructive">
+                  <AlertTriangle className="h-5 w-5" />
+                  {t("settings.account.title")}
+                </CardTitle>
+                <CardDescription>{t("settings.account.description")}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                  <DialogTrigger asChild>
+                    <Button variant="destructive">
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      {t("settings.account.deleteAccount")}
                     </Button>
-                    <Button
-                      variant="destructive"
-                      onClick={handleDeleteAccount}
-                      disabled={deleteConfirmText !== t("settings.account.confirmWord") || deleting}
-                    >
-                      {deleting
-                        ? t("settings.account.deleting")
-                        : t("settings.account.deleteAccount")}
-                    </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* Changelog Tab */}
-        <TabsContent value="changelog">
-          <ChangelogTab />
-        </TabsContent>
+                  </DialogTrigger>
+                  <DialogContent>
+                    <DialogHeader>
+                      <DialogTitle>{t("settings.account.deleteConfirmTitle")}</DialogTitle>
+                      <DialogDescription>
+                        {t("settings.account.deleteConfirmDescription")}
+                      </DialogDescription>
+                    </DialogHeader>
+                    <div className="space-y-2">
+                      <Label htmlFor="deleteConfirm">{t("settings.account.typeConfirm")}</Label>
+                      <Input
+                        id="deleteConfirm"
+                        value={deleteConfirmText}
+                        onChange={(e) => setDeleteConfirmText(e.target.value)}
+                        autoComplete="off"
+                      />
+                    </div>
+                    <DialogFooter>
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          setDeleteDialogOpen(false);
+                          setDeleteConfirmText("");
+                        }}
+                      >
+                        {t("common.cancel")}
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        onClick={handleDeleteAccount}
+                        disabled={
+                          deleteConfirmText !== t("settings.account.confirmWord") || deleting
+                        }
+                      >
+                        {deleting
+                          ? t("settings.account.deleting")
+                          : t("settings.account.deleteAccount")}
+                      </Button>
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </div>
       </Tabs>
     </div>
   );

apps/web/src/components/site-footer.tsx

@@ -0,0 +1,165 @@
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { useTranslation } from "@/lib/i18n";
+import { Separator } from "@sase/ui";
+import { Link } from "@tanstack/react-router";
+import { Facebook, Instagram, Linkedin } from "lucide-react";
+
+const SOCIALS: {
+  label: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+}[] = [
+  { label: "LinkedIn", href: "https://www.linkedin.com/company/%C5%9Fase/", icon: Linkedin },
+  { label: "Instagram", href: "https://instagram.com/sase_tr", icon: Instagram },
+  {
+    label: "Facebook",
+    href: "https://www.facebook.com/profile.php?id=61589993436242",
+    icon: Facebook,
+  },
+];
+
+export function SiteFooter({ variant = "full" }: { variant?: "full" | "compact" }) {
+  const { t } = useTranslation();
+
+  // Compact variant — single line for app/dashboard layouts.
+  if (variant === "compact") {
+    return (
+      <footer className="border-t border-border px-6 py-3">
+        <p className="text-center text-xs text-muted-foreground">
+          &copy; {new Date().getFullYear()} Sase.tr ·{" "}
+          <Link to="/privacy" className="transition-colors hover:text-foreground">
+            {t("footer.privacy")}
+          </Link>{" "}
+          ·{" "}
+          <Link to="/terms" className="transition-colors hover:text-foreground">
+            {t("footer.terms")}
+          </Link>{" "}
+          ·{" "}
+          <Link to="/kvkk" className="transition-colors hover:text-foreground">
+            {t("footer.kvkk")}
+          </Link>
+        </p>
+      </footer>
+    );
+  }
+
+  return (
+    <footer className="border-t border-border bg-background px-4 sm:px-6">
+      <div className="mx-auto max-w-7xl">
+        <div className="grid grid-cols-2 gap-8 py-16 sm:grid-cols-4">
+          {/* Brand */}
+          <div className="col-span-2 sm:col-span-1">
+            <span className="text-lg font-bold">Sase.tr</span>
+            <p className="mt-3 text-sm text-muted-foreground">{t("footer.tagline")}</p>
+            <a
+              href="mailto:info@sase.tr"
+              className="mt-2 inline-block text-sm text-muted-foreground transition hover:text-foreground"
+            >
+              info@sase.tr
+            </a>
+            <div className="mt-4 flex items-center gap-3">
+              {SOCIALS.map(({ label, href, icon: Icon }) => (
+                <a
+                  key={label}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={label}
+                  className="text-muted-foreground transition hover:text-foreground"
+                >
+                  <Icon className="size-5" />
+                </a>
+              ))}
+            </div>
+          </div>
+
+          {/* Product */}
+          <nav aria-labelledby="footer-product">
+            <h3 id="footer-product" className="text-sm font-semibold text-foreground">
+              {t("footer.product")}
+            </h3>
+            <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
+              <li>
+                <a href="/#feature-vin" className="transition hover:text-foreground">
+                  {t("footer.vinDecode")}
+                </a>
+              </li>
+              <li>
+                <a href="/#feature-oem" className="transition hover:text-foreground">
+                  {t("footer.partsCatalog")}
+                </a>
+              </li>
+              <li>
+                <a href="/#feature-schema" className="transition hover:text-foreground">
+                  {t("footer.interactiveSchema")}
+                </a>
+              </li>
+              <li>
+                <Link to="/pricing" className="transition hover:text-foreground">
+                  {t("footer.pricing")}
+                </Link>
+              </li>
+            </ul>
+          </nav>
+
+          {/* Company */}
+          <nav aria-labelledby="footer-company">
+            <h3 id="footer-company" className="text-sm font-semibold text-foreground">
+              {t("footer.company")}
+            </h3>
+            <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
+              <li>
+                <Link to="/about" className="transition hover:text-foreground">
+                  {t("footer.about")}
+                </Link>
+              </li>
+              <li>
+                <Link to="/blog" className="transition hover:text-foreground">
+                  {t("footer.blog")}
+                </Link>
+              </li>
+              <li>
+                <Link to="/contact" className="transition hover:text-foreground">
+                  {t("footer.contact")}
+                </Link>
+              </li>
+            </ul>
+          </nav>
+
+          {/* Legal */}
+          <nav aria-labelledby="footer-legal">
+            <h3 id="footer-legal" className="text-sm font-semibold text-foreground">
+              {t("footer.legal")}
+            </h3>
+            <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
+              <li>
+                <Link to="/privacy" className="transition hover:text-foreground">
+                  {t("footer.privacy")}
+                </Link>
+              </li>
+              <li>
+                <Link to="/terms" className="transition hover:text-foreground">
+                  {t("footer.terms")}
+                </Link>
+              </li>
+              <li>
+                <Link to="/kvkk" className="transition hover:text-foreground">
+                  {t("footer.kvkk")}
+                </Link>
+              </li>
+            </ul>
+          </nav>
+        </div>
+
+        <Separator className="bg-border" />
+
+        <div className="flex flex-col items-center justify-between gap-4 py-6 sm:flex-row">
+          <p className="text-sm text-muted-foreground">
+            &copy; {new Date().getFullYear()} Sase.tr. {t("footer.rights")}
+          </p>
+          <LanguageSwitcher variant="inline" />
+        </div>
+      </div>
+    </footer>
+  );
+}

apps/web/src/messages/en.json

@@ -42,6 +42,7 @@
     "logout": "Log Out",
     "contact": "Contact",
     "blog": "Blog",
+    "changelog": "What's New",
     "account": "Account",
     "sectionMain": "Main Menu",
     "sectionAccount": "Account",
@@ -54,6 +55,7 @@
     "referrals": "Referrals",
     "serviceTest": "Service Test",
     "upgradePlan": "Upgrade Plan",
+    "upgradeAccount": "Upgrade Account",
     "welcome": "Welcome to Sase.tr",
     "primaryNav": "Main navigation",
     "openMenu": "Open menu",
@@ -62,6 +64,24 @@
     "expandSidebar": "Expand sidebar",
     "toggleTheme": "Toggle theme"
   },
+  "footer": {
+    "tagline": "VIN decoding & genuine spare-parts catalog platform.",
+    "product": "Product",
+    "company": "Company",
+    "legal": "Legal",
+    "vinDecode": "VIN Decoding",
+    "partsCatalog": "Parts Catalog",
+    "interactiveSchema": "Interactive Diagram",
+    "pricing": "Pricing",
+    "about": "About Us",
+    "blog": "Blog",
+    "contact": "Contact",
+    "privacy": "Privacy Policy",
+    "terms": "Terms of Use",
+    "kvkk": "KVKK",
+    "rights": "All rights reserved.",
+    "language": "Language"
+  },
   "catalog": {
     "title": "Parts Catalog",
     "brands": "Brands",
@@ -369,12 +389,22 @@
     "title": "Settings",
     "tabs": {
       "profile": "Profile",
+      "preferences": "Preferences",
       "security": "Security",
       "connections": "Connections",
       "referral": "Referral",
       "account": "Account",
       "changelog": "Changelog"
     },
+    "preferences": {
+      "title": "Preferences",
+      "description": "Manage your appearance and language preferences.",
+      "theme": "Theme",
+      "themeLight": "Light",
+      "themeDark": "Dark",
+      "themeSystem": "System",
+      "language": "Language"
+    },
     "profile": {
       "title": "Profile Information",
       "description": "Update your personal information.",
@@ -393,7 +423,10 @@
       "newPassword": "New Password",
       "confirmPassword": "New Password (Confirm)",
       "changePassword": "Change Password",
-      "changing": "Changing..."
+      "changing": "Changing...",
+      "passwordHint": "At least 8 characters.",
+      "showPassword": "Show password",
+      "hidePassword": "Hide password"
     },
     "connections": {
       "title": "Connected Accounts",

apps/web/src/messages/tr.json

@@ -42,6 +42,7 @@
     "logout": "Çıkış Yap",
     "contact": "İletişim",
     "blog": "Blog",
+    "changelog": "Yenilikler",
     "account": "Hesap",
     "sectionMain": "Ana Menü",
     "sectionAccount": "Hesap",
@@ -54,6 +55,7 @@
     "referrals": "Referanslar",
     "serviceTest": "Servis Test",
     "upgradePlan": "Plan Yükselt",
+    "upgradeAccount": "Hesabını Yükselt",
     "welcome": "Sase.tr'ye hoş geldiniz",
     "primaryNav": "Ana navigasyon",
     "openMenu": "Menüyü aç",
@@ -62,6 +64,24 @@
     "expandSidebar": "Menüyü genişlet",
     "toggleTheme": "Tema değiştir"
   },
+  "footer": {
+    "tagline": "Şase çözme & orijinal yedek parça kataloğu platformu.",
+    "product": "Ürün",
+    "company": "Şirket",
+    "legal": "Yasal",
+    "vinDecode": "Şase Çözme",
+    "partsCatalog": "Parça Kataloğu",
+    "interactiveSchema": "İnteraktif Şema",
+    "pricing": "Fiyatlar",
+    "about": "Hakkımızda",
+    "blog": "Blog",
+    "contact": "İletişim",
+    "privacy": "Gizlilik Politikası",
+    "terms": "Kullanım Koşulları",
+    "kvkk": "KVKK",
+    "rights": "Tüm hakları saklıdır.",
+    "language": "Dil"
+  },
   "catalog": {
     "title": "Parça Kataloğu",
     "brands": "Markalar",
@@ -369,12 +389,22 @@
     "title": "Ayarlar",
     "tabs": {
       "profile": "Profil",
+      "preferences": "Tercihler",
       "security": "Güvenlik",
       "connections": "Bağlantılar",
       "referral": "Referans",
       "account": "Hesap",
       "changelog": "Değişiklik Günlüğü"
     },
+    "preferences": {
+      "title": "Tercihler",
+      "description": "Görünüm ve dil tercihlerinizi yönetin.",
+      "theme": "Tema",
+      "themeLight": "Açık",
+      "themeDark": "Koyu",
+      "themeSystem": "Sistem",
+      "language": "Dil"
+    },
     "profile": {
       "title": "Profil Bilgileri",
       "description": "Kişisel bilgilerinizi güncelleyin.",
@@ -393,7 +423,10 @@
       "newPassword": "Yeni Şifre",
       "confirmPassword": "Yeni Şifre (Tekrar)",
       "changePassword": "Şifre Değiştir",
-      "changing": "Değiştiriliyor..."
+      "changing": "Değiştiriliyor...",
+      "passwordHint": "En az 8 karakter.",
+      "showPassword": "Şifreyi göster",
+      "hidePassword": "Şifreyi gizle"
     },
     "connections": {
       "title": "Bağlı Hesaplar",

apps/web/src/routeTree.gen.ts

@@ -25,6 +25,7 @@ import { Route as DashboardSettingsRouteImport } from './routes/dashboard/settin
 import { Route as DashboardServiceTestRouteImport } from './routes/dashboard/service-test'
 import { Route as DashboardSearchRouteImport } from './routes/dashboard/search'
 import { Route as DashboardHistoryRouteImport } from './routes/dashboard/history'
+import { Route as DashboardChangelogRouteImport } from './routes/dashboard/changelog'
 import { Route as DashboardBillingRouteImport } from './routes/dashboard/billing'
 import { Route as BlogSlugRouteImport } from './routes/blog_/$slug'
 import { Route as AuthResetPasswordRouteImport } from './routes/_auth/reset-password'
@@ -131,6 +132,11 @@ const DashboardHistoryRoute = DashboardHistoryRouteImport.update({
   path: '/history',
   getParentRoute: () => DashboardRoute,
 } as any)
+const DashboardChangelogRoute = DashboardChangelogRouteImport.update({
+  id: '/changelog',
+  path: '/changelog',
+  getParentRoute: () => DashboardRoute,
+} as any)
 const DashboardBillingRoute = DashboardBillingRouteImport.update({
   id: '/billing',
   path: '/billing',
@@ -293,6 +299,7 @@ export interface FileRoutesByFullPath {
   '/reset-password': typeof AuthResetPasswordRoute
   '/blog/$slug': typeof BlogSlugRoute
   '/dashboard/billing': typeof DashboardBillingRoute
+  '/dashboard/changelog': typeof DashboardChangelogRoute
   '/dashboard/history': typeof DashboardHistoryRoute
   '/dashboard/search': typeof DashboardSearchRoute
   '/dashboard/service-test': typeof DashboardServiceTestRoute
@@ -335,6 +342,7 @@ export interface FileRoutesByTo {
   '/reset-password': typeof AuthResetPasswordRoute
   '/blog/$slug': typeof BlogSlugRoute
   '/dashboard/billing': typeof DashboardBillingRoute
+  '/dashboard/changelog': typeof DashboardChangelogRoute
   '/dashboard/history': typeof DashboardHistoryRoute
   '/dashboard/search': typeof DashboardSearchRoute
   '/dashboard/service-test': typeof DashboardServiceTestRoute
@@ -380,6 +388,7 @@ export interface FileRoutesById {
   '/_auth/reset-password': typeof AuthResetPasswordRoute
   '/blog_/$slug': typeof BlogSlugRoute
   '/dashboard/billing': typeof DashboardBillingRoute
+  '/dashboard/changelog': typeof DashboardChangelogRoute
   '/dashboard/history': typeof DashboardHistoryRoute
   '/dashboard/search': typeof DashboardSearchRoute
   '/dashboard/service-test': typeof DashboardServiceTestRoute
@@ -425,6 +434,7 @@ export interface FileRouteTypes {
     | '/reset-password'
     | '/blog/$slug'
     | '/dashboard/billing'
+    | '/dashboard/changelog'
     | '/dashboard/history'
     | '/dashboard/search'
     | '/dashboard/service-test'
@@ -467,6 +477,7 @@ export interface FileRouteTypes {
     | '/reset-password'
     | '/blog/$slug'
     | '/dashboard/billing'
+    | '/dashboard/changelog'
     | '/dashboard/history'
     | '/dashboard/search'
     | '/dashboard/service-test'
@@ -511,6 +522,7 @@ export interface FileRouteTypes {
     | '/_auth/reset-password'
     | '/blog_/$slug'
     | '/dashboard/billing'
+    | '/dashboard/changelog'
     | '/dashboard/history'
     | '/dashboard/search'
     | '/dashboard/service-test'
@@ -666,6 +678,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof DashboardHistoryRouteImport
       parentRoute: typeof DashboardRoute
     }
+    '/dashboard/changelog': {
+      id: '/dashboard/changelog'
+      path: '/changelog'
+      fullPath: '/dashboard/changelog'
+      preLoaderRoute: typeof DashboardChangelogRouteImport
+      parentRoute: typeof DashboardRoute
+    }
     '/dashboard/billing': {
       id: '/dashboard/billing'
       path: '/billing'
@@ -871,6 +890,7 @@ const AuthRouteWithChildren = AuthRoute._addFileChildren(AuthRouteChildren)
 
 interface DashboardRouteChildren {
   DashboardBillingRoute: typeof DashboardBillingRoute
+  DashboardChangelogRoute: typeof DashboardChangelogRoute
   DashboardHistoryRoute: typeof DashboardHistoryRoute
   DashboardSearchRoute: typeof DashboardSearchRoute
   DashboardServiceTestRoute: typeof DashboardServiceTestRoute
@@ -899,6 +919,7 @@ interface DashboardRouteChildren {
 
 const DashboardRouteChildren: DashboardRouteChildren = {
   DashboardBillingRoute: DashboardBillingRoute,
+  DashboardChangelogRoute: DashboardChangelogRoute,
   DashboardHistoryRoute: DashboardHistoryRoute,
   DashboardSearchRoute: DashboardSearchRoute,
   DashboardServiceTestRoute: DashboardServiceTestRoute,

apps/web/src/routes/_auth/register.tsx

@@ -236,7 +236,11 @@ function RegisterPage() {
       </form>
 
       <p className="text-center text-xs text-muted-foreground">
-        Kayıt olunca hemen VIN aramaya başlarsın · Spam göndermeyiz
+        Kayıt olarak{" "}
+        <Link to="/terms" className="font-medium underline hover:text-foreground">
+          kullanım koşulları
+        </Link>
+        'nı kabul etmiş sayılırsınız
       </p>
 
       <p className="text-center text-sm">

apps/web/src/routes/dashboard.tsx

@@ -1,3 +1,5 @@
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { SiteFooter } from "@/components/site-footer";
 import { TrialUrgencyBanner } from "@/components/trial-urgency-banner";
 import { useAuth } from "@/hooks/use-auth";
 import { api } from "@/lib/api-client";
@@ -28,6 +30,7 @@ import { Link, Outlet, createFileRoute, useNavigate, useRouterState } from "@tan
 import {
   BarChart3,
   BookOpen,
+  CalendarDays,
   ChevronsUpDown,
   Copy,
   CreditCard,
@@ -46,6 +49,7 @@ import {
   Settings,
   Share2,
   Shield,
+  Sparkles,
   Sun,
   Users,
 } from "lucide-react";
@@ -78,6 +82,7 @@ const accountItems: readonly NavItem[] = [
 ];
 
 const supportItems: readonly NavItem[] = [
+  { to: "/dashboard/changelog", labelKey: "nav.changelog", icon: CalendarDays },
   { to: "/contact", labelKey: "nav.contact", icon: Mail },
   { to: "/blog", labelKey: "nav.blog", icon: BookOpen },
 ];
@@ -237,7 +242,7 @@ function DashboardLayout() {
   const userEmail = user.email;
 
   // Current page title for the header — longest matching nav `to` wins.
-  const allNavItems = [...mainMenuItems, ...accountItems, ...adminItems];
+  const allNavItems = [...mainMenuItems, ...accountItems, ...supportItems, ...adminItems];
   const currentItem = allNavItems
     .filter((i) =>
       i.exact ? pathname === i.to : pathname === i.to || pathname.startsWith(`${i.to}/`),
@@ -245,6 +250,46 @@ function DashboardLayout() {
     .sort((a, b) => b.to.length - a.to.length)[0];
   const pageTitle = currentItem ? t(currentItem.labelKey) : t("nav.dashboard");
 
+  // Upgrade CTA shown above the profile — only for users without a paid plan.
+  function UpgradeBadge({
+    collapsed: isCollapsed,
+    onClick,
+  }: {
+    collapsed: boolean;
+    onClick?: () => void;
+  }) {
+    if (hasActivePlan) return null;
+
+    if (isCollapsed) {
+      return (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Link
+              to="/dashboard/subscription"
+              onClick={onClick}
+              aria-label={t("nav.upgradeAccount")}
+              className="mb-1 flex items-center justify-center rounded-lg border border-brand/30 bg-brand/10 p-2.5 text-brand transition-colors hover:bg-brand/15"
+            >
+              <Sparkles className="size-4" />
+            </Link>
+          </TooltipTrigger>
+          <TooltipContent side="right">{t("nav.upgradeAccount")}</TooltipContent>
+        </Tooltip>
+      );
+    }
+
+    return (
+      <Link
+        to="/dashboard/subscription"
+        onClick={onClick}
+        className="mb-2 flex items-center gap-2 rounded-lg border border-brand/30 bg-brand/10 px-3 py-2 text-xs font-semibold text-brand transition-colors hover:bg-brand/15"
+      >
+        <Sparkles className="size-4 shrink-0" />
+        <span>{t("nav.upgradeAccount")}</span>
+      </Link>
+    );
+  }
+
   // Profile menu — replaces the old "click-to-logout" trap with a real menu.
   function ProfileMenu({
     collapsed: isCollapsed,
@@ -406,6 +451,7 @@ function DashboardLayout() {
 
           {/* User Profile - Bottom */}
           <div className={`border-t border-border ${collapsed ? "p-2" : "p-3"}`}>
+            <UpgradeBadge collapsed={collapsed} />
             <ProfileMenu collapsed={collapsed} />
           </div>
         </aside>
@@ -450,6 +496,7 @@ function DashboardLayout() {
                   </Button>
                 </Link>
               )}
+              <LanguageSwitcher variant="dropdown" />
               <button
                 type="button"
                 onClick={toggleTheme}
@@ -470,18 +517,7 @@ function DashboardLayout() {
           </main>
 
           {/* Footer */}
-          <div className="border-t border-border px-6 py-3">
-            <p className="text-center text-xs text-muted-foreground/70">
-              &copy; {new Date().getFullYear()} Sase.tr ·{" "}
-              <Link to="/privacy" className="transition-colors hover:text-foreground">
-                Gizlilik Politikası
-              </Link>{" "}
-              ·{" "}
-              <Link to="/terms" className="transition-colors hover:text-foreground">
-                Kullanım Koşulları
-              </Link>
-            </p>
-          </div>
+          <SiteFooter variant="compact" />
         </div>
 
         {/* ─── Mobile Nav Drawer (Radix Dialog: focus-trap, Esc, scroll-lock) ─── */}
@@ -505,6 +541,7 @@ function DashboardLayout() {
               <SidebarNav onNavigate={() => setMobileOpen(false)} />
             </nav>
             <div className="border-t border-border p-3">
+              <UpgradeBadge collapsed={false} onClick={() => setMobileOpen(false)} />
               <ProfileMenu collapsed={false} onItemSelect={() => setMobileOpen(false)} />
             </div>
           </SheetContent>

apps/web/src/routes/dashboard/changelog.tsx

@@ -0,0 +1,14 @@
+import { ChangelogTab } from "@/components/settings/changelog-tab";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard/changelog")({
+  component: ChangelogPage,
+});
+
+function ChangelogPage() {
+  return (
+    <div className="mx-auto max-w-3xl">
+      <ChangelogTab />
+    </div>
+  );
+}

apps/web/src/routes/dashboard/settings.tsx

@@ -8,11 +8,31 @@ const SettingsContent = lazy(() =>
   })),
 );
 
+export const SETTINGS_TABS = [
+  "profile",
+  "preferences",
+  "security",
+  "connections",
+  "referral",
+  "account",
+] as const;
+export type SettingsTab = (typeof SETTINGS_TABS)[number];
+
+function isSettingsTab(value: unknown): value is SettingsTab {
+  return SETTINGS_TABS.includes(value as SettingsTab);
+}
+
 export const Route = createFileRoute("/dashboard/settings")({
+  // `tab` is optional so existing <Link to="/dashboard/settings"> need no search param.
+  validateSearch: (search: Record<string, unknown>): { tab?: SettingsTab } =>
+    isSettingsTab(search.tab) ? { tab: search.tab } : {},
   component: SettingsPage,
 });
 
 function SettingsPage() {
+  const { tab } = Route.useSearch();
+  const navigate = Route.useNavigate();
+
   return (
     <Suspense
       fallback={
@@ -23,7 +43,10 @@ function SettingsPage() {
         </div>
       }
     >
-      <SettingsContent />
+      <SettingsContent
+        tab={tab ?? "profile"}
+        onTabChange={(next) => navigate({ search: { tab: next as SettingsTab }, replace: true })}
+      />
     </Suspense>
   );
 }

apps/web/src/routes/index.tsx

@@ -1,3 +1,4 @@
+import { SiteFooter } from "@/components/site-footer";
 import { CarBrandLogo } from "@/components/ui/car-brand-logo";
 import { SmartAnimateText } from "@/components/ui/smart-animate-text";
 import { VinBrandIcon } from "@/components/ui/vin-brand-icon";
@@ -136,6 +137,7 @@ const BRANDS = [
 const FEATURES = [
   {
     icon: Search,
+    id: "feature-vin",
     title: "Şase Çözme",
     description:
       "Müşteri araç bilgisini tam bilmiyor mu? Şase numarasını girin — marka, model, motor, donanım saniyeler içinde karşınızda.",
@@ -170,6 +172,7 @@ const FEATURES = [
   },
   {
     icon: MousePointerClick,
+    id: "feature-schema",
     title: "İnteraktif Şema",
     description:
       "Parça kataloglarında kaybolmak yerine, tıklanabilir diyagramlarda parçayı görsel olarak bulun.",
@@ -189,6 +192,7 @@ const FEATURES = [
   },
   {
     icon: Database,
+    id: "feature-oem",
     title: "OEM Parça Numaraları",
     description:
       "Birden fazla katalogda çapraz sorgulama yaparak her zaman en güncel ve doğru OEM kodlarını sunar — yanlış parça, iade derdi tarih olur.",
@@ -1099,7 +1103,8 @@ export function HomePage() {
                 return (
                   <div
                     key={feature.title}
-                    className="overflow-hidden rounded-2xl bg-surface p-6 sm:p-8 lg:p-12"
+                    id={feature.id}
+                    className="scroll-mt-24 overflow-hidden rounded-2xl bg-surface p-6 sm:p-8 lg:p-12"
                   >
                     <div
                       className={`flex flex-col gap-8 lg:flex-row lg:items-center lg:gap-12 ${reversed ? "lg:flex-row-reverse" : ""}`}
@@ -1791,110 +1796,7 @@ export function HomePage() {
       </main>
 
       {/* ─── 13. FOOTER ───────────────────────────────────────────────── */}
-      <footer className="bg-background px-4 sm:px-6">
-        <div className="mx-auto max-w-7xl">
-          <div className="grid grid-cols-2 gap-8 py-16 sm:grid-cols-4">
-            {/* Brand */}
-            <div className="col-span-2 sm:col-span-1">
-              <span className="text-lg font-bold">Sase.tr</span>
-              <p className="mt-3 text-sm text-muted-foreground">
-                Şase çözme & orijinal yedek parça kataloğu platformu.
-              </p>
-              <p className="mt-2 text-sm text-muted-foreground/70">info@sase.tr</p>
-            </div>
-
-            {/* Product */}
-            <div>
-              <h4 className="text-sm font-semibold text-muted-foreground">Ürün</h4>
-              <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
-                <li>
-                  <a href="#features" className="transition hover:text-foreground">
-                    Şase Çözme
-                  </a>
-                </li>
-                <li>
-                  <a href="#features" className="transition hover:text-foreground">
-                    Parça Kataloğu
-                  </a>
-                </li>
-                <li>
-                  <a href="#features" className="transition hover:text-foreground">
-                    İnteraktif Şema
-                  </a>
-                </li>
-                <li>
-                  <Link to="/pricing" className="transition hover:text-foreground">
-                    Fiyatlar
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            {/* Company */}
-            <div>
-              <h4 className="text-sm font-semibold text-muted-foreground">Şirket</h4>
-              <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
-                <li>
-                  <Link to="/about" className="transition hover:text-foreground">
-                    Hakkımızda
-                  </Link>
-                </li>
-                <li>
-                  <Link to="/blog" className="transition hover:text-foreground">
-                    Blog
-                  </Link>
-                </li>
-                <li>
-                  <Link to="/contact" className="transition hover:text-foreground">
-                    İletişim
-                  </Link>
-                </li>
-              </ul>
-            </div>
-
-            {/* Legal */}
-            <div>
-              <h4 className="text-sm font-semibold text-muted-foreground">Yasal</h4>
-              <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
-                <li>
-                  <Link to="/privacy" className="transition hover:text-foreground">
-                    Gizlilik Politikası
-                  </Link>
-                </li>
-                <li>
-                  <Link to="/terms" className="transition hover:text-foreground">
-                    Kullanım Koşulları
-                  </Link>
-                </li>
-                <li>
-                  <Link to="/kvkk" className="transition hover:text-foreground">
-                    KVKK
-                  </Link>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <Separator className="bg-border" />
-
-          <div className="flex flex-col items-center justify-between gap-4 py-6 sm:flex-row">
-            <div className="flex flex-col items-center gap-3 sm:flex-row">
-              <p className="text-sm text-muted-foreground/70">
-                &copy; {new Date().getFullYear()} Sase.tr. Tüm hakları saklıdır.
-              </p>
-              <div className="flex items-center gap-2 text-sm text-muted-foreground/70">
-                <span className="size-2 rounded-full bg-brand" />
-                Tüm servisler aktif
-              </div>
-            </div>
-            <div className="flex items-center gap-4 text-muted-foreground/70">
-              <a href="mailto:info@sase.tr" className="text-sm transition hover:text-foreground">
-                info@sase.tr
-              </a>
-            </div>
-          </div>
-        </div>
-      </footer>
+      <SiteFooter />
     </div>
   );
 }