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' });
});
});