Convertly - 3 HTML Landing Page Templates

Convertly is a set of 3 HTML landing page templates: Agency, AI SaaS, and Product SaaS. Each one targets a specific market with its own content, copy, and layout decisions. They share the same design system and codebase, which keeps the code consistent and makes each one easy to customize.

Built with HTML, CSS, and vanilla JavaScript. No npm, no build tools, no frameworks required. Open index.html in a browser to preview, edit the files in any code editor, and deploy to any static host. Each template ships with 10–11 sections ready to customize.

Each template is written in the voice of the business it represents. The Agency speaks to potential clients of a design studio. The AI SaaS addresses users evaluating an automation tool. The Product SaaS targets teams considering a software solution. Headlines, feature cards, testimonials, and calls to action all reflect that perspective — every section is ready to use as a starting point, not just a visual placeholder.

The three templates

• Agency: for design studios and freelance agencies. 6 service cards (brand identity, conversion, web design, content, SEO, ongoing support), client metrics in the Spotlight section, and a testimonials section.
• AI SaaS: for AI tools and startups. Includes a "How it works" section (3 steps: Connect, Automate, Focus), feature cards, and a confidence score task panel in the Spotlight section.
• Product SaaS: for software products. Focused on feature presentation, a project progress dashboard, and a pricing section with three tiers.

Sections included in every template

• Hero: a before/after compare slider with drag, touch, and keyboard support. The content on each side follows the same voice as the rest of the variant — the story fits the niche, not just the layout.
• How it works (AI SaaS): 3 numbered steps with large decorative numbers and icons, positioned between the Hero and Features sections.
• Features / Services: 6 cards per variant, each with an SVG icon.
• Stats: counters that animate once when they enter the viewport. Cubic ease-out easing. Respects prefers-reduced-motion.
• Testimonials: infinite-loop carousel, responsive (3 columns on desktop, 2 on tablet, 1 on mobile).
• Logo Cloud: six custom SVG brand marks per variant as a social proof section.
• Spotlight: a section with a live-data panel mockup specific to each variant (client metrics, AI task queue, project overview).
• Pricing: three-tier cards with a featured tier.
• FAQ: accordion with smooth open/close animation. Five questions with full answers per variant.
• CTA: a pre-footer section with animated gradient background.
• Footer: social links chosen for each variant's audience.

Navigation uses an off-canvas drawer on mobile with scroll lock that works on iOS Safari. The active section is highlighted in the nav as you scroll.

Colors are defined with CSS custom properties. Changing --primary and --primary-rgb in assets/css/main.css (find :root { near the top) updates the entire template, including gradients, shadows, and transparent accents.

Documentation is included at docs/index.html.

Features

• 3 HTML templates: Agency, AI SaaS, Product SaaS
• Before/after compare slider in the hero — drag, touch, and keyboard support
• "How it works" section (AI SaaS — 3 numbered steps with large decorative numbers and icons)
• Stats counters animated on scroll (fires once, respects prefers-reduced-motion)
• Infinite-loop testimonials carousel (3/2/1 columns responsive)
• Off-canvas mobile navigation (iOS scroll-lock compatible)
• Logo cloud with custom SVG brand marks per variant
• Spotlight section with a live-data panel mockup per variant
• FAQ accordion (5 questions with full answers per variant)
• Animated gradient CTA section
• Pure HTML/CSS/JS, no frameworks, no npm
• Colors controlled by CSS custom properties (one variable to change the brand color)
• Fully responsive
• Tested on Chrome, Firefox, Safari, Edge, iOS Safari
• Commercial license included
• Documentation included (docs/index.html)

Requirements

• A modern web browser (Chrome, Firefox, Safari, or Edge) to preview
• Any code editor (VS Code, Sublime Text, Notepad++) to customize
• No build tools, no npm, no server needed. Open index.html directly in your browser.
• To deploy: any static hosting (Netlify, Vercel, GitHub Pages, Cloudflare Pages, cPanel, etc.)

Instructions

1. Download and extract the .zip file.
2. Choose a template: open the agency/, ai-saas/, or product-saas/ folder.
3. Open index.html in your browser to preview.
4. Edit index.html to update text, images, and links.
5. Open assets/css/main.css and find :root { near the top. Update --primary and --primary-rgb to change the brand color.
6. Replace images in assets/img/ with your own.
7. Upload the folder to any static host when ready.

Full documentation with customization details is available in docs/index.html.