Update the Header
Update the Hero
Update the Feature Images
Update the Testimonials
Update the Features
Update the Footer
The landing page is defined at the app/routes/index.tsx
route file.
<div className="relative space-y-16 overflow-hidden bg-white text-gray-800 dark:bg-gray-900 dark:text-slate-200">
<Hero socialProof={data.socialProof} />
<LogoClouds />
<FeatureImages />
<Testimonials items={data.testimonials} socialProof={data.socialProof} />
<Features />
<FooterBlock />
</div>
On every marketing/front page, you need to add the app/components/front/Header.tsx component
to define your navigation structure.
πΏ Open the Header component file and add a new navigation item:
const links: NavbarItemDto[] = [
{ path: "/", title: t("front.navbar.product") },
{ path: "/pricing", title: t("front.navbar.pricing") },
{ path: "/docs", title: "Docs", className: "" },
{ path: "/blog", title: "Blog", className: "hidden xl:block" },
+ {
+ title: "My navbar item",
+ items: [
+ { path: "/my-path-1", title: "Title 1", description: "Description 1" },
+ { path: "/my-path-2", title: "Title 2", description: "Description 2" },
+ { path: "/my-path-3", title: "Title 3", description: "Description 3" },
+ ],
+ },
];
This will create a Flyout navbar item:
The Hero component uses translations.
πΏ Open the public/locales/en/translations.json
file, and replace Easily Build Your Own SaaS
to My new hero headline
(which is the front.hero.headline1 i18n key).
The component FeatureImages lets you showcase your product.
πΏ Open the app/components/front/FeatureImages.tsx
file and add a new feature:
const featureImages = [
+ {
+ group: "My Feature Group",
+ title: "Feature title",
+ route: "/feature-route",
+ src: "https://via.placeholder.com/1000x500.png?text=My%20feature",
+ },
...
There are 2 main objectives with this section:
Social proof
Quote current customers
For social proof, I actually use the GitHub API (at the app/utils/integrations/githubService.ts
file) to get the current private repository members: used by X developers.
And quotes are hard-coded at the app/utils/services/marketingService.ts
file, with the getTestimonials
function.
Each testimonial has:
Company Name, URL, and Logo (light and dark mode)
Name, Avatar, Role, and their Twitter or personal website.
The Quote
πΏ Open the app/components/front/Features.tsx
component and add a new section with 4 features.
...
const groups = [
+ {
+ headline: "New section",
+ subheadline: "Lorem",
+ description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut...",
+ items: [
+ {
+ name: "My feature 1",
+ description: "Lorem ipsum dolor sit amet...",
+ },
+ {
+ name: "My feature 2",
+ description: "Lorem ipsum dolor sit amet...",
+ },
+ {
+ name: "My feature 3",
+ description: "Lorem ipsum dolor sit amet...",
+ },
+ {
+ name: "My feature 4",
+ description: "Lorem ipsum dolor sit amet...",
+ },
+ ],
+ },
...
Finally, we'll add an item to the footer.
πΏ Open the app/components/front/Footer.tsx
component and add a link to the Blog.
...
const navigation = {
features1: [
+ { name: "Blog", href: "/blog" },
...
I hope this quick guide was useful! Let me know if you have any questions.
We respect your privacy. We respect your privacy.
TLDR: We use cookies for language selection, theme, and analytics. Learn more. TLDR: We use cookies for language selection, theme, and analytics. Learn more