eConvert from TSX to Vue
import Image from "next/image"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
export default function ServicesSection() {
return (
<section className="w-full py-16 bg-[#f5f1ea]">
<div className="container mx-auto px-4 max-w-6xl">
<h2 className="text-4xl md:text-5xl font-serif text-center text-stone-600 mb-4">Services offered</h2>
<p className="text-center text-stone-700 mb-16 max-w-3xl mx-auto">
Explore tailored solutions designed to enhance your business visibility at soug.
</p>
<div className="grid md:grid-cols-3 gap-6">
{/* Store Customization */}
<div className="relative overflow-hidden rounded-sm group">
<div className="absolute inset-0 bg-black/40 z-10"></div>
<Image
src="/placeholder.svg?height=600&width=400"
alt="Store customization"
width={400}
height={600}
className="w-full h-[400px] object-cover"
/>
<div className="absolute inset-0 z-20 p-8 flex flex-col justify-between text-white">
<div>
<h3 className="text-2xl md:text-3xl font-serif mb-2 text-center">
STORE
<br />
CUSTOMIZATION
</h3>
<p className="mt-4 text-center">
Transform your online store with our user-friendly tools that allow for personalized design and
functionality, ensuring your brand stands out.
</p>
</div>
<div className="text-center">
<Link href="#" className="inline-flex items-center text-white hover:underline">
Contact <ArrowRight className="ml-2 h-4 w-4" />
</Link>
</div>
</div>
</div>
{/* Targeted Marketing */}
<div className="relative overflow-hidden rounded-sm group">
<div className="absolute inset-0 bg-black/40 z-10"></div>
<Image
src="/placeholder.svg?height=600&width=400"
alt="Targeted marketing"
width={400}
height={600}
className="w-full h-[400px] object-cover"
/>
<div className="absolute inset-0 z-20 p-8 flex flex-col justify-between text-white">
<div>
<h3 className="text-2xl md:text-3xl font-serif mb-2 text-center">
TARGETED
<br />
MARKETING
</h3>
<p className="mt-4 text-center">
Leverage our marketing expertise to reach your ideal customers, enhancing visibility and driving
traffic to your store.
</p>
</div>
<div className="text-center">
<Link href="#" className="inline-flex items-center text-white hover:underline">
Contact <ArrowRight className="ml-2 h-4 w-4" />
</Link>
</div>
</div>
</div>
{/* Seamless Delivery */}
<div className="relative overflow-hidden rounded-sm group">
<div className="absolute inset-0 bg-black/40 z-10"></div>
<Image
src="/placeholder.svg?height=600&width=400"
alt="Seamless delivery"
width={400}
height={600}
className="w-full h-[400px] object-cover"
/>
<div className="absolute inset-0 z-20 p-8 flex flex-col justify-between text-white">
<div>
<h3 className="text-2xl md:text-3xl font-serif mb-2 text-center">SEAMLESS DELIVERY</h3>
<p className="mt-4 text-center">
Offer your customers reliable delivery options, ensuring their purchases arrive promptly and securely
at their doorstep.
</p>
</div>
<div className="text-center">
<Link href="#" className="inline-flex items-center text-white hover:underline">
Contact <ArrowRight className="ml-2 h-4 w-4" />
</Link>
</div>
</div>
</div>
</div>
</div>
</section>
)
}