Designed with Astro 5 and React 19, this template combines bold, modern layouts with buttery-smooth GSAP animations and a robust content structure to guide visitors through your services and projects effortlessly. This is a premium agency presence that feels confident, fast, and production-ready from day one.
Who is this template for?
Olmo Studio is ideal for:
- Digital Studios & Branding Teams looking for a high-end portfolio.
- Marketing & Creative Agencies wanting a cinematic, motion-focused presence.
- Web Development Agencies that prioritize performance and modern tech stacks.
- Freelancers who value design precision and production-ready code.
General Features
- Ultra-fast Performance: Built with Astro 5 for optimal loading speeds and top-tier SEO.
- Modern Design: Contemporary UI powered by the latest Tailwind CSS v4.
- Smooth Motion: Professional GSAP-powered transitions and scroll-triggered animations.
- Sticky Card Stacking: A unique desktop project showcase where cards stack with scale animations.
- SEO Optimized: Centralized management for meta tags, sitemaps, and robots.txt.
- Fully Responsive: Meticulously optimized for mobile, tablet, and desktop viewing.
- Secure Contact System: Server-side validation with Zod and email delivery via Resend.
Technology Overview (Non-Technical)
Olmo Studio is built with modern, reliable web technologies to ensure a future-proof foundation without unnecessary complexity:
- Astro 5.17: The latest framework for high-speed, content-driven websites.
- React 19.2: Powers interactive features like the mobile menu and testimonial carousels.
- Tailwind CSS 4.1: Cutting-edge styling for flexibility and consistency.
- Lenis 1.3: Provides a high-end, smooth scrolling experience.
- Resend & Upstash: Secure email delivery and optional anti-spam protection for your contact form.
Included Pages & Sections
The template includes all essential pages for a professional digital agency:
- Home: High-impact hero with video, about section, partner logos, featured projects, and testimonials.
- Works (Portfolio): A full grid of your projects and individual project detail pages generated from Markdown.
- Studio (About): Your agency's story, core values grid, work process timeline, and team member profiles.
- Contact: Production-ready form, FAQ section with accordions, and detailed company information.
- Services: Dedicated detail pages for each service your agency offers.
- Legal & Utility: Privacy Policy, Terms of Service, Licensing, and a custom 404 page.
Additional Highlights
- Performance, SEO & Accessibility: Optimized for top-tier search rankings, WCAG compliance, and lightning-fast loading times.
- Comprehensive Documentation: Includes clear instructions explaining the project structure and how to use every feature effectively.
- Centralized Content: All text and translations are managed in a single labels.ts file for easy updates.
- Sticky Navbar: A smart header that shrinks and gains rounded corners on scroll via GSAP.
- Type-Safe Configuration: All data (team, services, values) is powered by TypeScript for error-free customization.
- Flexible Styling: Easily customize colors and typography directly in the CSS theme.
- Asset Organization: Structured folders for optimized images, custom icons, and fonts.
Summary Olmo Studio is more than just a template; it is a robust digital foundation for the modern agency. With a cinematic design approach, smooth motion, and a scalable architecture, it is built to showcase your work and convert visitors with confidence.
