Welcome

Dr Meesala Apparel
e-platform

Experience the perfect blend of form and function. Designed with precision,
built for excellence.

Get Started

Lightning Fast

Experience unparalleled performance with our optimized architecture.

Modular Design

Built with flexibility in mind, allowing for seamless customization.

Secure by Design

Security isn't an afterthought. It's built into every component.

Showcase

Crafted with precision

Every detail matters. Every interaction is considered. Experience design at

its finest.

Intuitive Interface

Designed with the user in mind, every interaction feels natural and
purposeful.

Powerful Features

Advanced capabilities wrapped in a simple, elegant interface.

Responsive Design

Perfect across all devices, from mobile to desktop.

Premium Experience

Every detail crafted to deliver an exceptional user experience.

import { useEffect, useRef } from "react";

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

import { motion } from "framer-motion";

const Index = () => {

const observerRef = useRef<IntersectionObserver | null>(null);

useEffect(() => {

observerRef.current = new IntersectionObserver((entries) => {

entries.forEach((entry) => {

if (entry.isIntersecting) {

entry.target.classList.add("visible");

});

});

document.querySelectorAll(".animate-on-scroll").forEach((element) => {

observerRef.current?.observe(element);

});

return () => observerRef.current?.disconnect();

}, []);

return (

<div className="min-h-screen">

{/* Hero Section */}

 <section className="relative h-screen flex items-center justify-center
overflow-hidden">

<div className="absolute inset-0 bg-gradient-to-b from-soft-gray to-

white -z-10" />

<div className="container px-4 mx-auto text-center">

<motion.div

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

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

transition={{ duration: 0.8 }}

>

<span className="inline-block px-4 py-1.5 mb-6 text-xs font-

semibold tracking-wider text-soft-black uppercase rounded-full bg-soft-
gray">

Welcome

</span>

<h1 className="text-5xl md:text-7xl font-bold mb-8 text-soft-black

tracking-tight text-balance">

Dr Meesala Apparel

<br /> e-platform

</h1>

<p className="text-lg md:text-xl text-gray-600 mb-10 max-w-2xl

mx-auto text-balance">

Experience the perfect blend of form and function. Designed with

precision, built for excellence.

</p>

<Button

className="rounded-full px-8 py-6 bg-soft-black text-white

hover:bg-black transition-colors duration-300"

size="lg"
 >

Get Started

</Button>

</motion.div>

</div>

</section>

{/* Features Section */}

<section className="py-24 bg-white">

<div className="container px-4 mx-auto">

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

{features.map((feature, index) => (

<div

key={index}

className="animate-on-scroll glass-card p-8 rounded-2xl"

>

<div className="mb-6 inline-block p-4 bg-soft-gray rounded-xl">

{feature.icon}

</div>

<h3 className="text-xl font-semibold

mb-4">{feature.title}</h3>

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

</div>

))}

</div>

</div>

</section>
 {/* Product Showcase */}

<section className="py-24 bg-soft-gray">

<div className="container px-4 mx-auto">

<div className="text-center mb-16 animate-on-scroll">

<span className="inline-block px-4 py-1.5 mb-6 text-xs font-

semibold tracking-wider text-soft-black uppercase rounded-full bg-white">

Showcase

</span>

<h2 className="text-4xl font-bold mb-6 text-soft-black">

Crafted with precision

</h2>

<p className="text-lg text-gray-600 max-w-2xl mx-auto">

Every detail matters. Every interaction is considered. Experience

design at its finest.

</p>

</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-12">

{showcaseItems.map((item, index) => (

<div

key={index}

className="animate-on-scroll glass-card p-6 rounded-2xl

overflow-hidden group cursor-pointer"

>

<div className="relative overflow-hidden rounded-xl mb-6">

<div className="aspect-video bg-gray-100 animate-pulse" />

 </div>

<h3 className="text-xl font-semibold mb-2 group-hover:text-

gray-600 transition-colors">

{item.title}

</h3>

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

</div>

))}

</div>

</div>

</section>

</div>

);

};

const features = [

icon: (

<svg

className="w-6 h-6"

fill="none"

stroke="currentColor"

viewBox="0 0 24 24"

>

<path

strokeLinecap="round"

strokeLinejoin="round"
 strokeWidth={2}

d="M13 10V3L4 14h7v7l9-11h-7z"

/>

</svg>

),

title: "Lightning Fast",

description:

"Experience unparalleled performance with our optimized architecture.",

},

icon: (

<svg

className="w-6 h-6"

fill="none"

stroke="currentColor"

viewBox="0 0 24 24"

>

<path

strokeLinecap="round"

strokeLinejoin="round"

strokeWidth={2}

d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-

1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-
6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"

/>

</svg>

),
 title: "Modular Design",

description:

"Built with flexibility in mind, allowing for seamless customization.",

},

icon: (

<svg

className="w-6 h-6"

fill="none"

stroke="currentColor"

viewBox="0 0 24 24"

>

<path

strokeLinecap="round"

strokeLinejoin="round"

strokeWidth={2}

d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-

8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332
9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01"

/>

</svg>

),

title: "Secure by Design",

description:

"Security isn't an afterthought. It's built into every component.",

},

];
const showcaseItems = [

title: "Intuitive Interface",

description:

"Designed with the user in mind, every interaction feels natural and
purposeful.",

},

title: "Powerful Features",

description:

"Advanced capabilities wrapped in a simple, elegant interface.",

},

title: "Responsive Design",

description:

"Perfect across all devices, from mobile to desktop.",

},

title: "Premium Experience",

description:

"Every detail crafted to deliver an exceptional user experience.",

},

];

export default Index;

Search

public

placeholder.svg

src

.gitignore

components.json

eslint.config.js

index.html

package.json

postcss.config.js

README.md

tailwind.config.ts

tsconfig.app.json

tsconfig.json

tsconfig.node.json

vite.config.ts