From ac356d3b3998e9e406b296eb3342be99a049903d Mon Sep 17 00:00:00 2001
From: mozaddedalfeshani <mozaddedalfeshanimurad@gmail.com>
Date: Wed, 9 Jul 2025 13:58:11 +0600
Subject: [PATCH] Revamp homepage layout and styling for MuradianConvertor,
 introducing a hero section, enhanced file upload area, and detailed features
 overview. Added custom animations, improved accessibility, and updated
 supported file types display.

---
 app/globals.css | 151 ++++++++++++++++++---
 app/page.tsx    | 346 +++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 463 insertions(+), 34 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 1ccdc44..0214309 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -9,69 +9,184 @@
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
 }
 
+/* Custom animations and effects */
+@keyframes blob {
+  0% {
+    transform: translate(0px, 0px) scale(1);
+  }
+
+  33% {
+    transform: translate(30px, -50px) scale(1.1);
+  }
+
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+
+  100% {
+    transform: translate(0px, 0px) scale(1);
+  }
+}
+
+.animate-blob {
+  animation: blob 7s infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+
+/* Grid pattern background */
+.bg-grid-pattern {
+  background-image:
+    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+/* Dark mode grid pattern */
+.dark .bg-grid-pattern {
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Enhanced hover effects */
+@layer utilities {
+  .hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .hover-lift:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  }
+
+  .dark .hover-lift:hover {
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* Gradient text animation */
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animate-gradient {
+  background-size: 200% 200%;
+  animation: gradient 3s ease infinite;
+}
+
+/* Custom focus styles */
+.focus-ring:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5);
+}
+
+/* Loading shimmer effect */
+@keyframes shimmer {
+  0% {
+    background-position: -200px 0;
+  }
+
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+.shimmer {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200px 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.dark .shimmer {
+  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
+  background-size: 200px 100%;
+}
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index eceb6df..9481e78 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,24 +1,338 @@
 // imports
 import Dropzone from "@/components/dropzone";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  FiUploadCloud,
+  FiZap,
+  FiShield,
+  FiDownload,
+  FiFileText,
+  FiVideo,
+  FiMusic,
+  FiImage,
+} from "react-icons/fi";
+import {
+  MdOutlineSpeed,
+  MdOutlineCloudDone,
+  MdOutlineAutoFixHigh,
+} from "react-icons/md";
 
 export default function Home() {
   return (
-    <div className="space-y-16 pb-8">
-      {/* Title + Desc */}
-      <div className="space-y-6">
-        <h1 className="text-3xl md:text-5xl font-medium text-center">
-          Free Unlimited File Converter
-        </h1>
-        <p className="text-muted-foreground text-md md:text-lg text-center md:px-24 xl:px-44 2xl:px-52">
-          Unleash your creativity with MuradianConvertor – the ultimate online
-          tool for unlimited and free multimedia conversion. Transform images,
-          audio, and videos effortlessly, without restrictions. Start converting
-          now and elevate your content like never before!
-        </p>
-      </div>
-
-      {/* Upload Box */}
-      <Dropzone />
+    <div className="min-h-screen">
+            {/* Hero Section */}
+      <section className="relative overflow-hidden">
+        <div className="container mx-auto px-4 py-24 lg:py-32">
+          <div className="text-center space-y-8 max-w-5xl mx-auto">
+            {/* Badge */}
+            <div className="flex justify-center">
+              <Badge className="bg-gradient-to-r from-purple-600 to-blue-600 text-white border-0 px-4 py-2 text-sm font-medium rounded-full">
+                ✨ 100% Free • No Limits • No Registration Required
+              </Badge>
+            </div>
+
+            {/* Main Heading */}
+            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold bg-gradient-to-r from-gray-900 via-purple-900 to-violet-900 dark:from-white dark:via-purple-200 dark:to-violet-200 bg-clip-text text-transparent leading-tight">
+              Transform Your Files
+              <br />
+              <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
+                Instantly & Free
+              </span>
+            </h1>
+
+            {/* Subtitle */}
+            <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
+              The most powerful online file converter. Transform images, videos,
+              and audio files with cutting-edge technology. No registration, no
+              limits, no watermarks.
+            </p>
+
+            {/* CTA Buttons */}
+            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-8">
+              <Button
+                size="lg"
+                className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white border-0 px-8 py-6 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+                <FiUploadCloud className="mr-2 h-5 w-5" />
+                Start Converting Now
+              </Button>
+              <Button
+                variant="outline"
+                size="lg"
+                className="border-2 border-purple-200 dark:border-purple-800 px-8 py-6 text-lg font-semibold rounded-xl hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all duration-300">
+                View Features
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* File Upload Section */}
+      <section className="py-20 px-4">
+        <div className="container mx-auto max-w-4xl">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
+              Drop Your Files & Watch The Magic
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-300">
+              Drag and drop your files below, or click to browse
+            </p>
+          </div>
+          <Dropzone />
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 bg-gray-50 dark:bg-gray-900/50">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
+              Why Choose MuradianConvertor?
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+              Built with cutting-edge technology to provide the best file
+              conversion experience
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
+            {/* Feature 1 */}
+            <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
+              <div className="bg-gradient-to-br from-purple-500 to-blue-500 w-14 h-14 rounded-xl flex items-center justify-center mb-6">
+                <FiZap className="h-7 w-7 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                Lightning Fast
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                Powered by WebAssembly and FFmpeg for ultra-fast processing
+                directly in your browser.
+              </p>
+            </div>
+
+            {/* Feature 2 */}
+            <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
+              <div className="bg-gradient-to-br from-green-500 to-emerald-500 w-14 h-14 rounded-xl flex items-center justify-center mb-6">
+                <FiShield className="h-7 w-7 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                100% Secure
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                All processing happens locally in your browser. Your files never
+                leave your device.
+              </p>
+            </div>
+
+            {/* Feature 3 */}
+            <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
+              <div className="bg-gradient-to-br from-orange-500 to-red-500 w-14 h-14 rounded-xl flex items-center justify-center mb-6">
+                <MdOutlineSpeed className="h-7 w-7 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                No Limits
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                Convert unlimited files with no size restrictions, registration,
+                or hidden fees.
+              </p>
+            </div>
+
+            {/* Feature 4 */}
+            <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
+              <div className="bg-gradient-to-br from-pink-500 to-purple-500 w-14 h-14 rounded-xl flex items-center justify-center mb-6">
+                <FiImage className="h-7 w-7 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                Multiple Formats
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                Support for 50+ file formats including images, videos, and audio
+                files.
+              </p>
+            </div>
+
+            {/* Feature 5 */}
+            <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
+              <div className="bg-gradient-to-br from-blue-500 to-cyan-500 w-14 h-14 rounded-xl flex items-center justify-center mb-6">
+                <MdOutlineCloudDone className="h-7 w-7 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                Browser Based
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                No software installation required. Works perfectly in any modern
+                web browser.
+              </p>
+            </div>
+
+            {/* Feature 6 */}
+            <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
+              <div className="bg-gradient-to-br from-indigo-500 to-purple-500 w-14 h-14 rounded-xl flex items-center justify-center mb-6">
+                <MdOutlineAutoFixHigh className="h-7 w-7 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                High Quality
+              </h3>
+              <p className="text-gray-600 dark:text-gray-300">
+                Advanced algorithms ensure optimal quality retention during
+                conversion process.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section className="py-20">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
+              How It Works
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
+              Converting your files is as easy as 1-2-3
+            </p>
+          </div>
+
+          <div className="max-w-4xl mx-auto">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {/* Step 1 */}
+              <div className="text-center">
+                <div className="bg-gradient-to-br from-purple-500 to-blue-500 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
+                  <FiUploadCloud className="h-10 w-10 text-white" />
+                </div>
+                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                  1. Upload Files
+                </h3>
+                <p className="text-gray-600 dark:text-gray-300">
+                  Drag and drop your files or click to browse from your device
+                </p>
+              </div>
+
+              {/* Step 2 */}
+              <div className="text-center">
+                <div className="bg-gradient-to-br from-green-500 to-emerald-500 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
+                  <MdOutlineAutoFixHigh className="h-10 w-10 text-white" />
+                </div>
+                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                  2. Choose Format
+                </h3>
+                <p className="text-gray-600 dark:text-gray-300">
+                  Select your desired output format from our extensive list
+                </p>
+              </div>
+
+              {/* Step 3 */}
+              <div className="text-center">
+                <div className="bg-gradient-to-br from-orange-500 to-red-500 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
+                  <FiDownload className="h-10 w-10 text-white" />
+                </div>
+                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">
+                  3. Download
+                </h3>
+                <p className="text-gray-600 dark:text-gray-300">
+                  Get your converted files instantly with just one click
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Supported Formats Section */}
+      <section className="py-20 bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-900/10 dark:to-blue-900/10">
+        <div className="container mx-auto px-4">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
+              Supported File Types
+            </h2>
+            <p className="text-lg text-gray-600 dark:text-gray-300">
+              We support all the popular file formats you need
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+            {/* Images */}
+            <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg text-center">
+              <div className="bg-gradient-to-br from-pink-500 to-purple-500 w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-6">
+                <FiImage className="h-8 w-8 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                Images
+              </h3>
+              <div className="flex flex-wrap gap-2 justify-center">
+                {["JPG", "PNG", "GIF", "WebP", "BMP", "TIFF", "SVG", "ICO"].map(
+                  (format) => (
+                    <Badge key={format} variant="secondary" className="text-xs">
+                      {format}
+                    </Badge>
+                  )
+                )}
+              </div>
+            </div>
+
+            {/* Videos */}
+            <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg text-center">
+              <div className="bg-gradient-to-br from-blue-500 to-cyan-500 w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-6">
+                <FiVideo className="h-8 w-8 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                Videos
+              </h3>
+              <div className="flex flex-wrap gap-2 justify-center">
+                {["MP4", "AVI", "MOV", "WMV", "MKV", "FLV", "WebM", "3GP"].map(
+                  (format) => (
+                    <Badge key={format} variant="secondary" className="text-xs">
+                      {format}
+                    </Badge>
+                  )
+                )}
+              </div>
+            </div>
+
+            {/* Audio */}
+            <div className="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-lg text-center">
+              <div className="bg-gradient-to-br from-green-500 to-emerald-500 w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-6">
+                <FiMusic className="h-8 w-8 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
+                Audio
+              </h3>
+              <div className="flex flex-wrap gap-2 justify-center">
+                {["MP3", "WAV", "FLAC", "AAC", "OGG", "WMA", "M4A"].map(
+                  (format) => (
+                    <Badge key={format} variant="secondary" className="text-xs">
+                      {format}
+                    </Badge>
+                  )
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20">
+        <div className="container mx-auto px-4 text-center">
+          <div className="max-w-3xl mx-auto">
+            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
+              Ready to Transform Your Files?
+            </h2>
+            <p className="text-xl text-gray-600 dark:text-gray-300 mb-8">
+              Join thousands of users who trust MuradianConvertor for their file
+              conversion needs
+            </p>
+            <Button
+              size="lg"
+              className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white border-0 px-12 py-6 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+              <FiUploadCloud className="mr-2 h-6 w-6" />
+              Get Started for Free
+            </Button>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }