mira, tengo esto:

import { ShoppingCart, Menu } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const productos = [
  { id: 1, nombre: "Camiseta Vintage", precio: 29.99 },
  { id: 2, nombre: "Jeans Clásicos", precio: 59.99 },
  { id: 3, nombre: "Zapatillas Urbanas", precio: 79.99 },
  { id: 4, nombre: "Chaqueta de Cuero", precio: 129.99 },
  { id: 5, nombre: "Gorra Estilo", precio: 24.99 },
  { id: 6, nombre: "Bufanda Suave", precio: 19.99 },
]

export default function JohansStore() {
  return (
    <div className="min-h-screen flex flex-col bg-orange-50">
      <header className="bg-orange-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
          <div className="flex items-center">
            <img src="/placeholder.svg?height=40&width=40&text=J" alt="Logo" className="h-10 w-10 mr-4 rounded-full bg-orange-300 text-white" />
            <h1 className="text-2xl font-bold text-orange-800">Johan's Store</h1>
          </div>
          <nav className="hidden md:flex space-x-4">
            <a href="#" className="text-orange-700 hover:text-orange-900">Inicio</a>
            <a href="#" className="text-orange-700 hover:text-orange-900">Productos</a>
            <a href="#" className="text-orange-700 hover:text-orange-900">Contacto</a>
          </nav>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="icon" className="md:hidden bg-orange-200 text-orange-800 border-orange-300 hover:bg-orange-300">
                <Menu className="h-4 w-4" />
                <span className="sr-only">Menú</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="bg-orange-100">
              <DropdownMenuItem className="text-orange-800 hover:bg-orange-200">Inicio</DropdownMenuItem>
              <DropdownMenuItem className="text-orange-800 hover:bg-orange-200">Productos</DropdownMenuItem>
              <DropdownMenuItem className="text-orange-800 hover:bg-orange-200">Contacto</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </header>

      <main className="flex-grow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <section className="mb-12">
            <h2 className="text-3xl font-bold text-orange-800 mb-6">Producto del Mes</h2>
            <div className="bg-white shadow-lg rounded-lg overflow-hidden border border-orange-200">
              <img src="/placeholder.svg?height=400&width=800&text=Producto+Destacado" alt="Producto del Mes" className="w-full h-80 object-cover" />
              <div className="p-6 bg-orange-100">
                <h3 className="text-2xl font-semibold text-orange-800 mb-2">Conjunto Verano Fresco</h3>
                <p className="text-orange-700 mb-4">Luce genial este verano con nuestro conjunto fresco y cómodo, perfecto para días soleados.</p>
                <div className="flex justify-between items-center">
                  <span className="text-3xl font-bold text-orange-800">$89.99</span>
                  <Button className="bg-orange-500 hover:bg-orange-600 text-white">
                    <ShoppingCart className="mr-2 h-4 w-4" /> Añadir al carrito
                  </Button>
                </div>
              </div>
            </div>
          </section>

          <section>
            <h2 className="text-3xl font-bold text-orange-800 mb-6">Nuestros Productos</h2>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {productos.map((producto) => (
                <div key={producto.id} className="bg-white shadow-md rounded-lg overflow-hidden border border-orange-200">
                  <img src={`/placeholder.svg?height=200&width=300&text=${producto.nombre}`} alt={producto.nombre} className="w-full h-48 object-cover" />
                  <div className="p-4 bg-orange-50">
                    <h3 className="text-lg font-semibold text-orange-800 mb-2">{producto.nombre}</h3>
                    <div className="flex justify-between items-center">
                      <span className="text-xl font-bold text-orange-700">${producto.precio.toFixed(2)}</span>
                      <Button variant="outline" size="sm" className="border-orange-300 text-orange-700 hover:bg-orange-200">
                        <ShoppingCart className="mr-2 h-4 w-4" /> Añadir
                      </Button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      </main>

      <footer className="bg-orange-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="flex flex-wrap justify-center space-x-6">
            <a href="#" className="text-sm text-orange-700 hover:text-orange-900">Términos y Condiciones</a>
            <a href="#" className="text-sm text-orange-700 hover:text-orange-900">Política de Privacidad</a>
            <a href="#" className="text-sm text-orange-700 hover:text-orange-900">Sobre Nosotros</a>
            <a href="#" className="text-sm text-orange-700 hover:text-orange-900">Contacto</a>
          </div>
          <p className="mt-8 text-center text-sm text-orange-600">&copy; 2023 Johan's Store. Todos los derechos reservados.</p>
        </div>
      </footer>
    </div>
  )
}

necesito que me lo des en html y css con bootstrap, como quedaria todo mi html y css?