Porto – Angular 22 Website Templates & App Landing Pages
Porto is a multipurpose, elegant and responsive Angular 22 template built with Bootstrap 5, SCSS and TypeScript. Choose from 15+ unique homepage designs and 16+ supportive pages, from portfolios and SaaS to app promotion and agency sites.
- Angular 22
- Bootstrap 5
- SCSS
- TypeScript
One Angular Template for Every Kind of Showcase
Porto covers the business UI you are likely to need, so you can launch a polished Angular website without starting from a blank page.
Portfolios
Show your work in filterable galleries with an integrated image lightbox.
App Landing Pages
Promote mobile and web apps with screenshots, features and download buttons.
SaaS & Software
Present pricing plans, feature highlights and FAQs for your software product.
Agencies
Digital and creative agency layouts with animated headlines and parallax.
Startups
Launch fast with video hero sections, services, work and testimonials.
Business Websites
Corporate layouts with services, team, case studies and a contact form.
Bloggers
Six blog layouts with sidebars, post details, comments and pagination.
Promotions
One-page and coming soon pages for campaigns, launches and promotions.
Unique Angular Homepage Designs
Pick the layout closest to your project. Each homepage is built from reusable components, so you can mix sections and menus freely. Click any card to open the live demo.
Homepage 01Multipurpose Landing
Flagship multipurpose homepage for app landing pages, SaaS and agencies.
Homepage 02Conversion Landing Page
Centered logo header with pricing, team, blog and contact sections.
Homepage 03Clean App Template
Services slider, animated counters, pricing tables and a team section.
Homepage 04Typed Headline Parallax
Typed headline, parallax banner, feature cards and a portfolio grid.
Homepage 05One-Page Portfolio
Animated banner, filterable gallery and client testimonials for showcases.
Homepage 06Mobile App Showcase
Screenshots slider, features, download buttons and a newsletter form.
Homepage 07Agency Vertical Slider
Full-screen vertical slider, services, portfolio lightbox and pricing.
Homepage 08Software Video Hero
Video hero, feature highlights, pricing plans, blog and contact.
Homepage 09Creative SVG Steps
Parallax hero with animated SVG process steps for studios and freelancers.
Homepage 10Business Website
Hero banner, services, case studies, pricing and team blocks.
Homepage 11Startup Video Modal
Video modal hero, services grid, work gallery and testimonials.
Homepage 12Scroll Parallax
Smooth scroll parallax sections for storytelling and product tours.
Homepage 13Digital Agency
Animated headlines, feature cards, portfolio, facts and a contact form.
Homepage 14SaaS Landing Page
Coverflow screenshots, features, pricing plans, FAQs and app downloads.
Homepage 15Corporate Gradient
Gradient sections, client logos, portfolio, team, blog and contact form.
Authentication, Blog, Contact and More
Every project needs more than a homepage. Porto includes the supporting pages, ready to connect to your own data.
Everything You Need for an Angular Website
A complete set of layouts, components and developer-friendly code so you can launch fast and customize easily.
Built on Angular 22
Standalone components and lazy loaded routes with the latest Angular tooling and no NgModules.
Bootstrap 5 & SCSS
Responsive mobile-first layouts with organized SCSS partials, variables and mixins.
Sticky & Normal Menus
Fixed on scroll or static headers, switchable per homepage with a simple class.
Multi Menu Variations
Top navigation, centered logo, button nav and slide-in sidebar menus included.
Lightbox & Sorting
Integrated image lightbox and category filtering for portfolio galleries.
Contact Form with PHP
Validated form that posts to a bundled PHP mail script, ready for your hosting.
Parallax Pages
Parallax hero banners and scroll sections for striking storytelling layouts.
Attractive Animations
Scroll animations, typed text, counters, particles and animated SVG steps.
Auth, Coming Soon & Blog
Login, register, lock screen, coming soon and six blog page layouts.
Easy to Customize
Content lives in typed data files and reusable components you can edit quickly.
Scrollspy Navigation
The menu highlights the active section and scrolls smoothly as visitors explore.
Best Selling Template
A proven multipurpose design with documentation, free updates and premium support.
A Multipurpose Angular Template Built for Real Projects
Porto is an Angular 22 website template for teams and freelancers who want to launch quickly without giving up code quality. Instead of a single demo, you get more than fifteen finished homepage designs that cover the most common needs: Angular portfolio websites, app landing pages, SaaS and software promotion pages, digital agency sites, startup pages and corporate business websites.
Every layout is built from reusable standalone Angular components, styled with Bootstrap 5 and organized SCSS, and written in TypeScript. You can mix sections between homepages, switch the menu style, change colors from a few variables and edit content from typed data files, so customizing Porto does not mean rewriting templates.
Beyond the homepages, Porto includes the supporting pages most websites need: six blog layouts with sidebars and post details, a contact page with a working PHP form, login and register pages, a lock screen, an email confirmation page and coming soon pages for campaigns and launches.
Porto is responsive and works across modern browsers and mobile devices. It also supports search friendly pages, because every route is prerendered and page titles, descriptions and structured data are managed from one JSON file. Your purchase includes one year of free premium support and unlimited updates.
Which Porto Homepage Fits Your Project?
Start from the design closest to your goal and adapt it.
Angular Portfolio Website
Homepage 5 combines an animated banner, a filterable gallery with lightbox and client testimonials, ideal for designers, developers and photographers.
App Landing Page
Homepages 6 and 14 add screenshot sliders, feature sections, download buttons and a newsletter form to promote a mobile or web app.
SaaS & Software Promotion
Homepages 8 and 14 offer a video hero, feature highlights, pricing plans and FAQs for software and subscription products.
Digital & Creative Agency
Homepages 7, 9 and 13 bring a full-screen slider, animated SVG steps and animated headlines to present services and case studies.
Startup Launch Page
Homepage 11 uses a video modal hero, services grid, work gallery and pricing to get a new product online fast.
Business & Corporate Website
Homepages 10 and 15 provide services, team, client logos, blog and a multi-field contact form for company websites.
Contact Form Integrated with PHP
Visitors fill in a validated Angular form, and a bundled PHP script checks the fields and sends the message to your inbox.
- Name, email, phone and message fields with validation
- Posts to
assets/php/contact.phpwith no extra backend - Works on any PHP hosting with mail enabled
Modern, Maintainable Front-End Stack
Built with current tooling and well known libraries, so it is easy to extend and keep up to date.
| Area | Technology |
|---|---|
| Framework | Angular 22 with standalone components, lazy routes and prerendering |
| Styling | Bootstrap 5.3 with organized SCSS partials and per-homepage theme files |
| Language | TypeScript 6 with strict compiler settings |
| Sliders & media | Swiper, Owl Carousel, PhotoSwipe lightbox, Shuffle.js sorting |
| Animation | AOS, Typed.js, Jarallax and parallax.js, tsParticles, Vivus SVG, Velocity |
| Build & tests | Angular CLI with the Vite based builder and Vitest unit tests |
Up and Running in Minutes
Install, run and customize with the standard Angular workflow.
Install
Install Node.js and the Angular CLI, then run npm install inside the template folder.
Run
Start the dev server with npm start and open http://localhost:4200.
Customize & Deploy
Edit data files, images and SCSS variables, then run npm run build and upload the output.
Also Available for NextJS and Bootstrap
Prefer a different stack? Porto comes in more flavors.
PORTO NextJS Website Templates
The React and NextJS version for app landing pages and websites.
View NextJS VersionPORTO Bootstrap 5 Website Templates
The plain HTML and Bootstrap 5 version for app landing pages and websites.
View Bootstrap VersionFrequently Asked Questions
What is the Porto Angular template?
Porto is a multipurpose Angular 22 website template built with Bootstrap 5, SCSS and TypeScript. It ships with 15+ unique homepage designs and 16+ supportive pages, including authentication, blog, contact, lock screen and coming soon pages.
Which versions of Angular and Bootstrap does Porto use?
Porto is built on Angular 22 with Bootstrap 5.3, SCSS and TypeScript. It uses standalone components with lazy loaded routes, so there are no NgModules.
Does the contact form really work?
Yes. The contact form posts to a bundled PHP script (assets/php/contact.php) that validates the fields and sends the email. You need PHP hosting with mail enabled and your own recipient address.
Can I use Porto for a portfolio or an app landing page?
Yes. Porto includes portfolio, app showcase, SaaS, agency, startup, corporate and business homepage layouts, so you can start from the design closest to your project.
Does Porto include lightbox, sorting and parallax?
Yes. The image lightbox and filter sorting are integrated, and several homepages include parallax backgrounds, typed text, animated counters and scroll animations.
Is there a NextJS or plain Bootstrap version?
Yes. Porto is also available as a NextJS template and as a Bootstrap 5 HTML template. See the links in the Other Versions section.
Is the template responsive?
Yes. Every page is responsive and works on modern desktop and mobile browsers.
Is Porto good for SEO?
Porto prerenders every route during the production build, so pages are served as static HTML. Page titles, meta descriptions and JSON-LD structured data are managed from a single seo.json file, and the markup uses semantic headings and alt text.
Which homepage should I choose for an app landing page?
Homepage 6 is built around an app screenshots slider with download buttons, and Homepage 14 is a SaaS style layout with coverflow screenshots, pricing plans and FAQs.
Can I use Porto for multiple client projects?
Licensing depends on the license you purchase. Check the license terms on the purchase page for single and multiple project use.
What support and updates are included?
Your purchase includes one year of free premium support and unlimited updates.
Build Your Angular Website with Porto
Best code quality, one year of free premium support and unlimited updates.