SaasLyn – SaaS, AI & Tech Startup NextJS Template

SaasLyn – SaaS, AI & Tech Startup NextJS Template

SaasLyn is a premium, multi-demo Next.js template built for SaaS products, AI startups, and tech companies. It ships with Next.js 16 (App Router), React 19, and TypeScript — so you can launch a polished marketing site without starting from a blank layout.

Four ready homepage concepts are included: CRM Software, Finance Apps, AI Chatbot, and AI Website Builder. Around them sit 19 inner pages — about, features, services, team, careers, pricing, FAQ, blog, auth, legal, and contact — plus dynamic [slug] routes for blog, service, team, and career details.

The codebase is content-driven: copy, links, and images live in src/content/, types in src/types/, and UI in src/components/. Styles use modular SCSS and Bootstrap 5. Motion comes from GSAP (ScrollSmoother, SplitText, ScrollTrigger) and Lenis on the AI Website Builder demo. SEO basics are already wired: metadata, sitemap.xml, and robots.txt.

Requirements

• Node.js 18.18+ (Node 20+ recommended)
• npm, yarn, or pnpm — run npm install then npm run dev / npm run build
• Basic Next.js / React knowledge is helpful for customization

4 Unique Demo Homepages

• Demo 1 – CRM Software (default): Dark SaaS landing with sales charts, feature cards, reports, testimonials, FAQ, pricing, and blog. Live at /crm-software
• Demo 2 – Finance Apps: Finance-product homepage with workflow, integrations, benefits, and a light header. Live at /finance-apps
• Demo 3 – AI Chatbot: AI assistant landing with process steps, brand slider, pricing, and blog. Live at /ai-chatbot
• Demo 4 – AI Website Builder: Isolated dark demo with Poppins, Lenis smooth scroll, and its own SCSS. Live at /ai-website-builder

The root URL / redirects to /crm-software. Change this in next.config.ts if you want another homepage.

Key Features

Scale & Content

• 4 Unique Homepage Designs – CRM, Finance, AI Chatbot, and AI Website Builder
• 19 Inner Pages – About, features, services, team, careers, pricing, FAQ, blog layouts, auth, legal, contact, and 404
• Dynamic Detail Routes – Blog, service, team, and career details generated from typed slug maps
• Content-Driven Architecture – Edit text, links, and images in src/content/ without rewriting JSX
• Reusable Section Components – Banner, features, pricing, FAQ, testimonials, CTA, and more

Next.js & Performance

• Next.js 16 App Router – File-based routing, route groups, and nested layouts
• React 19 – Modern React with the Next.js App Router
• TypeScript – Typed content, props, and page params
• SEO Ready – Page metadata, sitemap.ts, and robots.ts
• next/font – Urbanist & Inter globally; Poppins on the AI Website Builder demo
• next/image – Static image imports from src/assets/images/
• Error Handling – Custom /404 preview and App Router not-found.tsx

Animation & Interactions

• GSAP Animation Suite – Scroll-triggered text, scale, and fade reveals
• GSAP SplitText – Character stagger on .text-anime headings
• GSAP ScrollSmoother – Smooth scrolling on CRM, Finance, AI Chatbot, and inner pages
• Lenis Smooth Scroll – Dedicated scroll system on AI Website Builder
• Directional Fade-In – .fade-anim with data-direction, data-delay, and data-offset
• Animated Counters – Count-up stats with react-countup / intersection observer
• Chart.js – Animated CRM sales and report charts
• Toast Feedback – Login, signup, and contact forms use react-hot-toast

Framework & Architecture

• Bootstrap 5 + React-Bootstrap – Container, Row, Col, Accordion, and responsive grid
• Modular SCSS – Abstracts, base, layout, components, pages, plus an isolated home-five theme
• Swiper 12 – Testimonials, brands, and other sliders
• Header Variants – One Header component, variant="one" | "two" | "three"
• Typed Content Maps – get*BySlug() helpers and generateStaticParams for SSG detail pages

SaaS & Startup Pages

• Service Pages – Service listing plus dynamic details (contact management, sales automation, email integration, and more)
• Team Pages – Team grid and member profiles with skills and contact
• Careers Pages – Openings list and job details with apply form
• Auth Pages – Login and Sign Up
• Blog Pages – Grid, standard + sidebar, and dynamic article details

UI, Icons & Typography

• Custom SVG Icon Components – Feature, pricing, and service icons in src/icons/
• Font Awesome 7 – Included webfonts
• React Icons – Social and UI icons
• CSS Variable Design Tokens – Colors and type scales in src/sass/abstracts/_variables.scss

Quality & Standards

• Fully Responsive – Desktop, laptop, tablet, and mobile
• Clean TypeScript – Consistent component / types / content files
• Well-Organized Folders – Easy to find and customize
• Single-Place Copy Edits – Navigation in src/content/common/Header.content.ts

Support & Updates

• Detailed Documentation – Install, structure, content pattern, colors, logo, and deploy
• Free Updates – Improvements after purchase
• Dedicated Support – Tickets at support.wprealizer.com

Full Page List

Home Demos (4 Pages)

• Home – CRM Software
• Home – Finance Apps
• Home – AI Chatbot
• Home – AI Website Builder

Inner Pages (19 Pages)

• About
• Features
• Services
• Service Details (dynamic /service/[slug])
• Team
• Team Details (dynamic /team/[slug])
• Careers
• Career Details (dynamic /careers/[slug])
• Pricing
• FAQ
• Blog
• Blog Standard
• Blog Details (dynamic /blog/[slug])
• Contact
• Login
• Sign Up
• Privacy Policy
• Terms & Condition
• 404 Error

Tech Stack & Libraries

• Next.js 16 (App Router)
• React 19
• TypeScript
• SCSS (modular architecture)
• Bootstrap 5 & React-Bootstrap
• GSAP (ScrollTrigger, ScrollSmoother, SplitText)
• Lenis (AI Website Builder)
• Swiper 12
• Chart.js (CRM demo)
• react-countup & react-intersection-observer
• react-hot-toast
• Font Awesome 7 & React Icons
• Google Fonts via next/font – Urbanist, Inter, Poppins

Ideal For

• SaaS product marketing sites
• CRM and sales platforms
• Finance and fintech apps
• AI chatbot and assistant products
• AI website builder tools
• Tech startups and software companies
• Agency landing pages for SaaS / AI clients

Files Included

• Complete Next.js project source (saaslyn-next/)
• TypeScript source files
• Modular SCSS source files
• Section components, content modules, and type definitions
• Image & icon assets
• Font Awesome webfonts
• Documentation

Support

Questions or customization help? Open a ticket at support.wprealizer.com. Please include your ThemeForest purchase code and a link to the affected page. We do not provide support through ThemeForest comments.

Note

• Images used in the live preview are for demonstration only and may not all be licensed for redistribution.
• Contact support if you need help replacing demo images.
• Login, signup, contact, and newsletter forms are front-end UI with toast feedback. Wire them to your own API or form service.

Changelog

v1.0.0 – Initial Release

• 4 unique homepage demos (CRM, Finance, AI Chatbot, AI Website Builder)
• 19 inner pages with dynamic blog, service, team, and career routes
• Next.js 16 App Router + React 19 + TypeScript
• Content-driven src/content/ architecture
• Full modular SCSS source included
• GSAP + Lenis animation system
• SEO ready – metadata, sitemap.xml, robots.txt
• Chart.js CRM dashboards and Swiper sliders