Spaces:

vimar212
/

lazorra

Running

App Files Files Community

vimar212 commited on 7 days ago

Commit

93ade79

verified ·

1 Parent(s): 1e8c77e

Add 2 files

Browse files

Files changed (2) hide show

index.html +229 -23
prompts.txt +2 -0

index.html CHANGED Viewed

@@ -1,42 +1,248 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="utf-8">
     <style>
       body {
         display: flex;
         justify-content: center;
         align-items: center;
-        overflow: hidden;
-        height: 100dvh;
-        font-family: "Arial", sans-serif;
         text-align: center;
-        background-color: #fff;
       }
-      .arrow {
-        position: absolute;
-        bottom: 32px;
-        left: 0px;
-        width: 100px;
-        transform: rotate(30deg);
       }
-      h1 {
-        font-size: 50px;
       }
-      h1 span {
-        color: #acacac;
-        font-size: 32px;
       }
     </style>
   </head>
   <body>
-    <h1>
-      <span>I'm ready to work,</span><br />
-      Ask me anything.
-    </h1>
-    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
-    <script></script>
   <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vimar212/lazorra" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <!DOCTYPE html>
 <html>
   <head>
+    <title>Clazorra | Tienda Online de Cerveza Artesanal</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover" />
     <meta charset="utf-8">
+    <meta name="description" content="Compra online cerveza artesanal premium. Envíos a todo Chile. Variedad de estilos cerveceros y packs especiales.">
+    <meta name="keywords" content="cerveza artesanal, comprar cerveza online, tienda craft beer, clazorra, cerveza premium, delivery cerveza">
+    <meta property="og:title" content="Cerveza Artesanal Clazorra">
+    <meta property="og:description" content="Cerveza artesanal premium elaborada con los mejores ingredientes.">
+    <meta property="og:type" content="product">
+    <meta name="robots" content="index, follow">
+    <link rel="canonical" href="https://clazorra.cl/">
+    <meta property="og:url" content="https://clazorra.cl/">
+    <meta name="theme-color" content="#f8b500">
     <style>
+      :root {
+        --primary-color: #f8b500;
+        --secondary-color: #2c3e50;
+        --text-color: #333;
+        --light-bg: #f9f9f9;
+        --font-main: 'Montserrat', sans-serif;
+        --font-secondary: 'Open Sans', sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
       body {
+        font-family: var(--font-main);
+        color: var(--text-color);
+        line-height: 1.6;
+        background-color: var(--light-bg);
+      }
+      h1, h2, h3 {
+        font-weight: 700;
+        line-height: 1.2;
+      }
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+      .hero {
+        min-height: 100vh;
         display: flex;
+        flex-direction: column;
         justify-content: center;
         align-items: center;
         text-align: center;
+        padding: 2rem;
+        background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/hero-bg.jpg') no-repeat center/cover;
+        color: white;
+      }
+      .hero h1 {
+        font-size: clamp(2.5rem, 5vw, 4rem);
+        margin-bottom: 1rem;
+      }
+      .hero h1 span {
+        color: var(--primary-color);
+      }
+      .hero-subtitle {
+        font-size: 1.25rem;
+        margin-bottom: 2rem;
+        max-width: 600px;
+      }
+      .cta-button {
+        display: inline-block;
+        padding: 0.8rem 2rem;
+        background-color: var(--primary-color);
+        color: var(--secondary-color);
+        border-radius: 50px;
+        font-weight: 600;
+        transition: all 0.3s ease;
+      }
+      .cta-button:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+      }
+      .product-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 2rem;
+        padding: 2rem;
+      }
+      .product-card {
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        transition: transform 0.3s ease;
+      }
+      .product-card:hover {
+        transform: translateY(-5px);
+      }
+      .product-card img {
+        width: 100%;
+        height: 300px;
+        object-fit: cover;
+      }
+      .product-card h3 {
+        padding: 1rem 1rem 0;
+      }
+      .price {
+        font-weight: bold;
+        color: var(--primary-color);
+        padding: 0 1rem;
+      }
+      .add-to-cart {
+        display: block;
+        width: 100%;
+        padding: 0.75rem;
+        background: var(--secondary-color);
+        color: white;
+        border: none;
+        cursor: pointer;
       }
+      .cart-sidebar {
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: 350px;
+        height: 100vh;
+        background: white;
+        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+        padding: 1.5rem;
+        transform: translateX(100%);
+        transition: transform 0.3s ease;
       }
+      .cart-sidebar.active {
+        transform: translateX(0);
       }
+      @media (max-width: 768px) {
+        .hero {
+          padding: 1rem;
+        }
+        .product-grid {
+          grid-template-columns: 1fr;
+        }
+        .cart-sidebar {
+          width: 100%;
+        }
       }
     </style>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans&display=swap" rel="stylesheet">
   </head>
   <body>
+    <header role="banner" class="site-header">
+      <nav role="navigation" aria-label="Main navigation">
+        <!-- Navigation will go here -->
+      </nav>
+    </header>
+    <main role="main">
+      <section class="hero" aria-labelledby="hero-heading">
+        <h1 id="hero-heading">Cerveza Artesanal <span>Clazorra</span></h1>
+        <p class="hero-subtitle">Compra online y recibe en tu casa. Envíos a todo Chile</p>
+        <div class="hero-cta">
+          <a href="#nuestras-cervezas" class="cta-button">Ver Catálogo</a>
+          <a href="#ofertas" class="cta-button secondary">Ofertas Especiales</a>
+        </div>
+      </section>
+      <section id="nuestras-cervezas" class="products" aria-labelledby="products-heading">
+        <h2 id="products-heading">Nuestras Cervezas</h2>
+        <div class="product-grid">
+          <article class="product-card" itemscope itemtype="http://schema.org/Product">
+            <img src="images/ipa.jpg" alt="IPA Clazorra" itemprop="image">
+            <h3 itemprop="name">IPA Artesanal</h3>
+            <p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
+              <span itemprop="priceCurrency" content="CLP">$</span>
+              <span itemprop="price" content="6990">6.990</span>
+            </p>
+            <button class="add-to-cart" aria-label="Añadir IPA al carrito">Añadir al Carrito</button>
+          </article>
+          <!-- More product cards would go here -->
+        </div>
+      </section>
+      <section class="about" aria-labelledby="about-heading">
+        <h2 id="about-heading">Nuestra Historia</h2>
+        <!-- About content will go here -->
+      </section>
+    </main>
+    <aside class="cart-sidebar" aria-label="Carrito de compras">
+      <h3>Tu Carrito</h3>
+      <div class="cart-items">
+        <!-- Cart items would be dynamically inserted here -->
+      </div>
+      <div class="cart-total">
+        <p>Total: <span>$0</span></p>
+      </div>
+      <a href="/checkout" class="checkout-button">Proceder al Pago</a>
+    </aside>
+    <footer role="contentinfo" class="site-footer">
+      <div class="footer-sections">
+        <section aria-labelledby="footer-shop">
+          <h4 id="footer-shop">Comprar</h4>
+          <ul>
+            <li><a href="/cervezas">Todas las Cervezas</a></li>
+            <li><a href="/ofertas">Ofertas</a></li>
+            <li><a href="/packs">Packs Especiales</a></li>
+          </ul>
+        </section>
+        <section aria-labelledby="footer-info">
+          <h4 id="footer-info">Información</h4>
+          <ul>
+            <li><a href="/envios">Envíos y Despachos</a></li>
+            <li><a href="/pagos">Métodos de Pago</a></li>
+            <li><a href="/preguntas">Preguntas Frecuentes</a></li>
+          </ul>
+        </section>
+      </div>
+      <div class="copyright">
+        <p>&copy; 2023 Clazorra Cerveza Artesanal. Todos los derechos reservados.</p>
+      </div>
+    </footer>
+    <script src="js/main.js" defer></script>
   <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vimar212/lazorra" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1,2 @@


1	+ actualizar de acuerdo a los standar del diseño web l siguiente sitio dedicado a la venta de cerveza artesanal https://clazorra.cl/
2	+ tranformar en un sitio -comerce https://clazorra.cl/