Big import React from "react";

import { Button } from "@/components/ui/button";

import { Card, CardContent } from "@/components/ui/card";

import { motion } from "framer-motion";

export default function MensClothingLanding() {

return (

<div className="min-h-screen bg-white text-gray-900">

{/* Hero Section */}

<section className="flex flex-col items-center justify-center text-center py-24 px-6 bg-gray-100">

<motion.h1

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

className="text-4xl md:text-6xl font-bold mb-6"

>

Men’s Clothing Photography That Sells

</motion.h1>

<p className="text-lg md:text-xl max-w-2xl mb-8">

Showcase your apparel with clean, modern visuals designed to boost

conversions and elevate your brand.

</p>

<Button className="text-lg px-8 py-6 rounded-2xl shadow-lg">

Book a Fashion Shoot

</Button>

</section>

{/* Services Section */}

<section className="py-20 px-6 max-w-6xl mx-auto">

<h2 className="text-3xl font-semibold mb-12 text-center">

What We Offer

</h2>

<div className="grid md:grid-cols-3 gap-8">

{[

{

title: "Studio Product Shots",

text: "Crisp, clean images on white or neutral backgrounds—perfect for e-commerce listings.",

},

{

title: "Model Photography",

text: "Bring your clothing to life with professional models and styled shoots.",

},

{

title: "Lifestyle Imagery",

text: "Tell your brand story with natural, lifestyle-focused visuals your audience connects with.",

},

].map((item, i) => (

<Card key={i} className="rounded-2xl shadow-md">

<CardContent className="p-6">

<h3 className="text-xl font-semibold mb-2">

{item.title}

</h3>

<p className="text-gray-600">{item.text}</p>

</CardContent>

</Card>

))}

</div>

</section>

{/* How-To Section */}

<section className="py-20 px-6 bg-gray-50">

<div className="max-w-5xl mx-auto">

<h2 className="text-3xl font-semibold mb-10 text-center">

How to Shoot Men’s Clothing for E-commerce

</h2>

<div className="grid md:grid-cols-3 gap-6">

{[

{

title: "1. Use Proper Lighting",

text: "Soft lighting helps show true fabric color and texture without harsh shadows.",

},

{

title: "2. Focus on Fit & Shape",

text: "Use mannequins or models to highlight how the clothing fits and drapes.",

},

{

title: "3. Capture Key Angles",

text: "Front, back, and detail shots help customers understand the product fully.",

},

].map((item, i) => (

<Card key={i} className="rounded-2xl shadow-sm">

<CardContent className="p-6">

<h3 className="text-lg font-semibold mb-2">

{item.title}

</h3>

<p className="text-gray-600">{item.text}</p>

</CardContent>

</Card>

))}

</div>

</div>

</section>

{/* CTA Section */}

<section className="py-24 text-center px-6">

<h2 className="text-3xl md:text-4xl font-bold mb-6">

Ready to Elevate Your Clothing Brand?

</h2>

<p className="mb-8 text-lg">

Let’s create stunning visuals that turn visitors into customers.

</p>

<Button className="text-lg px-10 py-6 rounded-2xl shadow-xl">

Get Started Today

</Button>

</section>

{/* Footer */}

<footer className="text-center py-8 text-sm text-gray-500">

© {new Date().getFullYear()} EcomPhoto Studio. All rights reserved.

</footer>

</div>

);

}

, Real Impact.