import { Bell, ChevronDown, Menu, MoreVertical, Search, Share2, Bookmark } from

'lucide-react'
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function Component() {

return (
<div className="flex flex-col min-h-screen bg-white">
{/* Status Bar */}
<div className="flex justify-between items-center px-4 py-2 text-sm bg-
white">
<div className="flex items-center gap-2">
19:16
<div className="flex gap-1">
<span>👻</span>
<span>▶️</span>
<span>📸</span>
</div>
</div>
<div className="flex items-center gap-2">
<span>⏰</span>
<span>🔔</span>
<span className="flex items-center gap-1">
<span>•••</span>
<span>📶</span>
<span>23%</span>
</span>
</div>
</div>

{/* URL Bar */}

<div className="flex items-center px-4 py-2 gap-4 bg-white border-b">
<Button variant="ghost" size="icon">
<span className="text-xl">✕</span>
</Button>
<Button variant="ghost" size="icon">
<ChevronDown className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon">
<Menu className="h-4 w-4" />
</Button>
<div className="flex-1 flex items-center gap-2">
<span className="font-medium">Amazon...</span>
<span className="text-muted-foreground text-sm">amazon.com</span>
</div>
<Button variant="ghost" size="icon">
<Share2 className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon">
<Bookmark className="h-4 w-4" />
</Button>
<Button variant="ghost" size="icon">
<MoreVertical className="h-4 w-4" />
</Button>
</div>
 {/* Amazon Header */}
<header className="bg-[#018752] text-white p-4 flex items-center justify-
between gap-4">
<Sheet>
<SheetTrigger asChild>
<Button variant="ghost" size="icon" className="text-white">
<Menu className="h-6 w-6" />
</Button>
</SheetTrigger>
<SheetContent side="left">
<nav className="flex flex-col gap-4">
<a href="#" className="text-lg font-semibold">
Deals
</a>
<a href="#" className="text-lg font-semibold">
Amazon Basics
</a>
<a href="#" className="text-lg font-semibold">
Livestreams
</a>
<a href="#" className="text-lg font-semibold">
Best Sellers
</a>
</nav>
</SheetContent>
</Sheet>
<div className="flex-1">
<img src="/placeholder.svg?height=30&width=100" alt="Amazon"
className="h-8" />
</div>
<Button variant="ghost" className="text-white">
Sign in
</Button>
<Button variant="ghost" size="icon" className="text-white">
<div className="relative">
<span className="absolute -top-1 -right-1 bg-white text-[#018752]
rounded-full w-4 h-4 text-xs flex items-center justify-center">
0
</span>
🛒
</div>
</Button>
</header>

{/* Search Bar */}

<div className="px-4 py-2 bg-[#018752]">
<div className="relative">
<Input placeholder="Search Amazon" className="pl-4 pr-12" />
<Button className="absolute right-0 top-0 bottom-0 bg-[#cd2f82] hover:bg-
[#b32771] rounded-l-none">
<Search className="h-4 w-4" />
</Button>
</div>
</div>

{/* Navigation */}

<nav className="flex gap-4 px-4 py-2 overflow-x-auto text-white bg-[#018752]
text-sm">
<a href="#" className="whitespace-nowrap">
 Deals
</a>
<a href="#" className="whitespace-nowrap">
Amazon Basics
</a>
<a href="#" className="whitespace-nowrap">
Livestreams
</a>
<a href="#" className="whitespace-nowrap">
Best Sellers
</a>
</nav>

{/* Location Bar */}

<Button variant="ghost" className="flex items-center gap-2 px-4 py-2">
<span>📍</span>
Deliver to Algeria
<ChevronDown className="h-4 w-4" />
</Button>

{/* Shipping Alert */}

<Alert className="mx-4 my-2 bg-slate-700 text-white border-none">
<AlertTitle className="text-lg font-normal">We're showing you items that
ship to Algeria</AlertTitle>
<AlertDescription>To see items that ship to a different country, change
your delivery address.</AlertDescription>
<div className="flex gap-2 mt-4">
<Button variant="outline" className="bg-white text-black hover:bg-gray-
100">
Dismiss
</Button>
<Button className="bg-yellow-400 text-black hover:bg-yellow-500">Change
Address</Button>
</div>
</Alert>

{/* Beauty Essentials Section */}

<section className="p-4">
<h2 className="text-2xl font-bold mb-4">Beauty essentials</h2>
<div className="bg-[#ffe8dd] rounded-lg p-4">
<img
src="/placeholder.svg?height=300&width=600"
alt="Beauty products arrangement"
className="w-full h-48 object-cover rounded-lg mb-4"
/>
</div>
</section>

{/* Product Cards */}

<div className="grid grid-cols-2 gap-4 p-4">
<Card>
<CardContent className="p-4">
<h3 className="font-bold mb-2">Glow up under $25</h3>
<img
src="/placeholder.svg?height=150&width=150"
alt="Beauty products"
className="w-full h-32 object-cover rounded-lg"
/>
</CardContent>
 </Card>
<Card>
<CardContent className="p-4">
<h3 className="font-bold mb-2">Customers' Most-Loved fashion</h3>
<img
src="/placeholder.svg?height=150&width=150"
alt="Fashion items"
className="w-full h-32 object-cover rounded-lg"
/>
</CardContent>
</Card>
</div>

{/* Bottom Navigation */}

<div className="mt-auto border-t flex justify-around p-4">
<Button variant="ghost" size="icon">
<Menu className="h-6 w-6" />
</Button>
<Button variant="ghost" size="icon">
⬜
</Button>
<Button variant="ghost" size="icon">
◁
</Button>
</div>
</div>
)
}