153 lines
5.9 KiB
Text
153 lines
5.9 KiB
Text
doctype html
|
|
html(lang="en")
|
|
head
|
|
meta(charset="utf-8")
|
|
meta(name="viewport" content="width=device-width, initial-scale=1")
|
|
title= title
|
|
link(rel="icon" type="image/png" href="/favicon.png")
|
|
link(rel="preconnect" href="https://fonts.googleapis.com")
|
|
link(rel="preconnect" href="https://fonts.gstatic.com" crossorigin)
|
|
link(rel="stylesheet" href="/css/styles.css")
|
|
|
|
body
|
|
.app-container
|
|
// Navigation
|
|
nav.nav
|
|
a.nav-logo(href="/")
|
|
img(src="/freshyo-logo.png" alt="Freshyo" width="40" height="40")
|
|
span Freshyo
|
|
ul.nav-links
|
|
li: a(href="#features") Features
|
|
li: a(href="#stats") Stats
|
|
li: a(href="/privacy-policy") Privacy
|
|
|
|
// Main Content
|
|
.app-content
|
|
// Hero Section
|
|
section.hero
|
|
.hero-content
|
|
span.hero-badge Freshness Delivered, Smiles Picked Up
|
|
h1 Fresh Meat, Fruits & Veggies
|
|
p.hero-subtitle Experience the true taste of nature. 100% fresh products delivered straight to your doorstep with care and quality.
|
|
.hero-actions
|
|
a.btn.btn-primary(href="/qr-based-download") Get the App
|
|
a.btn.btn-secondary(href="#features") Learn More
|
|
|
|
// Social Proof
|
|
.social-proof
|
|
.avatars
|
|
img.avatar(src="/freshyo-logo.png" alt="Farmer")
|
|
img.avatar(src="/freshyo-logo.png" alt="Customer")
|
|
img.avatar(src="/freshyo-logo.png" alt="Partner")
|
|
span.avatar-count +500
|
|
p.social-text Join 10,000+ happy families
|
|
|
|
// Features Section
|
|
section.section-header#features
|
|
h2 Why Choose Freshyo?
|
|
p.section-subtitle Quality you can trust, freshness you can taste
|
|
|
|
.feature-grid
|
|
.feature-card
|
|
.feature-icon-wrapper
|
|
svg(width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2")
|
|
path(d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z")
|
|
path(d="M12 6v6l4 2")
|
|
.feature-content
|
|
h3 Farm Fresh & Healthy
|
|
p Nutrient-rich products straight from nature, packed with health and vitality
|
|
|
|
.feature-card
|
|
.feature-icon-wrapper
|
|
svg(width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2")
|
|
rect(x="1" y="3" width="15" height="13")
|
|
polygon(points="16 8 20 8 23 11 23 16 16 16 16 8")
|
|
circle(cx="5.5" cy="18.5" r="2.5")
|
|
circle(cx="18.5" cy="18.5" r="2.5")
|
|
.feature-content
|
|
h3 Trusted Delivery
|
|
p Farm to your doorstep with care. Freshness guaranteed, no preservatives
|
|
|
|
.feature-card
|
|
.feature-icon-wrapper
|
|
svg(width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2")
|
|
path(d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z")
|
|
.feature-content
|
|
h3 Quality Assured
|
|
p Every product vetted for quality. If it's not good enough for our family, it's not for yours
|
|
|
|
// Stats Section
|
|
.stats-section#stats
|
|
h2.stats-title Our Growing Family
|
|
.stats-grid
|
|
.stat-card
|
|
.stat-value(data-target="500") 0
|
|
span.stat-suffix +
|
|
span.stat-label Happy Farmers
|
|
.stat-card
|
|
.stat-value(data-target="10000") 0
|
|
span.stat-suffix +
|
|
span.stat-label Families Served
|
|
.stat-card
|
|
.stat-value(data-target="100") 0
|
|
span.stat-suffix %
|
|
span.stat-label Organic Products
|
|
|
|
// CTA Section
|
|
section.cta-section
|
|
.cta-content
|
|
h2 Ready to Experience Freshness?
|
|
p Download the app and get fresh products delivered to your door
|
|
a.btn.btn-white(href="/qr-based-download") Download Now
|
|
|
|
// Footer
|
|
footer.footer
|
|
.footer-content
|
|
.footer-brand
|
|
img(src="/freshyo-logo.png" alt="Freshyo" width="32" height="32")
|
|
span Freshyo
|
|
.footer-links
|
|
a(href="#") For Farmers
|
|
a(href="#") For Consumers
|
|
a(href="/privacy-policy") Privacy Policy
|
|
a(href="/delete-account") Delete Account
|
|
p.footer-copyright © #{year} Freshyo Inc. All rights reserved.
|
|
|
|
script.
|
|
// Stats counter animation
|
|
const statsObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const valueEl = entry.target.querySelector('.stat-value');
|
|
const target = parseInt(valueEl.dataset.target);
|
|
animateValue(valueEl, 0, target, 2000);
|
|
statsObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
document.querySelectorAll('.stat-card').forEach(card => {
|
|
statsObserver.observe(card);
|
|
});
|
|
|
|
function animateValue(element, start, end, duration) {
|
|
const startTime = performance.now();
|
|
function update(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const easeOutQuart = 1 - Math.pow(1 - progress, 4);
|
|
const current = Math.floor(start + (end - start) * easeOutQuart);
|
|
element.textContent = current.toLocaleString();
|
|
if (progress < 1) requestAnimationFrame(update);
|
|
}
|
|
requestAnimationFrame(update);
|
|
}
|
|
|
|
// Smooth scroll
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
|
});
|
|
});
|