lets implement this 
 Landing Page

Components:
Hero section with a clear value proposition.
Call-to-action (CTA) button: "Get Started" or "Upload Image".
Features overview section.
Testimonials from satisfied users.
for this site using shadcn and has this blue neubrutalism theme

'use client'

import React from 'react'
import Link from 'next/link'
import { useAuth } from '@clerk/nextjs'
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Scissors, Upload, Wand2, Download, ArrowRight } from "lucide-react"

const FeatureCard: React.FC<{ icon: React.ReactNode; title: string; description: string; color: string }> = ({ icon, title, description, color }) => (
  <Card className={`border-4 border-black ${color} transform hover:-translate-y-1 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all`}>
    <CardContent className="p-6">
      <div className="flex items-center space-x-4 mb-4">
        <div className="bg-white p-2 rounded-full border-2 border-black">
          {icon}
        </div>
        <h3 className="text-xl font-bold">{title}</h3>
      </div>
      <p className="text-black font-medium">{description}</p>
    </CardContent>
  </Card>
)

const HomePage: React.FC = () => {
  const { isSignedIn } = useAuth()

  return (
    <div className="min-h-screen bg-blue-50">
      <div className="container mx-auto px-4 py-12 sm:py-20">
        <div className="text-center mb-16 relative">
          <div className="absolute top-0 left-0 w-20 h-20 bg-blue-200 rounded-full border-4 border-black -z-10 transform -translate-x-1/2 -translate-y-1/2"></div>
          <div className="absolute bottom-0 right-0 w-32 h-32 bg-blue-300 border-4 border-black -z-10 transform translate-x-1/4 translate-y-1/4"></div>
          <h1 className="text-4xl sm:text-5xl font-bold mb-6 text-black relative inline-block font-sans">
            Remove Image Backgrounds <span className="text-blue-600">in Seconds</span>
            <div className="absolute -bottom-2 left-0 w-full h-4 bg-blue-200 -z-10"></div>
          </h1>
          <p className="text-lg sm:text-xl mb-8 text-black font-medium max-w-2xl mx-auto font-sans">
            Professional Image Background Removal for Zando, Takealot, and Beyond. Boost your e-commerce presence with ClearCut.
          </p>
          {isSignedIn ? (
            <Link href="/dashboard">
              <Button size="lg" className="bg-blue-500 text-white hover:bg-blue-600 border-2 border-black font-bold">
                Go to Dashboard
                <ArrowRight className="ml-2 h-5 w-5" />
              </Button>
            </Link>
          ) : (
            <Button size="lg" className="bg-blue-500 text-white hover:bg-blue-600 border-2 border-black font-bold">
              Get Started
              <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          )}
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          <FeatureCard
            icon={<Upload className="h-6 w-6 text-blue-600" />}
            title="Easy Upload"
            description="Effortlessly upload your images for processing"
            color="bg-blue-100"
          />
          <FeatureCard
            icon={<Wand2 className="h-6 w-6 text-blue-600" />}
            title="AI-Powered"
            description="Advanced AI technology for precise background removal"
            color="bg-blue-200"
          />
          <FeatureCard
            icon={<Scissors className="h-6 w-6 text-blue-600" />}
            title="Format Compliance"
            description="Meet Zando and Takealot image guidelines automatically"
            color="bg-blue-300"
          />
          <FeatureCard
            icon={<Download className="h-6 w-6 text-blue-600" />}
            title="Quick Download"
            description="Instantly download your processed images"
            color="bg-blue-400"
          />
        </div>

        <div className="bg-blue-500 p-8 rounded-lg text-center border-4 border-black relative">
          <div className="absolute top-0 right-0 w-16 h-16 bg-blue-300 border-4 border-black transform translate-x-1/4 -translate-y-1/4 rotate-12"></div>
          <h2 className="text-2xl sm:text-3xl font-bold mb-4 text-white">Ready to transform your images?</h2>
          <p className="text-lg sm:text-xl mb-6 text-white font-medium">Join thousands of e-commerce sellers and content creators who trust ClearCut.</p>
          <Button size="lg" className="bg-white text-blue-600 hover:bg-blue-100 border-2 border-black font-bold">
            Start Free Trial
            <ArrowRight className="ml-2 h-5 w-5" />
          </Button>
        </div>
      </div>
    </div>
  )
}

export default HomePage