Customizing Your Site
Site Configuration #
Navigate to the app folder and find the site.config.json file. Open it in a text editor or an IDE of your choice. Below are the details for each property:
title: The title of your site. This will be used as the title of your site in the browser tab if not specified in the each page configuration.
"title": "Safal"
description: The description of your site. This will be used as the description of your site metadata if not specified in the each page configuration.
"description": "Safal is a modern lightweight SaaS & marketing template built with Next.js"
logo: This is the logo of your site. It will be used in the header and footer of your site. You will need to put the logo in the public folder and reference it here. Alternatively, you can use absolute URL to reference the logo from extera sources.
"logo": "/logo.png"
header: This contains the configuration for the header of your site. It includes the right and left navigation links and the call to action button.
"header": { "nav": { "left": [ { "href": "/#features", "label": "Features" }, { "href": "/#components", "label": "Components" }, { "href": "/#pricing", "label": "Pricing" }, { "href": "/#faqs", "label": "FAQs" } ], "right": [ { "href": "/home-2", "label": "Home 2" }, { "href": "/home-2/inner-page", "label": "Inner Page" } ] }, "cta": { "href": "/purchase", "label": "Purchase Now" } }
footer: This contains the configuration for the footer of your site. It includes the navigation links, the tagline, the social links, the copyright, and the legal links.
"footer": { "nav": [ { "href": "/home-2", "label": "Features" }, { "href": "/home-2/inner-page", "label": "Sitemap" }, { "href": "/contact", "label": "Contact" }, { "href": "/about", "label": "About" }, { "href": "/#faqs", "label": "FAQs" } ], "tagline": "Safal is a simple, easy to use, nextjs template.", "socials": [ { "href": "https://facebook.com/Safal", "type": "facebook" }, { "href": "https://instagram.com/Safal", "type": "instagram" }, { "href": "https://x.com/Safal", "type": "x" }, { "href": "https://github.com/Safal", "type": "github" }, { "href": "https://youtube.com/Safal", "type": "youtube" } ], "copyright": "© 2024 Safal. All rights reserved.", "legal": [ { "href": "/privacy", "label": "Privacy Policy" }, { "href": "/terms", "label": "Terms of Service" } ] }
Pages Configuration #
The pages configuration is managed in a file named pages.config.json, which maps each page's slug to its corresponding file. The key is the slug of the page and the value is the name of the file in the app/pages directory without the .json extension.
{ "/": "home", "/home-2": "home-2", "/home-2/inner-page": "inner-page", "/privacy": "privacy-policy", "/terms": "terms-of-service", "/about": "about-us", "/contact": "contact-us", "/404": "404" }
Page Configuration #
Each page has its own configuration file and they have the same structure. These files are located in the app/pages folder. Here is a sample of the page configuration json file:
{ "title": "The title of the page", "description": "The description of the page", "sections": { "Hero": { ... }, "LogosCarousel": { ... }, "ProductShowcase": { ... }, "ContentGrid": { ... }, "MediaContentSplit": { ... }, "Pricing": { ... }, "FAQs": { ... }, "Testimonials": { ... }, "CTABanner": { ... }, "ContentBlock": { ... }, "NotFound": { ... } } }
title & description are the title and description of the page. They are used for SEO purposes.
Let's go through each section and see how to configure them.
Hero
The hero section is the main section of the page. It is the first section that visitors see when they visit the page. It includes a title, a description, an eyebrow, a layout, an alignment, an image, and a call to action button.
"Hero": { "id": "hero", "title": "Build your SaaS faster with Safal.", "description": "A modern Next.js template with carefully crafted components and responsive layouts to save you hundreds of development hours.", "eyebrow": { "text": "Welcome to Safal. Learn more", "variant": "secondary", "link": { "href": "/features" } }, "layout": "half", "align": "left", "image": { "src": "/bg-14.svg", "alt": "Safal Dashboard Features", "width": 1000, "height": 1000 }, "cta": [ { "label": "Get started", "href": "/signup" }, { "label": "View demo", "href": "/demo", "variant": "tertiary" } ] }
"Hero": { "id": "hero", "title": "Build your SaaS faster with Safal.", "description": "A modern Next.js template with carefully crafted components and responsive layouts to save you hundreds of development hours.", "eyebrow": { "text": "Welcome to Safal", "variant": "secondary" }, "layout": "full", "align": "center", "cta": [ { "label": "Get started", "href": "/signup" }, { "label": "View demo", "href": "/demo", "variant": "secondary", "icon": "square-play", "iconPosition": "left" } ] }
"Hero": { "id": "hero", "title": "Page Title", "description": "Some page description", "background": "grayDark", "align": "center", "gutterBottom": false, "theme": "dark" }
LogosCarousel
This section is a carousel of logos. It includes a title, a description, and a list of logos.
"LogosCarousel": { "id": "trusted-by", "heading": { "title": "Trusted by innovative teams worldwide", "titleVariant": "h3" }, "icons": ["adobe", "google", "github", "notion", "spotify", "linear"], "align": "center" }
ProductShowcase
This section is a showcase of the product. It includes a heading with a title and a description, an alignment and an image.
"ProductShowcase": { "id": "components", "align": "center", "heading": { "title": "Beautiful components, ready to use.", "description": "30+ production-ready components designed to convert visitors into customers." }, "image": { "src": "/bg-15.svg", "alt": "Safal Dashboard Features", "width": 1000, "height": 1000, "className": "mt-12 mx-auto bg-white rounded-t-3xl w-full max-w-5xl h-[640px]" } }
ContentGrid
"ContentGrid": { "id": "features", "heading": { "title": "Everything you need to build a great SaaS.", "description": "Stop wasting time building components from scratch. Safal gives you a complete foundation to help launch your product faster." }, "align": "center", "items": [ { "icon": "bolt", "title": "Lightning Fast", "description": "Built with performance in mind using Next.js, delivering blazing fast page loads and smooth interactions." }, ... ] }
MediaContentSplit
"MediaContentSplit": { "id": "media-with-content", "background": "white", "theme": "light", "eyebrow": { "text": "Powerful Features" }, "title": "Everything you need to launch faster", "description": "Stop reinventing the wheel. Safal provides a complete foundation of pre-built components and features so you can focus on what makes your SaaS unique.", "mediaPosition": "right", "media": { "src": "/bg-17.svg", "alt": "Safal Dashboard Features", "width": 677, "height": 600 }, "buttons": [ { "label": "Explore Features", "href": "/features", "variant": "secondary" }, { "label": "View Demo", "href": "/demo", "variant": "text" } ] }
"MediaContentSplit": { ... "background": "white", "theme": "light", ... }
"MediaContentSplit_2": { "id": "media-with-content-2", "eyebrow": "Developer Experience", "title": "Built for developers, by developers", "description": "Clean, well-documented TypeScript code with modern development practices.", "mediaPosition": "left", "media": { "src": "/bg-18.svg", "alt": "Developer Experience Image", "width": 677, "height": 677 }, "buttons": [ { "label": "View Documentation", "href": "/docs", "variant": "secondary" }, { "label": "Learn More", "href": "/features", "variant": "text" } ] }
Pricing
"Pricing": { "id": "pricing", "heading": { "title": "Simple, transparent pricing", "description": "Choose the perfect plan for your project. All plans include future updates." }, "align": "center", "items": [ { "price": "$29", "period": "/month", "name": "Standard License", "description": "Perfect for individual developers and small projects.", "features": [ "All components & features", ... ], "isPopular": false, "link": { "href": "/buy/standard", "label": "Buy Standard", "icon": "arrow-right", "iconPosition": "right" } }, { "price": "$49", "period": "/month", "name": "Extended License", "description": "For teams and commercial projects with advanced needs.", "features": [ "Everything in Standard", ... ], "isPopular": true, "link": { "href": "/buy/extended", "label": "Buy Extended", "icon": "arrow-right", "iconPosition": "right" } }, { "price": "$99", "period": "/month", "name": "Enterprise", "description": "Custom solutions for large organizations.", "features": [ "Everything in Extended", ... ], "isPopular": false, "link": { "href": "/contact", "label": "Contact Sales", "icon": "arrow-right", "iconPosition": "right" } } ] }
FAQs
"FAQs": { "id": "faqs", "heading": { "title": "Frequently asked questions", "description": "Have questions? We're here to help." }, "size": "small", "items": [ { "title": "What components and features are included in the Safal template package?", "description": "Safal includes 30+ customizable components, full TypeScript support, responsive layouts, dark mode, documentation, and 6 months of updates and support." }, ... ] }
Testimonials
"Testimonials": { "id": "testimonials", "heading": { "title": "Loved by developers", "description": "Join hundreds of developers who have accelerated their development process with Safal." }, "align": "center", "testimonials": [ { "name": "Sarah Chen", "text": "Safal saved us weeks of development time. The components are beautifully designed and the code is clean and well-documented. I especially love how flexible and customizable everything is - it's made our development process so much smoother. The TypeScript integration is flawless.", "image": "/img/profile1-w.jpg", "title": "Lead Developer, TechCorp" }, { "name": "Marcus Wonman", "text": "The best SaaS template I've used.", "image": "/img/profile2-w.jpg", "title": "Founder, DevStudio" }, ... ] }
CTABanner
"CTABanner": { "id": "get-started", "heading": { "title": "Ready to accelerate your development?", "description": "Join hundreds of developers who are building better SaaS products faster with Safal." }, "align": "center", "theme": "dark", "background": "primary", "cta": [ { "label": "Get started", "href": "/signup" } ] }
"CTABanner": { ... "theme": "light", "background": "white", ... }
ContentBlock
"ContentBlock": { "id": "body-content", "content": [ { "variant": "h3", "children": "1. Information We Collect" }, { "variant": "p", "children": "We collect information that you provide directly to us, including your name, email address, and any other information you choose to provide when using our services." }, { "variant": "h5", "children": "1.1 Automatically Collected Information" }, { "variant": "p", "children": "When you use our Service, we automatically collect certain information about your device, including information about your web browser, IP address, time zone, and some of the cookies that are installed on your device." }, ... ] }
NotFound
"NotFound": { "oopsTitle": { "variant": "h1", "children": "Oops" }, "notFoundTitle": { "variant": "h3", "children": "404 - PAGE NOT FOUND" }, "notFoundText": { "variant": "p", "children": "The page you are looking for might have been removed, had its name changed, or is temporarily unavailable." }, "notFoundCtas": [ { "label": "Go back to home", "variant": "tertiary", "href": "/", "icon": "arrow-right", "iconPosition": "right" } ] }
