laniging updated

Author: SwarnenduG07

README.md

@@ -1,6 +1,26 @@
-# IMAGE-MAGIC
- 
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# ImageMagic
+
+ImageMagic is a Next.js-based web application for AI-powered image transformations with integrated payments.
+
+## Overview
+
+Built with modern web technologies:
+- Next.js 14 with App Router
+- React 18 and TypeScript
+- Clerk Authentication
+- MongoDB Database
+- Cloudinary Image Processing
+- Stripe Payments
+- Tailwind CSS & shadcn/ui
+- Framer Motion animations
+
+## Quick Start
+
+1. Clone the repository:
+```bash
+git clone https://github.com/SwarnenduG07/ImageMagic.git
+cd imagemagic
+```
 
 ## Getting Started
 

app/(landing)/page.tsx

@@ -5,10 +5,22 @@ import Testimonials from "@/components/Testimonials"
 
 const Landing = () => {
     return (
-        <div className="">
-            <HomeNavBar/>
-            <LandingContent />  
-            <Testimonials />
+        <div className="min-h-screen bg-[#030712] relative">
+            {/* Dotted background pattern */}
+            <div className="absolute inset-0" style={{
+                backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0)`,
+                backgroundSize: '40px 40px'
+            }} />
+            
+            {/* Gradient overlay */}
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent via-[#030712]/50 to-[#030712]" />
+            
+            {/* Content */}
+            <div className="relative z-10">
+                <HomeNavBar/>
+                <LandingContent />  
+                <Testimonials />
+            </div>
         </div>
     )
 }

components/LandingContent.tsx

@@ -5,25 +5,33 @@ import ShinyButton from "./magicui/shiny-button"
 import Link from "next/link"
 import { SparklesCore } from "./ui/sparkles"
 
+const features = [
+  { title: "Background Removal", description: "Perfect cuts in seconds" },
+  { title: "Object Removal", description: "Clean any unwanted elements" },
+  { title: "Smart Recolor", description: "Change colors naturally" },
+  { title: "Auto Resize", description: "Perfect for any platform" }
+];
+
 const LandingContent = () => {
   return (
     <div className="min-h-screen relative w-full flex flex-col items-center justify-center">
+      {/* Updated background effects */}
       <div className="absolute inset-0 max-w-7xl mx-auto">
         <motion.div 
           animate={{
             y: [-10, 10, -10],
             rotate: [0, 5, 0],
           }}
           transition={{ duration: 5, repeat: Infinity }}
-          className="absolute top-1/4 left-10 w-24 h-24 bg-gradient-to-br from-purple-500/20 to-cyan-500/20 rounded-full blur-xl"
+          className="absolute top-1/4 left-10 w-24 h-24 bg-gradient-to-br from-purple-500/10 to-cyan-500/10 rounded-full blur-2xl"
         />
         <motion.div 
           animate={{
             y: [10, -10, 10],
             rotate: [0, -5, 0],
           }}
           transition={{ duration: 7, repeat: Infinity }}
-          className="absolute bottom-1/4 right-10 w-32 h-32 bg-gradient-to-br from-blue-500/20 to-violet-500/20 rounded-full blur-xl"
+          className="absolute bottom-1/4 right-10 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-violet-500/10 rounded-full blur-2xl"
         />
       </div>
 
@@ -32,22 +40,26 @@ const LandingContent = () => {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
-          className="glassmorphism p-8 rounded-2xl backdrop-blur-xl border border-white/10 hover:shadow-sm cursor-pointer hover:shadow-sky-400"
+          className="glassmorphism p-8 rounded-2xl backdrop-blur-sm border border-white/5 bg-black/20 hover:shadow-lg hover:shadow-purple-500/10 transition-all duration-300"
         >
           <h1 className="text-6xl md:text-7xl font-bold tracking-tight">
             <span className="inline-block bg-gradient-to-r from-white via-purple-200 to-cyan-200 bg-clip-text text-transparent">
-              The best AI Platform For
+              Transform Your Images with AI
             </span>
           </h1>
 
+          <p className="mt-6 text-xl text-zinc-300">
+            Professional-grade image editing made simple. No design skills needed.
+          </p>
+
           <div className="mt-8 text-5xl md:text-6xl font-semibold bg-gradient-to-r from-blue-200 via-violet-200 to-purple-200 bg-clip-text text-transparent">
             <TypewriterComponent 
               options={{
                 strings: [
-                  "Background Removal",
-                  "Object Removal",
-                  "Object Recolor",
-                  "Ratio Conversion"
+                  "Remove Backgrounds Instantly",
+                  "Erase Unwanted Objects",
+                  "Change Colors Magically",
+                  "Resize for Any Platform"
                 ],
                 autoStart: true,
                 loop: true,
@@ -57,22 +69,31 @@ const LandingContent = () => {
             />
           </div>
 
-          <motion.div 
-            className="mt-12 flex flex-col items-center gap-4"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 0.5 }}
-          >
+          <div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-3xl mx-auto">
+            {features.map((feature) => (
+              <motion.div
+                key={feature.title}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="p-4 rounded-lg bg-white/5 border border-white/10"
+              >
+                <h3 className="text-lg font-semibold text-white">{feature.title}</h3>
+                <p className="text-sm text-zinc-400">{feature.description}</p>
+              </motion.div>
+            ))}
+          </div>
+
+          <motion.div className="mt-12 flex flex-col items-center gap-4">
             <Link href="/dashboard">
               <button className="group relative px-12 py-4 rounded-full overflow-hidden bg-gradient-to-r from-violet-600 to-indigo-600 hover:scale-105 transition-all duration-200">
                 <div className="absolute inset-0 bg-white/30 group-hover:bg-transparent transition-colors" />
                 <span className="relative text-lg font-medium text-white">
-                  Get Started Free
+                  Start Editing for Free
                 </span>
               </button>
             </Link>
             <p className="text-lg text-zinc-400">
-              No credit card required • Free tier available
+              No credit card required • 5 free edits included
             </p>
           </motion.div>
         </motion.div>

components/Testimonials.tsx

@@ -4,24 +4,24 @@ import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
 const testimonials = [
     {
-        name: "Liam Carter",
-        title: "Full-Stack + web3 sr.Engineer",
-        description: "Good work! Generative Fill  and Object recolor are OutStanding. ",
+        name: "Sarah Chen",
+        title: "E-commerce Manager",
+        description: "Saved hours on product photo editing. The background removal is perfect every time!",
     },
     {
-        name: "Nizzy",
-        title: "Full-Stack Engineer",
-        description: "I am using this in my daily life now. In terms of Frontend this looks really good",
+        name: "Mike Rodriguez",
+        title: "Social Media Creator",
+        description: "Game-changer for content creation. I can now resize my images for every platform instantly.",
     },
     {
-        name: "Ava Bennett",
-        title: "Frontend Engineer",
-        description: "Cool product Man. You have done a nice job. Features are outstanding. Keep Going",
+        name: "Emma Thompson",
+        title: "Interior Designer",
+        description: "The object recoloring tool is incredible. I can show clients different color options in seconds.",
     },
     {
-        name: "Samumdar Altman",
-        title: "",
-        description: "It generated exact image as prompted &  the image quality is top notch",
+        name: "David Kim",
+        title: "Real Estate Agent",
+        description: "Perfect for cleaning up property photos. Removes unwanted objects seamlessly.",
     }
 ];
 
@@ -65,7 +65,7 @@ export const Testimonials = () => {
             initial="hidden"
             whileInView="visible"
             viewport={{ once: true, amount: 0.3 }}
-            className="container mx-auto px-4 sm:px-6 lg:px-8 py-20"
+            className="container mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10"
         >
             <motion.h2 
                 variants={{
@@ -89,7 +89,7 @@ export const Testimonials = () => {
                         custom={index}
                         className="h-full"
                     >
-                        <Card className="bg-gradient-to-b from-[#192339] to-[#121827] border border-white/10 text-white shadow-xl hover:shadow-emerald-500/20 transition-all duration-300 h-full flex flex-col">
+                        <Card className="bg-gradient-to-b from-[#0f1729]/80 to-[#0a0f1d]/80 backdrop-blur-sm border border-white/5 text-white shadow-xl hover:shadow-purple-500/20 transition-all duration-300 h-full flex flex-col">
                             <CardHeader className="flex-1">
                                 <CardTitle className="flex items-center gap-x-2 mb-4">
                                     <div>