diff --git a/public/assets/bg-1.jpg b/public/assets/bg-1.jpg new file mode 100644 index 0000000..aca46b2 Binary files /dev/null and b/public/assets/bg-1.jpg differ diff --git a/public/assets/bg-2.jpg b/public/assets/bg-2.jpg new file mode 100644 index 0000000..bbbe21d Binary files /dev/null and b/public/assets/bg-2.jpg differ diff --git a/public/assets/bg-3.jpg b/public/assets/bg-3.jpg new file mode 100644 index 0000000..b6204c1 Binary files /dev/null and b/public/assets/bg-3.jpg differ diff --git a/src/index.html b/src/index.html index ea6da87..993ded9 100644 --- a/src/index.html +++ b/src/index.html @@ -1,254 +1,335 @@ - + - - - - + + + BrewBox - - + + - +
- -
- - hero image -

Café de especialidad en tu puerta, cada mes.

-

- Seleccionamos los mejores granos de origen único de todo el mundo - y los enviamos frescos, tostados a pedido, directo a tu casa. -

+
+ +
+ Suscripción mensual +

Café de especialidad, en tu puerta.

+

+ Granos de origen único, tostados a pedido y enviados frescos cada + mes. Sin contratos, sin compromiso. +

+
Empezar ahora -
+ Ver planes + + -
-
-

¿Por qué BrewBox?

-

- Trabajamos con tostadores independientes y fincas de origen único. - Cada envío viene con notas de cata, origen del grano y método de preparación recomendado. - Sin contratos. Cancelás cuando querés. -

-
-
-

Beneficios de la suscripción

-
    -
  • Acceso a lotes exclusivos y ediciones limitadas
    • -
  • Descuentos especiales para suscriptores
    • -
  • Envío gratuito en cada pedido
    • -
  • Notas de cata y guías de preparación en cada envío
    • -
  • Podés pausar o cancelar cuando quieras
    • -
-
-
+
+
+ 12+ + Orígenes +
+
+ 500 + Suscriptores +
+
-
-

Elegí tu plan

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PlanNormalPremium
Precio mensual$10$15
Gramos por envío250 g500 g
Cafés de origen único1 por mes2 por mes
Envío gratuito✓✓
Guía de preparación✓✓
Acceso a lotes exclusivos—✓
-
+
+
+ Scroll +
+
-
-

Suscribite a BrewBox

-
+
+ +
+ Nuestra filosofía +

¿Por qué BrewBox?

+

+ Trabajamos con tostadores independientes y fincas de origen único. + Cada envío viene con notas de cata, origen del grano y método de + preparación recomendado. Sin contratos. Cancelás cuando querés. +

+
+
+ Lo que incluye +

Beneficios de la suscripción

+
    +
  • Acceso a lotes exclusivos y ediciones limitadas
    • +
  • Descuentos especiales para suscriptores
    • +
  • Envío gratuito en cada pedido
    • +
  • Notas de cata y guías de preparación en cada envío
    • +
  • Podés pausar o cancelar cuando quieras
    • +
+
+
-
- Datos personales +
+ +
+ Precios +

Elegí tu plan

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NormalPremium
Precio mensual$10$15
Gramos por envío250 g500 g
Cafés de origen único1 por mes2 por mes
Envío gratuito✓✓
Guía de preparación✓✓
Acceso a lotes exclusivos—✓
+
-
- - -
+
+ +
+ Unite +

Suscribite a BrewBox

+

+ Completá el formulario y recibís tu primer envío en menos de 72hs. + Estudiantes obtienen un descuento del 20%. +

+
-
- - -
+ +
+ Datos personales +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
-
- - -
+
+ Plan +
+ +
+ + +
+
+
+ + +
+
-
- - -
-
+
+ Método de pago +
+ + +
+
+ +
+ + + + + +
+
+
+
+ + +
+
+ + +
+
+
-
- Plan +
+ Dirección de envío +
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
-
- -
- - -
-
- -
- - -
-
- -
- Método de pago - -
- - -
- -
- - -
- -
-
- - -
-
- - -
-
-
- -
- Dirección de envío - -
- - -
- -
-
- - -
-
- - -
-
- -
- - -
-
- - - - - -
-
+ +
+ +
+ +
- - - \ No newline at end of file + + diff --git a/src/styles.css b/src/styles.css index 384f8d6..e090f7a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,9 +1,804 @@ +/* Global Styles */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: #0a0a0a; + color: #f5f0e8; + font-family: Georgia, serif; +} + +html, body { + height: 100%; + margin: 0; + padding: 0; +} + +a { + text-decoration: none; + color: inherit; +} + /* Navbar */ #site-header { position: sticky; top: 0; z-index: 1000; - background-color: rgba(10, 10, 10, 0.85); + background-color: rgba(10, 10, 10, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.7); +} + +#main-nav { + max-width: 1100px; + margin: 0 auto; + padding: 0 2rem; + height: 60px; + display: flex; + align-items: center; + justify-content: space-between; +} + +.nav-logo { + font-family: Georgia, serif; + font-size: 1.2rem; + letter-spacing: 0.12rem; + text-transform: uppercase; + color: #f5f0e8; + text-decoration: none; +} + +.nav-logo span { + color: #c8a96e; +} + +#main-nav ul { + list-style: none; + display: flex; + gap: 2rem; + align-items: center; + margin: 0; + padding: 0; +} + +#main-nav ul a { + font-family: Georgia, serif; + font-size: 0.78rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(245, 240, 232, 0.425); + text-decoration: none; + transition: color 0.2s; + position: relative; +} + +#main-nav ul a::after { + content: ''; + position: absolute; + bottom: -3px; + left: 0; + width: 0; + height: 1px; + background-color: #c8a96e; + transition: width 0.25s; +} + +#main-nav ul a:hover { + color: #f5f0e8; +} + +#main-nav ul a:hover::after { + width: 100%; +} + +#main-nav ul li:last-child a { + color: #0a0a0a; + background: #c8a96e; + padding: 0.45rem 1.1rem; + border-radius: 2px; + transition: background 0.2s; +} + +#main-nav ul li:last-child a::after { + display: none; +} + +#main-nav ul li:last-child a:hover { + background: #b8946a; + color: #0a0a0a; +} + +/* Hero Section */ +#hero { + position: relative; + height: calc(100vh - 60px); + display: flex; + align-items: flex-end; + background-image: url('/public/assets/bg-1.jpg'); + background-size: cover; + background-position: center; + overflow: hidden; +} + +#hero::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient( + to bottom, + rgba(10, 10, 10, 0.6) 0%, + rgba(10, 10, 10, 0.5) 40%, + rgba(10, 10, 10, 0.75) 70%, + rgba(10, 10, 10, 0.97) 100% + ); + z-index: 1; +} + +.hero-content { + position: relative; + z-index: 2; + max-width: 1100px; + margin: 0 auto; + padding: 0 2rem 10rem; + width: 100%; +} + +.hero-eyebrow { + display: inline-block; + font-size: 0.72rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: #c8a96e; + margin-bottom: 1.2rem; + border-left: 2px solid #c8a96e; + padding-left: 0.75rem; +} + +#hero h1 { + font-size: clamp(2.8rem, 6vw, 5.5rem); + font-weight: normal; + line-height: 1.05; + color: #f5f0e8; + letter-spacing: -0.01em; + max-width: 14ch; + margin-bottom: 1.5rem; +} + +#hero h1 em { + font-style: italic; + color: #c8a96e; +} + +#hero p { + font-size: 1rem; + line-height: 1.7; + color: rgba(245, 240, 232, 0.55); + max-width: 42ch; + margin-bottom: 2.5rem; +} + +.hero-actions { + display: flex; + align-items: center; + gap: 2rem; +} + +.cta-button { + font-size: 0.8rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: #0a0a0a; + background: #c8a96e; + padding: 0.85rem 2rem; + border-radius: 2px; + text-decoration: none; + transition: background 0.2s; +} + +.cta-button:hover { + background: #b8946a; +} + +.hero-secondary { + font-size: 0.78rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: rgba(245, 240, 232, 0.4); + text-decoration: none; + border-bottom: 1px solid rgba(245, 240, 232, 0.2); + padding-bottom: 1px; + transition: color 0.2s, border-color 0.2s; +} + +.hero-secondary:hover { + color: #f5f0e8; + border-color: rgba(245, 240, 232, 0.5); +} + +.hero-stats { + position: absolute; + bottom: 6rem; + right: 2rem; + z-index: 2; + display: flex; + flex-direction: column; + gap: 1.5rem; + text-align: right; +} + +.stat-number { + display: block; + font-size: 1.6rem; + color: #f5f0e8; + line-height: 1; +} + +.stat-label { + display: block; + font-size: 0.65rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: rgba(245, 240, 232, 0.35); + margin-top: 0.2rem; +} + +.hero-scroll { + position: absolute; + bottom: 2.5rem; + left: 50%; + transform: translateX(-50%); + right: auto; + z-index: 2; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + color: rgba(245, 240, 232, 0.25); + font-size: 0.65rem; + letter-spacing: 0.15em; + text-transform: uppercase; +} + +.scroll-line { + width: 1px; + height: 40px; + background: linear-gradient(to bottom, rgba(245, 240, 232, 0.25), transparent); + animation: scrollpulse 2s ease-in-out infinite; +} + +@keyframes scrollpulse { + 0%, 100% { opacity: 0.3; } + 50% { opacity: 0.8; } +} + +/* Benefits Section */ + +#beneficios { + max-width: 1100px; + margin: 0 auto; + padding: 6rem 2rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2px; +} + +#beneficios .card { + background: #111; + padding: 3rem; + border: 1px solid rgba(255, 255, 255, 0.06); + transition: border-color 0.3s; +} + +#beneficios .card:first-child { + border-right: none; +} + +#beneficios .card:hover { + border-color: rgba(200, 169, 110, 0.25); +} + +.card-eyebrow { + display: inline-block; + font-size: 0.68rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: #c8a96e; + margin-bottom: 1.5rem; +} + +#beneficios h2 { + font-size: 1.6rem; + font-weight: normal; + line-height: 1.2; + color: #f5f0e8; + margin-bottom: 1.25rem; + letter-spacing: -0.01em; +} + +#beneficios p { + font-size: 0.95rem; + line-height: 1.8; + color: rgba(245, 240, 232, 0.5); +} + +#beneficios ul { + list-style: none; + display: flex; + flex-direction: column; + gap: 1rem; + margin-top: 0.25rem; +} + +#beneficios ul li { + display: flex; + align-items: flex-start; + gap: 1rem; + font-size: 0.92rem; + line-height: 1.5; + color: rgba(245, 240, 232, 0.6); +} + +#beneficios ul li::before { + content: ''; + display: block; + width: 16px; + min-width: 16px; + height: 1px; + background: #c8a96e; + margin-top: 0.75em; +} + +@media (max-width: 768px) { + #beneficios { + grid-template-columns: 1fr; + } + + #beneficios .card:first-child { + border-right: 1px solid rgba(255, 255, 255, 0.06); + border-bottom: none; + } +} + +/* Plans section */ + +#planes { + max-width: 1100px; + margin: 0 auto; + padding: 6rem 2rem; +} + +.section-header { + margin-bottom: 3rem; +} + +.section-eyebrow { + display: inline-block; + font-size: 0.68rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: #c8a96e; + margin-bottom: 1rem; +} + +#planes h2 { + font-size: 2.2rem; + font-weight: normal; + color: #f5f0e8; + letter-spacing: -0.01em; +} + +#planes table { + width: 100%; + border-collapse: collapse; +} + +#planes thead tr { + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +#planes thead th { + padding: 1.25rem 1.5rem; + font-size: 0.72rem; + letter-spacing: 0.15em; + text-transform: uppercase; + font-weight: normal; + color: rgba(245, 240, 232, 0.35); + text-align: left; +} + +#planes thead th.col-premium { + color: #c8a96e; + border-top: 1px solid rgba(200, 169, 110, 0.12); +} + +#planes tbody tr { + border-bottom: 1px solid rgba(255, 255, 255, 0.04); + transition: background 0.2s; +} + +#planes tbody tr:hover { + background: rgba(255, 255, 255, 0.02); +} + +#planes tbody td { + padding: 1.1rem 1.5rem; + font-size: 0.9rem; +} + +#planes tbody td:first-child { + color: rgba(245, 240, 232, 0.4); + font-size: 0.82rem; + letter-spacing: 0.04em; +} + +#planes tbody td:not(:first-child) { + color: #f5f0e8; + font-size: 0.95rem; +} + +.col-premium { + background: rgba(200, 169, 110, 0.04); + border-left: 1px solid rgba(200, 169, 110, 0.12); + border-right: 1px solid rgba(200, 169, 110, 0.12); +} + +.check { color: #c8a96e; } +.dash { color: rgba(245, 240, 232, 0.15); } + +/* Subscription Form */ + +#formulario { + max-width: 1100px; + margin: 0 auto; + padding: 6rem 2rem; + display: grid; + grid-template-columns: 1fr 2fr; + gap: 6rem; + align-items: start; +} + +.formulario-header { + position: sticky; + top: 80px; +} + +.formulario-header .section-eyebrow { + display: inline-block; + font-size: 0.68rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: #c8a96e; + margin-bottom: 1rem; +} + +.formulario-header h2 { + font-size: 2.2rem; + font-weight: normal; + line-height: 1.15; + color: #f5f0e8; + letter-spacing: -0.01em; + margin-bottom: 1.25rem; +} + +.formulario-header p { + font-size: 0.9rem; + line-height: 1.8; + color: rgba(245, 240, 232, 0.4); +} + +form { + display: flex; + flex-direction: column; + gap: 0; +} + +fieldset { + border: none; + border-top: 1px solid rgba(255, 255, 255, 0.06); + padding: 2rem 0; + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +legend { + font-size: 0.68rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: rgba(245, 240, 232, 0.25); + margin-bottom: 1.25rem; + padding: 0; + float: left; + width: 100%; +} + +.field-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.field-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + +label { + font-size: 0.72rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(245, 240, 232, 0.35); +} + +input[type="text"], +input[type="email"], +textarea, +select { + background: rgba(255, 255, 255, 0.04); + border: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.15); + color: #f5f0e8; + font-family: Georgia, serif; + font-size: 0.95rem; + padding: 0.6rem 0.75rem; + outline: none; + transition: border-color 0.2s, background 0.2s; + width: 100%; +} + +input[type="text"]:focus, +input[type="email"]:focus, +textarea:focus, +select:focus { + border-bottom-color: #c8a96e; + background: rgba(255, 255, 255, 0.07); +} + +input::placeholder { + color: rgba(245, 240, 232, 0.2); + font-family: Georgia, serif; +} + +select { + cursor: pointer; + appearance: none; + -webkit-appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(245,240,232,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + padding-right: 2.5rem; +} + +select option { + background: #111; + color: #f5f0e8; +} + +textarea { + resize: vertical; + min-height: 100px; + line-height: 1.6; +} + +.radio-group { + display: flex; + gap: 2rem; + padding: 0.5rem 0; +} + +.radio-group label { + display: flex; + align-items: center; + gap: 0.6rem; + font-size: 0.88rem; + letter-spacing: 0.03em; + text-transform: none; + color: rgba(245, 240, 232, 0.6); + cursor: pointer; +} + +.radio-group input[type="radio"] { + appearance: none; + -webkit-appearance: none; + width: 16px; + min-width: 16px; + height: 16px; + border: 1px solid rgba(245, 240, 232, 0.25); + border-radius: 50%; + cursor: pointer; + position: relative; + transition: border-color 0.2s; +} + +.radio-group input[type="radio"]:checked { + border-color: #c8a96e; +} + +.radio-group input[type="radio"]::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0); + width: 7px; + height: 7px; + border-radius: 50%; + background: #c8a96e; + transition: transform 0.15s ease; +} + +.radio-group input[type="radio"]:checked::after { + transform: translate(-50%, -50%) scale(1); +} + +.checkbox-group { + flex-direction: row; + align-items: center; + gap: 0.75rem; +} + +.checkbox-group input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + width: 15px; + min-width: 15px; + height: 15px; + border: 1px solid rgba(245, 240, 232, 0.25); + border-radius: 2px; + cursor: pointer; + position: relative; + transition: border-color 0.2s, background 0.2s; +} + +.checkbox-group input[type="checkbox"]:checked { + background: #c8a96e; + border-color: #c8a96e; +} + +.checkbox-group input[type="checkbox"]::after { + content: ''; + position: absolute; + top: 2px; + left: 5px; + width: 4px; + height: 7px; + border: 1px solid #0a0a0a; + border-top: none; + border-left: none; + transform: rotate(45deg) scale(0); + transition: transform 0.15s ease; +} + +.checkbox-group input[type="checkbox"]:checked::after { + transform: rotate(45deg) scale(1); +} + +.checkbox-group label { + font-size: 0.85rem; + letter-spacing: 0.02em; + text-transform: none; + color: rgba(245, 240, 232, 0.5); + cursor: pointer; +} + +.student-badge { + font-size: 0.7rem; + letter-spacing: 0.05em; + color: #c8a96e; + border: 1px solid rgba(200, 169, 110, 0.3); + padding: 0.1rem 0.4rem; + border-radius: 2px; + margin-left: 0.4rem; + vertical-align: middle; +} + +.form-submit { + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.06); +} + +.input-icon-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.input-icon { + position: absolute; + left: 0.75rem; + color: rgba(245, 240, 232, 0.25); + pointer-events: none; + transition: color 0.2s; +} + +.input-icon-wrapper input { + padding-left: 2.5rem; +} + +.input-icon-wrapper:focus-within .input-icon { + color: #c8a96e; +} + +@media (max-width: 768px) { + #formulario { + grid-template-columns: 1fr; + gap: 3rem; + } + + .formulario-header { + position: static; + } +} + +/* Footer */ + +#site-footer { + border-top: 1px solid rgba(255, 255, 255, 0.06); + margin-top: 6rem; +} + +.footer-inner { + max-width: 1100px; + margin: 0 auto; + padding: 2.5rem 2rem; + display: flex; + align-items: center; + justify-content: space-between; +} + +.footer-logo { + font-size: 1rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: rgba(245, 240, 232, 0.3); + text-decoration: none; + transition: color 0.2s; +} + +.footer-logo span { + color: rgba(200, 169, 110, 0.4); + transition: color 0.2s; +} + +.footer-logo:hover { color: rgba(245, 240, 232, 0.6); } +.footer-logo:hover span { color: #c8a96e; } + +.footer-links { + display: flex; + gap: 2rem; + list-style: none; +} + +.footer-links a { + font-size: 0.72rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: rgba(245, 240, 232, 0.2); + text-decoration: none; + transition: color 0.2s; +} + +.footer-links a:hover { color: rgba(245, 240, 232, 0.6); } + +.footer-copy { + font-size: 0.72rem; + letter-spacing: 0.05em; + color: rgba(245, 240, 232, 0.15); +} + +@media (max-width: 768px) { + .footer-inner { + flex-direction: column; + gap: 1.5rem; + text-align: center; + } + + .footer-links { + gap: 1.25rem; + } } \ No newline at end of file