Technologies
- Astro 6 Zero-JS-by-default static output — minimal JavaScript for fast load times on variable mobile connections.
- Tailwind CSS v4 (Vite plugin) @tailwindcss/vite integration with @theme block for a fully custom palette and font scale.
- Inter + Fraunces (Google Fonts) Inter for body readability; Fraunces optical-size serif for display headings matching the environmental brand.
- Vanilla JavaScript (IntersectionObserver + mobile nav) Lightweight scroll-reveal and hamburger nav with no framework dependency.
- Vercel Static hosting with automatic preview deployments on every push.
Project Overview
EcoExport is a landing page built for an Argentine company that purchases and exports non-ferrous and ferrous scrap metal — copper, bronze, aluminum, and stainless steel — to industrial buyers across Asia, Europe, and the Americas. The page positions EcoExport as a full-service export partner: from on-site pickup and classification through customs documentation and final shipment. The site is live at eco-landing-pearl.vercel.app.
Objectives
- Present the Service Clearly — Communicate a complex logistics chain (pickup → classification → export) in a way that non-technical sellers — industry owners, demolition contractors, and individuals — can immediately understand and trust.
- Drive Quote Requests — Funnel visitors toward a contact form with material type pre-selection, reducing friction for first-time inquiries.
- Reinforce Environmental Credibility — Surface sustainability messaging (circular economy, CO₂ avoided) alongside the commercial pitch, supporting both regulatory positioning and brand differentiation.
Project Workflow
- Single-Page Architecture — All content lives on one scrollable page (
index.astro) composed of eight purpose-built components — Header, Hero, Marquee, Service, Materials, Process, About, Contact, and Footer — each corresponding to a distinct conversion step. - Component-Driven Build — Each section is an isolated
.astrocomponent, keeping markup and logic co-located and making future content updates straightforward. - Custom Design System — A
leafcolor palette (11 steps, fromleaf-50toleaf-950) and abarkaccent were defined as CSS custom properties via Tailwind v4’s@themeblock, eliminating the need for a separate config file. - Reveal-on-Scroll UX — An
IntersectionObserverin the layout script progressively reveals sections as the user scrolls, adding perceived polish without a JavaScript framework. - Deployed to Vercel — Static output via
astro build, deployed on Vercel’s edge network with no server-side runtime.
Results and Impact
- Full Single-Page Coverage — The landing covers the complete conversion funnel — value proposition, service detail, materials catalog, four-step process, company background, and contact form — in a single cohesive scroll.
- No External Runtime Dependencies — The final build ships zero frontend framework JavaScript; all interactivity is handled by ~30 lines of vanilla JS in the layout.
- Accessible and Mobile-Ready — Responsive grid layouts, a collapsible mobile nav, and
aria-hiddendecorative SVGs are built in from the start.
