From 52cceec288712f53410c8b98c3dbfce38a28b088 Mon Sep 17 00:00:00 2001
From: Kokila-chandrakar <payalchandrakar327@gmail.com>
Date: Fri, 29 May 2026 11:37:58 +0000
Subject: [PATCH] feat: enhance UI styling for upload, presets, export, and
 footer sections

---
 src/app/globals.css               | 29 +++++++++++++++++++++++++++++
 src/components/ExportOverlay.tsx  |  4 +++-
 src/components/ExportSettings.tsx |  8 ++++----
 src/components/Footer.tsx         |  8 ++++----
 src/components/FramingControl.tsx |  6 ++----
 src/components/PresetSelector.tsx | 12 ++++++------
 src/components/VideoEditor.tsx    |  6 +++---
 7 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 3c1540e0..769db86a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -98,4 +98,33 @@ body {
   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;
 }
\ No newline at end of file
diff --git a/src/components/ExportOverlay.tsx b/src/components/ExportOverlay.tsx
index 75fadca1..0422e722 100644
--- a/src/components/ExportOverlay.tsx
+++ b/src/components/ExportOverlay.tsx
@@ -70,6 +70,8 @@ export default function ExportOverlay({ status, progress, onCancel }: Props) {
         tabIndex={-1}
         className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-white/95 dark:bg-black/70 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"
@@ -127,7 +129,7 @@ export default function ExportOverlay({ status, progress, onCancel }: Props) {
                 <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>
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
index ddc29a85..84ee0309 100644
--- a/src/components/ExportSettings.tsx
+++ b/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
@@ -163,7 +163,7 @@ export default function ExportSettings({
               }
               aria-label="Enable video stabilization"
               aria-checked={recipe.stabilization}
-              className="w-full accent-film-600 cursor-pointer"
+              className="w-full accent-purple-500 cursor-pointer hover:accent-blue-500 transition-all duration-300"
             />
           </span>
         </div>
@@ -186,6 +186,6 @@ export default function ExportSettings({
           </span>
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d055027c..7bbf7987 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -16,7 +16,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 */}
         <div className="md:col-span-5 space-y-6">
@@ -59,19 +59,19 @@ export default function Footer() {
               href="https://github.com/magic-peach/reframe"
               target="_blank"
               rel="noopener"
-              className="opacity-70 hover:opacity-100 hover:text-red-400 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              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"
             >
               GitHub
             </a>
             <Link
               href="/contact"
-              className="opacity-70 hover:opacity-100 hover:text-red-400 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              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-red-400 hover:scale-110 transition-all duration-500 ease-in-out w-fit flex items-center gap-2 group"
+              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"
             >
               Privacy Policy
             </Link>
diff --git a/src/components/FramingControl.tsx b/src/components/FramingControl.tsx
index 75d93bc0..4abd46b2 100644
--- a/src/components/FramingControl.tsx
+++ b/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"/>
diff --git a/src/components/PresetSelector.tsx b/src/components/PresetSelector.tsx
index c4bc7bb6..24910410 100644
--- a/src/components/PresetSelector.tsx
+++ b/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",
           )}
         >
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 28ef775e..b2a19053 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -35,15 +35,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>