Separate Project

You can create a separate project section within your theme where you can showcase your projects independently from your regular posts and pages. In general, you can create a new template file in your theme directory to control how projects are displayed.

Step 1

Choose Your Project like

content-writer

Step 2

Replace root page.tsx file to your project root page.tsx file.

Example

- page.jsx

page.tsx file

import { getMainPage, getAllPages } from "@/lib/helper/contentConverter";
 
import BrandingHero from "@/components/hero/BrandingHero";
import BrandingWork from "@/components/work/branding/BrandingWork";
import BrandingFunFact from "@/components/funFact/branding/BrandingFunFact";
import BrandingService from "@/components/service/branding/BrandingService";
import BrandingProcess from "@/components/process/branding/BrandingProcess";
import BrandingImage from "@/components/image/BrandingImage";
import BrandingTestimonial from "@/components/testimonial/branding/BrandingTestimonial";
import BrandingTeam from "@/components/team/branding/BrandingTeam";
import BrandingBlog from "@/components/blog/branding/BrandingBlog";
import Cta1 from "@/components/cta/Cta1";
import SeoData from "@/components/tools/SeoData";
import RefreshGsap from "@/components/tools/RefreshGsap";
 
const Branding = () => {
  const { data: hero } = getMainPage("/heros/branding-hero.mdx");
  const works = getAllPages("/works/branding");
  const { data: work } = getMainPage("/works/branding/_main.mdx");
  const { data: funFact } = getMainPage("/funFact/branding-fun-fact.mdx");
  const { data: service } = getMainPage("services/branding/_main.mdx");
  const services = getAllPages("services/branding");
  const { data: process } = getMainPage("/process/branding/_main.mdx");
  const { data: image } = getMainPage("/image/branding-image.mdx");
  const { data: testimonial } = getMainPage("/testimonial/branding/_main.mdx");
  const { data: brands } = getMainPage("/brands/brands1.mdx");
  const { data: team } = getMainPage("/team/branding/_main.mdx");
  const teamMembers = getAllPages("/team/main");
  const { data: blogSection } = getMainPage("/blogs/branding/_main.mdx");
  const blogs = getAllPages("/blogs/branding");
  const { data: cta } = getMainPage("/ctas/cta1.mdx");
 
  return (
    <main>
      <SeoData
        title="Arolax Branding Agency"
        description="Arolax Branding Agency Description"
      />
      <RefreshGsap />
      <BrandingHero {...hero} />
      <BrandingWork works={works} {...work} />
      <BrandingFunFact {...funFact} />
      <BrandingService services={services} {...service} />
      <BrandingProcess {...process} />
      <BrandingImage {...image} />
      <BrandingTestimonial {...testimonial} brands={brands?.brands} />
      <BrandingTeam {...team} teamMembers={teamMembers} />
      <BrandingBlog {...blogSection} blogs={blogs} />
      <Cta1 {...cta} />
    </main>
  );
};
 
export default Branding;

Step 3

Merge root layout.tsx file to your project root layout.tsx file.

Example

- layout.tsx

layout.tsx file

 
import React from "react";
import BrandingHeader from "@/components/headers/BrandingHeader";
import Footer1 from "@/components/footer/Footer1";
import navigation from "@/config/navigation.json";
import ScrollSmootherComponent from "@/components/tools/ScrollSmoother";
import ToolsComponent from "@/components/tools";
import ScrollTop from "@/components/tools/ScrollTop";
 
import "../styles/globals.css";
import "@/styles/main.css";
import Provider from "@/provider";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=5"
        />
        <meta
          name="format-detection"
          content="telephone=no, date=no, email=no, address=no"
        />
        <link rel="icon" href="/favicon.ico" sizes="any" />
      </head>
      <body suppressHydrationWarning={true}>
        <Provider>
          <div className="has-smooth" id="has_smooth"></div>
          <div className="instrument">
            <ScrollSmootherComponent />
            <ToolsComponent />
            <ScrollTop />
            <div id="smooth-wrapper">
              <div id="smooth-content">
                <BrandingHeader onlyDark />
                <div>{children}</div>
                <Footer1 footerNav={navigation.footer1} />
              </div>
            </div>
          </div>
        </Provider>
      </body>
    </html>
  );
}

Step 4

Copy relevant file and folder in your app folder and make the folder structure like this.

- favicon.ico
- layout.tsx
- loading.tsx
- not-found.tsx
- page.tsx

Step 5

Remove all unused project and components.

Customize Menu Update Facility