feat: improve UI styling for key sections

src/app/globals.css

@@ -142,6 +142,38 @@ textarea:focus {
 }
 
 :focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+.glass-card {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.gradient-border {
+  position: relative;
+}
+
+.gradient-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(
+    135deg,
+    rgba(168, 85, 247, 0.5),
+    rgba(59, 130, 246, 0.4)
+  );
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
   outline: 0;
   box-shadow: 0 0 0 3px var(--accent-muted);
   border-radius: var(--radius);

src/components/ExportOverlay.tsx

@@ -94,6 +94,8 @@ export default function ExportOverlay({ status, progress, exportStartedAt, onCan
         tabIndex={-1}
         className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-[var(--bg)] backdrop-blur-sm"
       >
+        <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-blue-500/10 pointer-events-none animate-pulse" />
+
         <div
           className="text-center space-y-6 max-w-xs px-6 animate-fade-in"
           aria-live="polite"
@@ -154,7 +156,7 @@ export default function ExportOverlay({ status, progress, exportStartedAt, onCan
                 <button
                   type="button"
                   onClick={() => onCancel?.()}
-                  className="inline-flex items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-sm font-semibold text-[var(--text)] transition-colors hover:opacity-95 active:scale-[0.98]"
+                  className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-purple-600 to-blue-600 px-5 py-3 font-semibold text-white transition-all duration-300 hover:scale-[1.02] hover:shadow-[0_0_30px_rgba(139,92,246,0.4)] active:scale-[0.98]"
                 >
                   Cancel Export
                 </button>

src/components/ExportSettings.tsx

@@ -43,7 +43,7 @@ export default function ExportSettings({
     );
 
   return (
-    <>
+      <div className="glass-card rounded-3xl p-6 space-y-6 border border-white/10 bg-white/5 backdrop-blur-xl">
       <div>
         <div className="flex items-center justify-between mb-2">
           <label
@@ -87,7 +87,7 @@ export default function ExportSettings({
           aria-describedby="quality-description"
           aria-label="Video export quality (CRF)"
           aria-valuetext={`${label} quality, CRF value ${recipe.quality}`}
-          className="w-full accent-film-600 cursor-pointer"
+          className="w-full accent-purple-500 cursor-pointer hover:accent-blue-500 transition-all duration-300"
         />
 
         <div
@@ -162,6 +162,8 @@ export default function ExportSettings({
                 })
               }
               aria-label="Enable video stabilization"
+              aria-checked={recipe.stabilization}
+              className="w-full accent-purple-500 cursor-pointer hover:accent-blue-500 transition-all duration-300"
               className="w-full accent-film-600 cursor-pointer"
             />
           </span>
@@ -184,6 +186,7 @@ export default function ExportSettings({
           </span>
         </div>
       </div>
+    </div>
       <div>
         <div className="flex items-center justify-between mb-1">
           <label

src/components/Footer.tsx

@@ -8,7 +8,7 @@ export default function Footer() {
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
-    <footer className="w-full border-t border-[var(--border)] bg-[var(--bg)] text-[var(--text)] px-6 py-16 mt-20 transition-colors duration-300">
+    <footer className="w-full border-t border-white/10 bg-black/20 backdrop-blur-xl text-[var(--text)] px-6 py-16 mt-20 transition-colors duration-300">
       <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-8">
 
         {/* Brand Section */}
@@ -38,11 +38,28 @@ export default function Footer() {
         <div className="md:col-span-3 space-y-5">
           <h3 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-40">Navigation</h3>
           <nav className="flex flex-col gap-3 text-sm">
+
+            <a
+              href="https://github.com/magic-peach/reframe"
+              target="_blank"
+              rel="noopener"
+              className="opacity-70 hover:opacity-100 hover:text-purple-300 transition-colors duration-200 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+            >
             <a href="https://github.com/magic-peach/reframe" target="_blank" rel="noopener" className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:translate-x-1 transition-all duration-300 w-fit flex items-center gap-2 group">
               <Github size={14} className="group-hover:scale-110 transition-transform duration-300" />
               GitHub
               <ExternalLink size={10} className="opacity-0 group-hover:opacity-60 transition-opacity duration-300" />
             </a>
+            <Link
+              href="/contact"
+              className="opacity-70 hover:opacity-100 hover:text-purple-300 transition-colors duration-200 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+            >
+              Contact
+            </Link>
+            <Link
+              href="/privacy"
+              className="opacity-70 hover:opacity-100 hover:text-purple-300 transition-colors duration-200 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+            >
             <Link href="/contact" className="opacity-70 hover:opacity-100 hover:text-[var(--accent)] hover:translate-x-1 transition-all duration-300 w-fit flex items-center gap-2 group">
               <Mail size={14} className="group-hover:scale-110 transition-transform duration-300" />
               Contact

src/components/FramingControl.tsx

@@ -22,10 +22,8 @@ export default function FramingControl({ recipe, onChange }: Props) {
             title={mode === "fit" ? "Fit: Adds black bars (letterbox) to fill empty space" : "Fill: Crops the video to fill the entire frame"}
             onClick={() => onChange({ framing: mode })}
             className={cn(
-              "flex-1 min-h-[44px] min-w-[44px] flex flex-col items-center justify-center gap-2 py-4 rounded-lg border transition-all duration-150 hover:scale-[1.02] active:scale-[0.98]",
-              active
-                ? "border-film-500 bg-film-50 text-film-700"
-                : "border-[var(--border)] text-[var(--muted)] hover:border-film-300 bg-[var(--surface)]"
+              "rounded-2xl border border-white/10 bg-white/5 backdrop-blur-lg transition-all duration-300 hover:scale-[1.03] hover:border-blue-400 hover:bg-white/10 hover:shadow-[0_0_25px_rgba(59,130,246,0.25)]",
+              active && "border-purple-400 bg-gradient-to-r from-purple-600/20 to-blue-600/20"
             )}
           >
             <Icon size={18} aria-hidden="true" />

src/components/PresetSelector.tsx

@@ -152,9 +152,9 @@ export default function PresetSelector({ recipe, onChange }: Props) {
               aria-pressed={isActive}
               onClick={() => onChange({ preset })}
               className={cn(
-                "flex flex-col items-center justify-center gap-1 py-2 px-1 rounded-lg border text-center transition-all duration-150 cursor-pointer hover:scale-[1.04] active:scale-[0.97]",
+                "relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl px-4 py-3 flex flex-col items-center justify-center gap-1 text-center transition-all duration-300 hover:scale-[1.02] hover:border-purple-400 hover:bg-white/10 hover:shadow-[0_0_25px_rgba(168,85,247,0.25)]",
                 isActive
-                  ? "border-film-500 bg-film-50 text-film-600"
+                  ? "border-purple-400 bg-gradient-to-r from-purple-600/30 to-blue-600/30 shadow-[0_0_25px_rgba(168,85,247,0.35)] text-white"
                   : "border-[var(--border)] bg-[var(--surface)] text-[var(--muted)] hover:border-film-300 hover:bg-film-50/30 hover:text-[var(--text)]",
               )}
             >
@@ -201,9 +201,9 @@ export default function PresetSelector({ recipe, onChange }: Props) {
                 aria-label={`${preset.label.replaceAll(":", " is to ")} output ratio`}
                 aria-pressed={active}
                 className={cn(
-                  "min-h-[44px] min-w-[44px] flex flex-col items-center justify-center gap-1.5 p-3 rounded-lg border text-center transition-all duration-150 cursor-pointer hover:scale-[1.02] active:scale-[0.98]",
+                  "relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl min-h-[44px] min-w-[44px] flex flex-col items-center justify-center gap-1.5 px-4 py-3 text-center transition-all duration-300 hover:scale-[1.02] hover:border-purple-400 hover:bg-white/10 hover:shadow-[0_0_25px_rgba(168,85,247,0.25)]",
                   active
-                    ? "border-film-500 bg-film-50"
+                    ? "border-purple-400 bg-gradient-to-r from-purple-600/30 to-blue-600/30 shadow-[0_0_25px_rgba(168,85,247,0.35)]"
                     : "border-[var(--border)] bg-[var(--surface)] hover:border-film-300 hover:bg-film-50/30",
                 )}
               >
@@ -239,9 +239,9 @@ export default function PresetSelector({ recipe, onChange }: Props) {
           aria-pressed={recipe.preset === "custom"}
           onClick={() => handlePresetSelect("custom")}
           className={cn(
-            "min-h-[44px] min-w-[44px] flex flex-col items-center justify-center gap-1.5 p-3 rounded-lg border text-center transition-all duration-150 cursor-pointer hover:scale-[1.02] active:scale-[0.98]",
+            "relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl min-h-[44px] min-w-[44px] flex flex-col items-center justify-center gap-1.5 px-4 py-3 text-center transition-all duration-300 hover:scale-[1.02] hover:border-purple-400 hover:bg-white/10 hover:shadow-[0_0_25px_rgba(168,85,247,0.25)]",
             recipe.preset === "custom"
-              ? "border-film-500 bg-film-50"
+              ? "border-purple-400 bg-gradient-to-r from-purple-600/30 to-blue-600/30 shadow-[0_0_25px_rgba(168,85,247,0.35)]"
               : "border-[var(--border)] bg-[var(--surface)] hover:border-film-300 hover:bg-film-50/30",
           )}
         >

src/components/VideoEditor.tsx

@@ -37,15 +37,15 @@ interface SectionProps {
 function Section({ icon, title, children, delay = 0 }: SectionProps) {
   return (
     <div
-      className="space-y-3 animate-fade-in"
+      className="space-y-4 animate-fade-in rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-5 transition-all duration-300 hover:border-purple-400/40 hover:bg-white/10 hover:shadow-[0_0_30px_rgba(168,85,247,0.15)]"
       style={{ animationDelay: `${delay}ms` }}
     >
       <div className="flex items-center gap-2">
         <span className="text-film-500 opacity-80">{icon}</span>
-        <h3 className="text-sm font-heading font-bold uppercase tracking-widest text-[var(--muted)]">
+        <h3 className="text-sm font-heading font-bold uppercase tracking-widest text-slate-200">
           {title}
         </h3>
-        <div className="flex-1 h-px bg-[var(--border)]" />
+        <div className="flex-1 h-px bg-gradient-to-r from-purple-500/50 to-transparent" />
       </div>
       {children}
     </div>