Skip to content

UI update #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mozaddedalfeshani merged 4 commits into from
Aug 18, 2025
Merged

UI update #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a012e41
Enhance ConvertComponent with file preview functionality; integrate p…
mozaddedalfeshani Aug 18, 2025
8d7dcee
Remove author name from homepage and update description for clarity a…
mozaddedalfeshani Aug 18, 2025
5122a30
Revamp homepage layout and content to emphasize file conversion and t…
mozaddedalfeshani Aug 18, 2025
0a049f3
Update homepage and navbar styles to enhance visual consistency; modi…
mozaddedalfeshani Aug 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 43 additions & 32 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,40 +26,51 @@ export default function Home() {
{/* 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-6">
<h1 className="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white">
Transformate
<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-blue-500 to-teal-500 dark:from-orange-400 dark:to-pink-400 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-blue-900 to-teal-900 dark:from-white dark:via-orange-200 dark:to-pink-200 bg-clip-text text-transparent leading-tight">
Transform Your Files
<br />
<span className="bg-gradient-to-r from-blue-500 to-teal-500 dark:from-orange-400 dark:to-pink-400 bg-clip-text text-transparent">
& Transcribe Videos
</span>
</h1>
<p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300">
by Muradian
</p>
<p className="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
The most powerful online file converter and video transcription tool.
Transform your files instantly and free.

{/* 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 and video transcription tool. Transform images, videos,
and audio files with cutting-edge technology. Plus, get AI-powered video transcriptions instantly.
</p>

{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-8">
<Link href="/convert">
<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">
className="bg-gradient-to-r from-blue-500 to-teal-500 hover:from-blue-600 hover:to-teal-600 dark:from-orange-400 dark:to-pink-400 dark:hover:from-orange-500 dark:hover:to-pink-500 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" />
File Converter
Start Converting Now
</Button>
</Link>
<Link href="/transcribe">
<Button
size="lg"
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-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">
className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 dark:from-orange-500 dark:to-pink-500 dark:hover:from-orange-600 dark:hover:to-pink-600 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">
<FiMic className="mr-2 h-5 w-5" />
Video Transcription
Transcribe Videos
</Button>
</Link>
<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">
className="border-2 border-blue-200 dark:border-orange-800 px-8 py-6 text-lg font-semibold rounded-xl hover:bg-blue-50 dark:hover:bg-orange-900/20 transition-all duration-300">
View Features
</Button>
</div>
Expand All @@ -81,7 +92,7 @@ export default function Home() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<Link href="/convert">
<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 cursor-pointer">
<div className="bg-gradient-to-br from-purple-500 to-blue-500 w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-6">
<div className="bg-gradient-to-br from-blue-500 to-teal-500 dark:from-orange-400 dark:to-pink-400 w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-6">
<FiUploadCloud className="h-8 w-8 text-white" />
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">File Converter</h3>
Expand All @@ -92,7 +103,7 @@ export default function Home() {
</Link>
<Link href="/transcribe">
<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 cursor-pointer">
<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">
<div className="bg-gradient-to-br from-green-500 to-emerald-500 dark:from-orange-500 dark:to-pink-500 w-16 h-16 rounded-xl flex items-center justify-center mx-auto mb-6">
<FiMic className="h-8 w-8 text-white" />
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">Video Transcription</h3>
Expand Down Expand Up @@ -121,7 +132,7 @@ export default function Home() {
<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">
<div className="bg-gradient-to-br from-blue-500 to-teal-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">
Expand All @@ -135,7 +146,7 @@ export default function Home() {

{/* 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">
<div className="bg-gradient-to-br from-green-500 to-emerald-500 dark:from-orange-500 dark:to-pink-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">
Expand All @@ -149,7 +160,7 @@ export default function Home() {

{/* 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">
<div className="bg-gradient-to-br from-orange-500 to-red-500 dark:from-orange-500 dark:to-pink-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">
Expand All @@ -163,7 +174,7 @@ export default function Home() {

{/* 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">
<div className="bg-gradient-to-br from-blue-500 to-teal-500 dark:from-orange-500 dark:to-pink-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">
Expand All @@ -177,8 +188,8 @@ export default function Home() {

{/* 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 className="bg-gradient-to-br from-blue-500 to-cyan-500 dark:from-orange-500 dark:to-pink-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">
Browser Based
Expand All @@ -191,8 +202,8 @@ export default function Home() {

{/* 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 className="bg-gradient-to-br from-blue-500 to-teal-500 dark:from-orange-500 dark:to-pink-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">
High Quality
Expand Down Expand Up @@ -222,7 +233,7 @@ export default function Home() {
<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">
<div className="bg-gradient-to-br from-blue-500 to-teal-500 dark:from-orange-500 dark:to-pink-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">
Expand All @@ -235,7 +246,7 @@ export default function Home() {

{/* 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">
<div className="bg-gradient-to-br from-green-500 to-emerald-500 dark:from-orange-500 dark:to-pink-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">
Expand Down Expand Up @@ -264,7 +275,7 @@ export default function Home() {
</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">
<section className="py-20 bg-gradient-to-br from-blue-50 to-teal-50 dark:from-orange-900/10 dark:to-pink-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">
Expand All @@ -278,7 +289,7 @@ export default function Home() {
<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">
<div className="bg-gradient-to-br from-blue-500 to-teal-500 dark:from-orange-500 dark:to-pink-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">
Expand All @@ -297,7 +308,7 @@ export default function Home() {

{/* 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">
<div className="bg-gradient-to-br from-blue-500 to-cyan-500 dark:from-orange-500 dark:to-pink-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">
Expand All @@ -316,7 +327,7 @@ export default function Home() {

{/* 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">
<div className="bg-gradient-to-br from-green-500 to-emerald-500 dark:from-orange-500 dark:to-pink-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">
Expand Down Expand Up @@ -349,8 +360,8 @@ export default function Home() {
</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" />
className="bg-gradient-to-r from-blue-500 to-teal-500 hover:from-blue-600 hover:to-teal-600 dark:from-orange-400 dark:to-pink-400 dark:hover:from-orange-500 dark:hover:to-pink-500 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="h-6 w-6" />
Get Started for Free
</Button>
</div>
Expand Down
Loading