First Commit

2026-03-21 11:55:27 +01:00
commit 2e8a29b4d0
1757 changed files with 166084 additions and 0 deletions
@@ -0,0 +1,22 @@
+// @project
+import { Clientele3 } from '@/blocks/clientele';
+import { DynamicComponentType } from '@/enum';
+
+/***************************  CLIENTELE 3 - DATA  ***************************/
+
+const data = {
+  title: '4,000+ companies already growing',
+  clienteleList: [
+    { image: { component: 'clientele/Techlify', type: DynamicComponentType.IMAGE } },
+    { image: { component: 'clientele/Marketly', type: DynamicComponentType.IMAGE } },
+    { image: { component: 'clientele/Realtor', type: DynamicComponentType.IMAGE } },
+    { image: { component: 'clientele/Financely', type: DynamicComponentType.IMAGE } },
+    { image: { component: 'clientele/Realtor', type: DynamicComponentType.IMAGE } }
+  ]
+};
+
+/***************************  BLOCK - CLIENTELE 3  ***************************/
+
+export default function BlockClientele3() {
+  return <Clientele3 {...data} />;
+}
@@ -0,0 +1,35 @@
+// @project
+import { ContactUs4 } from '@/blocks/contact-us';
+
+/***************************  CONTACT US 4 - DATA  ***************************/
+
+const data = {
+  heading: 'We’d love to hear from you',
+  caption: 'Explore key statistics and trends shaping our understanding of the current landscape.',
+  list: [
+    {
+      icon: 'tabler-phone',
+      title: 'Contact Sale',
+      content: 'Speak to someone from our sales team.',
+      link: { children: 'Contact Sales' }
+    },
+    {
+      icon: 'tabler-help-circle',
+      title: 'Have a Question',
+      content: 'See our frequently asked question',
+      link: { children: 'Get Answers' }
+    },
+    {
+      icon: 'tabler-folder-check',
+      title: 'Press & Media',
+      content: 'Get in touch with our PR team',
+      link: { children: 'Press Contact' }
+    }
+  ]
+};
+
+/***************************  BLOCK - CONTACT US 4  ***************************/
+
+export default function BlockContactUs4() {
+  return <ContactUs4 {...data} />;
+}
@@ -0,0 +1,45 @@
+// @mui
+import Typography from '@mui/material/Typography';
+
+// @project
+import branding from '@/branding.json';
+import { Cta4 } from '@/blocks/cta';
+
+/***************************  CALL TO ACTION 4 - HEADLINE  ***************************/
+
+function HeadlineText() {
+  return (
+    <Typography variant="h2">
+      Enhance performance{' '}
+      <Typography variant="h2" component="span" sx={{ color: 'text.secondary' }}>
+        and efficiency. Dive into {branding.brandName} for a{' '}
+      </Typography>
+      better cloud experience.
+    </Typography>
+  );
+}
+
+/***************************  CALL TO ACTION 4 - DATA  ***************************/
+
+const data = {
+  headLine: <HeadlineText />,
+  primaryBtn: { children: 'Get Started' },
+  profileGroups: {
+    avatarGroups: [
+      { avatar: '/assets/images/user/avatar1.png' },
+      { avatar: '/assets/images/user/avatar2.png' },
+      { avatar: '/assets/images/user/avatar3.png' },
+      { avatar: '/assets/images/user/avatar4.png' },
+      { avatar: '/assets/images/user/avatar5.png' }
+    ],
+    review: '10k+ Reviews (4.5 out of 5)'
+  },
+  list: [{ primary: `Automated Scaling for Efficiency` }, { primary: 'Real-time Performance Insights' }],
+  clientContent: '300+ Client Trust Us'
+};
+
+/***************************  BLOCK - CALL TO ACTION 4  ***************************/
+
+export default function BlockCta4() {
+  return <Cta4 {...data} />;
+}
@@ -0,0 +1,32 @@
+// @project
+import branding from '@/branding.json';
+import { Cta5 } from '@/blocks/cta';
+
+/***************************  CALL TO ACTION 5 - DATA  ***************************/
+
+const data = {
+  heading: `${branding.brandName} Community`,
+  caption: 'Collaborate confidently with granular access controls and regulatory compliance. ',
+  label: 'Join Community',
+  input: {
+    adornmentBtn: { children: 'Get Started' },
+    helpertext: '1 email per week. No spam. Ever. Unsubscribe anytime'
+  },
+  saleData: { count: 10, defaultUnit: 'X', caption: 'Achieving faster sales through streamlined' },
+  profileGroups: {
+    avatarGroups: [
+      { avatar: '/assets/images/user/avatar1.png' },
+      { avatar: '/assets/images/user/avatar2.png' },
+      { avatar: '/assets/images/user/avatar3.png' },
+      { avatar: '/assets/images/user/avatar4.png' },
+      { avatar: '/assets/images/user/avatar5.png' }
+    ],
+    review: '10k+ Reviews (4.5 out of 5)'
+  }
+};
+
+/***************************  BLOCK - CALL TO ACTION 5  ***************************/
+
+export default function BlockCta5() {
+  return <Cta5 {...data} />;
+}
@@ -0,0 +1,20 @@
+// @project
+import { Error404Page } from '@/blocks/maintenance';
+import { SEO_CONTENT } from '@/metadata';
+
+/***************************  METADATA - ERROR 404  ***************************/
+
+export const metadata = { ...SEO_CONTENT.error404Page };
+
+/***************************  ERROR 404 - DATA  ***************************/
+
+const data = {
+  primaryBtn: { children: 'Back to Home Page', href: '/' },
+  heading: `Looks like you've taken a wrong turn. Lets get you back on track!`
+};
+
+/***************************  BLOCK - ERROR 404  ***************************/
+
+export default function BlockError404Page() {
+  return <Error404Page {...data} />;
+}
@@ -0,0 +1,20 @@
+// @project
+import { Error500Page } from '@/blocks/maintenance';
+import { SEO_CONTENT } from '@/metadata';
+
+/***************************  METADATA - ERROR 500  ***************************/
+
+export const metadata = { ...SEO_CONTENT.error500Page };
+
+/***************************  ERROR 500 - DATA  ***************************/
+
+const data = {
+  primaryBtn: { children: 'Back to Home Page', href: '/' },
+  heading: 'Please try again later or feel free to contact us if the problem persists.'
+};
+
+/***************************  BLOCK - ERROR 500  ***************************/
+
+export default function BlockError500Page() {
+  return <Error500Page {...data} />;
+}
@@ -0,0 +1,110 @@
+// @project
+import branding from '@/branding.json';
+import { Faq6 } from '@/blocks/faq';
+
+/***************************  FAQ 6 - DATA  ***************************/
+
+const data = {
+  heading: 'Frequently Asked Questions',
+  caption: `Answers to common queries about ${branding.brandName}.`,
+  defaultExpanded: 'Fees & Charges',
+  faqList: [
+    {
+      question: `Is ${branding.brandName} only for SaaS web apps?`,
+      answer: `While ${branding.brandName} is designed with SaaS applications in mind, it’s not limited to SaaS products. ${branding.brandName} is multipurpose and can be used for a variety of websites and applications, whether it’s for an agency, digital product, CRM, blog, AI platform, or any other system. ${branding.brandName} is versatile and adaptable to fit any use case, SaaS or not. It’s built for all types of projects!`,
+      category: 'General'
+    },
+    {
+      question: `What makes ${branding.brandName} different from other UI Kits?`,
+      answer: `${branding.brandName} offers industry-specific templates, a React Material UI Kit, Figma UI Kit, and flexible customization options that cater to both front-end marketing and admin interfaces.`,
+      category: 'General'
+    },
+    {
+      question: `Is ${branding.brandName} suitable for both developers and designers?`,
+      answer: {
+        content: `Yes, ${branding.brandName} is built for both, with a Figma UI kit for designers and React code for developers.`,
+        type: 'list',
+        data: [
+          { primary: 'Figma UI Kit for Designers.' },
+          { primary: 'React Material UI Code for Developers.' },
+          { primary: 'Seamless Collaboration.' }
+        ]
+      },
+      category: 'General'
+    },
+    {
+      question: `What is the difference between the Figma and codebase versions?`,
+      answer:
+        'The Figma version is for design and prototyping, while the codebase version provides ready-to-use React components for development.',
+      category: 'General'
+    },
+    {
+      question: 'How can I download the template after purchase?',
+      answer: 'You will receive the template in a .zip format immediately after successfully purchasing the template.',
+      category: 'General'
+    },
+    {
+      question: `What's included in the ${branding.brandName} license?`,
+      answer: {
+        content: 'It includes the Figma UI kit, React Material UI codebase, regular updates, and customer support.',
+        type: 'list',
+        data: [
+          { primary: `One License = One End Product` },
+          { primary: `Separate License for Each Product` },
+          { primary: `Comply with License Terms` }
+        ]
+      },
+      category: 'Pricing & Licenses'
+    },
+    {
+      question: `Can I use ${branding.brandName} for multiple projects?`,
+      answer: {
+        content:
+          'No, one license allows usage in a single end product. For each new product or project, you are required to purchase a separate license. This ensures compliance with the licensing terms and provides ongoing support for each individual product. Make sure to obtain the appropriate license for every new project you work on.',
+        type: 'list',
+        data: [
+          { primary: `One License = One End Product` },
+          { primary: `Separate License for Each Product` },
+          { primary: `Comply with License Terms` }
+        ]
+      },
+      category: 'Pricing & Licenses'
+    },
+
+    {
+      question: 'Do you offer refunds?',
+      answer:
+        'Yes, we offer refunds, but only if you provide a valid reason to support your claim. For more details, please review our MUI Store Refund Policy.',
+      category: 'Pricing'
+    },
+    {
+      question: 'Do I get access to future updates?',
+      answer: {
+        content:
+          'Yes, you will receive future updates for 1 year from the date of purchase. If you need updates after 1 year, you will need to purchase the license again. However, this is not a renewal—your license is valid for a lifetime, but updates are limited to the 1-year period.',
+        type: 'list',
+        data: [{ primary: `1 Year Free Updates` }, { primary: `License validity is lifetime` }]
+      },
+      category: 'Support & Updates'
+    },
+    {
+      question: 'Is support included with the template purchase?',
+      answer: {
+        content:
+          'Support is included for 6 months, but it is limited to resolving issues within the template itself. We do not provide support for installation, customization queries, or troubleshooting unrelated issues. For ongoing support beyond 6 months, you will need to extend the support period with an additional purchase.',
+        type: 'list',
+        data: [{ primary: `6 Months Support` }, { primary: `No Installation Support` }, { primary: `No Customization Support` }]
+      },
+      category: 'Support & Updates'
+    }
+  ],
+  getInTouch: { link: { children: 'Get in Touch' } },
+  categories: ['General', 'Pricing & Licenses', 'Support & Updates'],
+  activeCategory: 'General'
+};
+
+/***************************  FAQ - 6  ***************************/
+
+export default function BlockFaq6() {
+  return <Faq6 {...data} />;
+}
@@ -0,0 +1,62 @@
+// @project
+import { Feature18 } from '@/blocks/feature';
+
+/***************************  FEATURE 18 - DATA  ***************************/
+
+const data = {
+  heading: 'Dynamic Task Automation',
+  caption: 'Gain insights into performance metrics and proactively address issues for uninterrupted operations.',
+  topics: [
+    {
+      icon: 'tabler-sparkles',
+      title: 'AI Assistant',
+      title2: 'Advanced AI Integration',
+      description: 'Leverage cutting-edge AI to enhance decision-making and streamline operations.',
+      image: '/assets/images/graphics/ai/graphics12-light.svg',
+      list: [
+        { primary: 'Intelligent Decision Support' },
+        { primary: 'Predictive Analytics' },
+        { primary: 'Natural Language Processing' },
+        { primary: 'Real-time Insights' }
+      ],
+      actionBtn: { children: 'Explore all Features' },
+      actionBtn2: { children: 'Customize' }
+    },
+    {
+      icon: 'tabler-chart-histogram',
+      title: 'Simple Analysis',
+      title2: 'Data Lifecycle Management',
+      description: 'Process data in parallel, significantly boosting data processing speed.',
+      image: '/assets/images/graphics/ai/graphics7-light.svg',
+      list: [{ primary: 'Fortress for Your Data' }, { primary: 'Granular Access Controls' }, { primary: 'Automated Backup Solutions' }],
+      actionBtn: { children: 'Explore all Features' },
+      actionBtn2: { children: 'Customize' }
+    },
+    {
+      icon: 'tabler-users',
+      title: 'Easy Collaboration',
+      title2: 'Seamless Teamwork',
+      description: 'Foster collaboration with intuitive tools designed for team success.',
+      image: '/assets/images/graphics/ai/graphics4-light.svg',
+      list: [{ primary: 'Shared Workspaces' }, { primary: 'Real-time Collaboration' }, { primary: 'Task Assignment and Tracking' }],
+      actionBtn: { children: 'Explore all Features' },
+      actionBtn2: { children: 'Customize' }
+    },
+    {
+      icon: 'tabler-settings-up',
+      title: 'Smart Automation',
+      title2: 'Intelligent Task Management',
+      description: 'Automate repetitive tasks and focus on what truly matters with smart solutions.',
+      image: '/assets/images/graphics/ai/graphics9-light.svg',
+      list: [{ primary: 'Workflow Automation' }, { primary: 'Trigger-based Actions' }, { primary: 'Scalable Solutions' }],
+      actionBtn: { children: 'Explore all Features' },
+      actionBtn2: { children: 'Customize' }
+    }
+  ]
+};
+
+/***************************  BLOCK - FEATURE 18  ***************************/
+
+export default function BlockFeature18() {
+  return <Feature18 {...data} />;
+}
@@ -0,0 +1,49 @@
+// @project
+import { Feature20 } from '@/blocks/feature';
+
+/***************************  FEATURE 20 - DATA  ***************************/
+
+const data = {
+  heading: 'Intelligent Data Compression',
+  caption: 'Process data faster, enhance system, and gain quicker insights.',
+  image: '/assets/images/graphics/ai/graphics4-light.svg',
+  actionBtn: { children: 'Explore all Features' },
+  features: [
+    {
+      icon: 'tabler-chart-histogram',
+      title: 'Parallel Processing',
+      content: 'Process data in parallel, significantly boosting data processing speed.'
+    },
+    {
+      icon: 'tabler-artboard',
+      title: 'Scalable Data Pipelines',
+      content: 'Build and manage scalable and efficient data processing pipelines.'
+    },
+    {
+      icon: 'tabler-database',
+      title: 'Data Quality Assurance',
+      content: 'Tools to ensure and maintain high data quality and integrity.'
+    },
+    {
+      icon: 'tabler-settings-up',
+      title: 'Dynamic Task Automation',
+      content: 'Automate dynamic tasks to enhance workflow efficiency.'
+    },
+    {
+      icon: 'tabler-devices-code',
+      title: 'Cross-Platform ',
+      content: 'Compatibility with various platforms for versatile data processing.'
+    },
+    {
+      icon: 'tabler-route',
+      title: 'Workflow Optimization',
+      content: 'Optimize workflows for increased productivity and efficiency.'
+    }
+  ]
+};
+
+/***************************  BLOCK - FEATURE 20  ***************************/
+
+export default function BlockFeature20() {
+  return <Feature20 {...data} />;
+}
@@ -0,0 +1,53 @@
+// @project
+import branding from '@/branding.json';
+import { Feature21 } from '@/blocks/feature';
+
+/***************************  FEATURE 21 - DATA  ***************************/
+
+const data = {
+  heading: `Unlock the Power of ${branding.brandName}`,
+  caption: 'Discover the myriad benefits that come with our innovative platform.',
+  image: '/assets/images/graphics/ai/desktop1-light.svg',
+  primaryBtn: { children: 'Buy Now' },
+  secondaryBtn: { children: 'Get free figma' },
+  features: [
+    {
+      icon: 'tabler-app-window',
+      title: 'Tested in multiple browsers'
+    },
+    {
+      icon: 'tabler-box-model',
+      title: 'Ready to use template'
+    },
+    {
+      icon: 'tabler-folder-check',
+      title: 'Always updated package'
+    },
+    {
+      icon: 'tabler-code',
+      title: 'Optimised code structure'
+    },
+    {
+      icon: 'tabler-lock',
+      title: 'Pre Define Authentication'
+    },
+    {
+      icon: 'tabler-git-branch',
+      title: 'Clean folder structure to adapt'
+    },
+    {
+      icon: 'tabler-toggle-right',
+      title: 'Easy to switch themes'
+    },
+    {
+      icon: 'tabler-components',
+      title: 'Pluggable components'
+    }
+  ]
+};
+
+/***************************  BLOCK - FEATURE 21  ***************************/
+
+export default function BlockFeature21() {
+  return <Feature21 {...data} />;
+}
@@ -0,0 +1,8 @@
+// @project
+import { Footer7 } from '@/blocks/footer';
+
+/*************************** BLOCK - FOOTER 7  ***************************/
+
+export default function BlockFooter7() {
+  return <Footer7 />;
+}
@@ -0,0 +1,58 @@
+// @mui
+import CardMedia from '@mui/material/CardMedia';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+
+// @project
+import { Hero17 } from '@/blocks/hero';
+
+/***************************  HERO 17 - DATA  ***************************/
+
+const data = {
+  chip: {
+    label: (
+      <>
+        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+          Over 200+
+        </Typography>
+        <Chip
+          label={
+            <Typography variant="caption" sx={{ color: 'primary.main' }}>
+              Design Blocks
+            </Typography>
+          }
+          sx={{ height: 24, bgcolor: 'primary.lighter', mr: -1, ml: 0.75, '& .MuiChip-label': { px: 1.25 } }}
+          icon={
+            <CardMedia
+              component="img"
+              image="/assets/images/shared/celebration.svg"
+              sx={{ width: 16, height: 16 }}
+              alt="celebration"
+              loading="lazy"
+            />
+          }
+        />
+      </>
+    )
+  },
+  headLine: 'Real-time Performance Monitoring',
+  captionLine: 'Identify and resolve issues proactively for uninterrupted operations.',
+  primaryBtn: { children: 'Try Predictive Cost Analytics' },
+  videoSrc: 'https://d2elhhoq00m1pj.cloudfront.net/saasable-intro.mp4',
+  videoThumbnail: '/assets/videos/thumbnails/intro-thumbnail.png',
+  listData: [
+    { image: '/assets/images/shared/react.svg', title: 'React 19' },
+    { image: '/assets/images/shared/next-js.svg', title: 'Next.js' },
+    { image: '/assets/images/shared/material-ui.svg', title: 'Material UI v7' },
+    { image: '/assets/images/shared/typescript.svg', title: 'TypeScript' },
+    { image: '/assets/images/shared/javascript.svg', title: 'JavaScript' },
+    { image: '/assets/images/shared/m3.svg', title: 'Material 3' },
+    { image: '/assets/images/shared/figma.svg', title: 'Figma' }
+  ]
+};
+
+/***************************  BLOCK - HERO 17  ***************************/
+
+export default function BlockHero17() {
+  return <Hero17 {...data} />;
+}
@@ -0,0 +1,29 @@
+// @project
+import { Integration2 } from '@/blocks/integration';
+
+/***************************  INTEGRATION 2 - DATA  ***************************/
+
+const data = {
+  headLine: 'Connect with top-tier tools available Interface',
+  captionLine: 'Discover the features that will transform your customer relationships',
+  primaryBtn: { children: 'See All Integration' },
+  tagList: [
+    { label: 'Slack', icon: 'tabler-brand-slack' },
+    { label: 'Abstract', icon: 'tabler-brand-abstract' },
+    { label: 'Asana', icon: 'tabler-brand-asana' },
+    { label: 'Back Bone', icon: 'tabler-brand-backbone' },
+    { label: 'Intercom', icon: 'tabler-brand-intercom' },
+    { label: 'Master Card', icon: 'tabler-brand-mastercard' },
+    { label: 'Skype', icon: 'tabler-brand-skype' },
+    { label: 'Google Drive', icon: 'tabler-brand-google-drive' },
+    { label: 'Tripadvisor', icon: 'tabler-brand-tripadvisor' },
+    { label: 'Facebook Messenger', icon: 'tabler-brand-messenger' },
+    { label: 'Paypal', icon: 'tabler-brand-paypal' }
+  ]
+};
+
+/***************************  BLOCK - INTEGRATION 2  ***************************/
+
+export default function BlockIntegration2() {
+  return <Integration2 {...data} />;
+}
@@ -0,0 +1,14 @@
+'use client';
+import PropTypes from 'prop-types';
+
+// @mui
+import Box from '@mui/material/Box';
+
+/***************************  LAYOUT - BLOCKS  ***************************/
+
+export default function Blocks({ children }) {
+
+  return <Box sx={{ '& :focus-visible': { outline: 'none' } }}>{children}</Box>;
+}
+
+Blocks.propTypes = { children: PropTypes.any };
@@ -0,0 +1,80 @@
+// @mui
+import Button from '@mui/material/Button';
+import CardMedia from '@mui/material/CardMedia';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+// @project
+import branding from '@/branding.json';
+import { MegaMenu4 } from '@/blocks/mega-menu';
+import { MenuPopper } from '@/components/navbar';
+import { landings } from '@/data/landings';
+import { BUY_NOW_URL } from '@/path';
+
+/***************************  MEGAMENU 4 - FOOTER  ***************************/
+
+function footerData() {
+  return (
+    <Stack direction={{ sm: 'row' }} sx={{ gap: 1.5, justifyContent: 'space-between', alignItems: { xs: 'flex-start', sm: 'center' } }}>
+      <Stack sx={{ gap: 1 }}>
+        <Stack direction="row" sx={{ alignItems: 'center', gap: 1 }}>
+          <Typography variant="h5">Explore our range of landing demos tailored to suit your needs</Typography>
+          <Chip
+            label={<Typography variant="caption">Featured</Typography>}
+            size="small"
+            sx={{
+              bgcolor: 'background.default',
+              '& .MuiChip-label': { px: 1.5, py: 0.5 },
+              display: { xs: 'none', sm: 'inline-flex' }
+            }}
+            icon={
+              <CardMedia
+                component="img"
+                image="/assets/images/shared/celebration.svg"
+                sx={{ width: 16, height: 16 }}
+                alt="celebration"
+                loading="lazy"
+              />
+            }
+          />
+        </Stack>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {branding.brandName} offers 200+ customizable blocks, empowering you to effortlessly design and build landing pages tailored to
+          your product or service needs.
+        </Typography>
+      </Stack>
+      <Button
+        variant="contained"
+        sx={{ display: { xs: 'none', sm: 'inline-flex' }, minWidth: 100, px: { xs: 2 }, py: 1.25 }}
+        href={BUY_NOW_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Buy Now
+      </Button>
+    </Stack>
+  );
+}
+
+/***************************  MEGAMENU 4 - DATA  ***************************/
+
+const data = {
+  menuItems: landings,
+  footerData: footerData()
+};
+
+/***************************  BLOCK - MEGAMENU 4  ***************************/
+
+export default function BlockMegamenu4() {
+  return (
+    <Stack sx={{ alignItems: 'center' }}>
+      <Box sx={{ my: 4 }}>
+        <MenuPopper toggleProps={{ children: 'Mega Menu 4' }} defaultOpen popperWidth={936} offset={8}>
+          <MegaMenu4 {...data} />
+        </MenuPopper>
+      </Box>
+    </Stack>
+  );
+}
@@ -0,0 +1,99 @@
+// @mui
+import Button from '@mui/material/Button';
+import CardMedia from '@mui/material/CardMedia';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+// @project
+import { MegaMenu5 } from '@/blocks/mega-menu';
+import { MenuPopper } from '@/components/navbar';
+import { BUY_NOW_URL, DOCS_URL } from '@/path';
+
+/***************************  MEGAMENU 5 - BANNER  ***************************/
+
+function bannerData() {
+  return (
+    <Stack sx={{ alignItems: 'flex-start', gap: 3, height: 1, justifyContent: 'center' }}>
+      <Stack sx={{ gap: 1 }}>
+        <Stack sx={{ alignItems: 'flex-start', gap: 1.5 }}>
+          <Chip
+            label={<Typography variant="subtitle2">Coming Soon</Typography>}
+            icon={
+              <CardMedia
+                component="img"
+                image="/assets/images/shared/celebration.svg"
+                sx={{ width: 16, height: 16 }}
+                alt="celebration"
+                loading="lazy"
+              />
+            }
+            size="small"
+            sx={{ bgcolor: 'background.default', '& .MuiChip-label': { px: 1.5, py: 0.5 }, '& .MuiChip-icon': { ml: 1.25 } }}
+          />
+          <Typography variant="h5">We are coming with many more landings</Typography>
+        </Stack>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          Discover tailored solutions to elevate your business. Stay ahead with our latest updates and insights.
+        </Typography>
+      </Stack>
+      <Button
+        variant="contained"
+        sx={{ minWidth: 92, px: { xs: 2 }, py: 1.25 }}
+        href={BUY_NOW_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Buy Now
+      </Button>
+    </Stack>
+  );
+}
+
+/***************************  MEGAMENU 5 - DATA  ***************************/
+
+const data = {
+  menuItems: [
+    {
+      title: 'General',
+      itemsList: [
+        { title: 'About', status: 'Pro' },
+        { title: 'Career', status: 'Pro' },
+        { title: 'FAQs', status: 'Pro' },
+        { title: 'Privacy Policy', link: { href: '/privacy-policy', target: '_blank' } },
+        { title: 'Contact Us', link: { href: '/contact', target: '_blank' } },
+        { title: 'Coming Soon', status: 'Pro' },
+        { title: 'Error 404', link: { href: '/blocks/error404', target: '_blank' } }
+      ]
+    },
+    {
+      title: 'External',
+      itemsList: [
+        { title: 'Blog', link: { href: 'https://blog.saasable.io/', target: '_blank' } },
+        { title: 'Documentation', link: { href: DOCS_URL, target: '_blank' } },
+        { title: 'Support', link: { href: 'https://codedthemes.support-hub.io/', target: '_blank' } },
+        {
+          title: 'Discord',
+          link: { href: 'https://discord.com/invite/2WpeGsQH98', target: '_blank' }
+        },
+        { title: 'Terms & Conditions', link: { href: 'https://mui.com/store/terms/', target: '_blank' } }
+      ]
+    }
+  ],
+  bannerData: bannerData()
+};
+
+/***************************  BLOCK - MEGAMENU 5  ***************************/
+
+export default function BlockMegamenu5() {
+  return (
+    <Stack sx={{ alignItems: 'center' }}>
+      <Box sx={{ my: 4 }}>
+        <MenuPopper toggleProps={{ children: 'Mega Menu 5' }} defaultOpen popperWidth={750} offset={8}>
+          <MegaMenu5 {...data} />
+        </MenuPopper>
+      </Box>
+    </Stack>
+  );
+}
@@ -0,0 +1,22 @@
+// @project
+import branding from '@/branding.json';
+import { Metrics5 } from '@/blocks/metrics';
+
+/***************************  BENEFIT 5 - DATA  ***************************/
+
+const data = {
+  heading: 'Data Processing at its Peak',
+  caption: `See the success stories of organizations scaling with ${branding.brandName}`,
+  blockDetail: [
+    { counter: 99, defaultUnit: '%', caption: 'Compression Efficiency Achieved' },
+    { counter: 40, defaultUnit: '%', caption: 'Reduction in Storage Costs' },
+    { counter: 80, defaultUnit: '%', caption: 'Reduction in Over-Provisioning' },
+    { counter: 4.5, defaultUnit: '/5', caption: 'Average User Satisfaction Rating' }
+  ]
+};
+
+/***************************  BLOCK - METRICS 5  ***************************/
+
+export default function BlockMetrics5() {
+  return <Metrics5 {...data} />;
+}
@@ -0,0 +1,66 @@
+// @project
+import { Other2 } from '@/blocks/other';
+import { Navbar10 } from '@/blocks/navbar';
+import { NavbarContent10 } from '@/blocks/navbar/navbar-content';
+import { MegaMenuType } from '@/enum';
+
+/***************************  NAVBAR 10 - DATA  ***************************/
+
+const navbar = {
+  primaryBtn: { children: 'Get Started' },
+  secondaryBtn: { children: 'Sign in' },
+  navItems: [
+    { id: 'overview', title: 'Overview' },
+    { id: 'products', title: 'Products' },
+    { id: 'pricing', title: 'Pricing' },
+    {
+      id: 'resource',
+      title: 'Resource',
+      megaMenu: {
+        type: MegaMenuType.MEGAMENU2,
+        toggleBtn: { children: 'Resource', size: 'small', sx: { color: 'text.primary', py: 1.5 } },
+        menuItems: [
+          {
+            title: 'Blog',
+            content: 'Explore our latest articles and insights.'
+          },
+          {
+            title: 'Help Center',
+            content: 'Find answers to common questions and support topics.',
+            selected: true
+          },
+          {
+            title: 'Guides',
+            content: 'Follow our comprehensive guides to get started.'
+          },
+          {
+            title: 'Events',
+            content: 'Stay informed about upcoming events and webinars.'
+          },
+          {
+            title: 'Security',
+            content: 'Learn about our security measures to protect your data.'
+          },
+          {
+            title: 'Payments',
+            content: 'Get help with billing and payment options.'
+          }
+        ]
+      }
+    },
+    { id: 'help', title: 'Help', icon: 'tabler-help' }
+  ]
+};
+
+/***************************  BLOCK - NAVBAR 10  ***************************/
+
+export default function BlockNavbar10() {
+  return (
+    <>
+      <Navbar10>
+        <NavbarContent10 {...navbar} />
+      </Navbar10>
+      <Other2 />
+    </>
+  );
+}
@@ -0,0 +1,58 @@
+// @project
+import Other1 from '@/blocks/other/Other1';
+import { PAGE_PATH, SECTION_PATH } from '@/path';
+
+// @asssets
+const imagePrefix = '/assets/images/presentation';
+
+/***************************  OTHER 1 - DATA  ***************************/
+
+const data = {
+  heading: 'Customizable Building Blocks',
+  description: 'Kickstart your SaaS landing page design with pre-designed templates featuring versatile components.',
+  primaryBtn: { children: 'Explore all Blocks', href: SECTION_PATH },
+  sections: [
+    {
+      title: 'Hero',
+      subTitle: '17 Different Variants',
+      image: `${imagePrefix}/hero-light.svg`,
+      link: PAGE_PATH.hero
+    },
+    {
+      title: 'Call to Action',
+      subTitle: '12 Different Variants',
+      image: `${imagePrefix}/cta-light.svg`,
+      link: PAGE_PATH.cta
+    },
+    {
+      title: 'Feature',
+      subTitle: '23 Different Variants',
+      image: `${imagePrefix}/feature-light.svg`,
+      link: PAGE_PATH.feature
+    },
+    {
+      title: 'Metrics',
+      subTitle: '9 Different Variants',
+      image: `${imagePrefix}/metrics-light.svg`,
+      link: PAGE_PATH.metrics
+    },
+    {
+      title: 'Process',
+      subTitle: '7 Different Variants',
+      image: `${imagePrefix}/process-light.svg`,
+      link: PAGE_PATH.process
+    },
+    {
+      title: 'Integration',
+      subTitle: '8 Different Variants',
+      image: `${imagePrefix}/integration-light.svg`,
+      link: PAGE_PATH.integration
+    }
+  ]
+};
+
+/***************************  BLOCK - OTHER 1  ***************************/
+
+export default function BlockOther1() {
+  return <Other1 {...data} />;
+}
@@ -0,0 +1,8 @@
+// @project
+import Other2 from '@/blocks/other/Other2';
+
+/***************************  BLOCK - OTHER 2  ***************************/
+
+export default function BlockOther2() {
+  return <Other2 />;
+}
@@ -0,0 +1,45 @@
+// @project
+import { Pricing9 } from '@/blocks/pricing';
+
+/***************************  PRICING 9 - DATA  ***************************/
+
+const data = {
+  heading: 'The Affordable Unfair Advantage',
+  caption: 'Choose the plan that aligns with your cloud management requirements.',
+  features: [
+    { id: 1, label: '1 Demo Landing' },
+    { id: 2, label: '7 Demo Landing' },
+    { id: 3, label: '25 Components Blocks' },
+    { id: 4, label: '193+ Component Blocks' },
+    { id: 5, label: 'Dark/Light Mode' },
+    { id: 6, label: 'Typescript Version' },
+    { id: 7, label: 'Design File (Figma)' },
+    { id: 8, label: 'Multiple Color Options' },
+    { id: 9, label: 'RTL' },
+    { id: 10, label: 'Supbase Authentication' }
+  ],
+  plans: [
+    {
+      title: 'Free',
+      price: 0,
+      active: false,
+      featureTitle: 'Features',
+      exploreLink: { children: 'Get Started With Free' },
+      featuresID: [1, 3]
+    },
+    {
+      title: 'Pro',
+      active: false,
+      price: 69,
+      featureTitle: 'Features',
+      exploreLink: { children: 'Get Started With Pro' },
+      featuresID: [2, 4, 5, 6, 7, 8, 9, 10]
+    }
+  ]
+};
+
+/***************************  BLOCK - PRICING 9  ***************************/
+
+export default function BlockPricing9() {
+  return <Pricing9 {...data} />;
+}
@@ -0,0 +1,8 @@
+// @project
+import { PrivacyPolicy1 } from '@/blocks/privacy-policy';
+
+/***************************  BLOCK - PRIVACY POLICY 1  ***************************/
+
+export default function BlockPrivacyPolicy1() {
+  return <PrivacyPolicy1 />;
+}
@@ -0,0 +1,14 @@
+//@project
+import { ProPage } from '@/blocks/pro-page';
+
+/***************************  PRO PAGE - DATA  ***************************/
+
+const data = {
+  image: '/assets/images/pro-page/Lock.svg'
+};
+
+/***************************  BLOCK - PRO PAGE  ***************************/
+
+export default function BlockProPage() {
+  return <ProPage {...data} />;
+}
@@ -0,0 +1,46 @@
+// @mui
+import Typography from '@mui/material/Typography';
+
+// @project
+import { SmallHero3 } from '@/blocks/small-hero';
+import GraphicsImage from '@/components/GraphicsImage';
+
+/***************************  SMALL HERO 3 - HEADLINE  ***************************/
+
+function HeadlineText() {
+  return (
+    <Typography variant="h1" sx={{ width: { lg: '90%' } }}>
+      Effortless CRM Management, Seamless Business
+      <GraphicsImage
+        sx={{
+          display: 'inline-block',
+          height: { xs: 32, sm: 45, md: 57 },
+          width: { xs: 61, sm: 86, md: 109 },
+          backgroundSize: 'contain',
+          mx: { xs: 0.5, sm: 1, md: 1.5 },
+          verticalAlign: 'sub'
+        }}
+        image="/assets/images/graphics/ai/rocket.svg"
+      />
+      Growth
+    </Typography>
+  );
+}
+
+/***************************  SMALL HERO 3 - DATA  ***************************/
+
+const data = {
+  chip: {
+    label: 'New Beta Version is Release ',
+    link: { children: 'explore now', href: '#' }
+  },
+  captionLine: 'Empowering Businesses with a Customizable, Data-Driven CRM Solution.',
+  headLine: <HeadlineText />,
+  exploreBtn: { children: 'Explore More' }
+};
+
+/***************************  BLOCK - SMALL HERO 3  ***************************/
+
+export default function BlockSmallHero3() {
+  return <SmallHero3 {...data} />;
+}
@@ -0,0 +1,71 @@
+// @project
+import { Testimonial10 } from '@/blocks/testimonial';
+
+/***************************  TESTIMONIAL 10 - DATA  ***************************/
+
+const data = {
+  heading: 'Hear From Our Satisfied Users',
+  caption: `Discover why users love our platform and how it's making a positive impact on their work and businesses.`,
+  testimonials: [
+    {
+      title: 'Strongly endorsed!',
+      ratings: 5,
+      review: 'This platform exceeded my expectations! The features are robust, and the user interface is incredibly intuitive.',
+      profile: { avatar: '', name: 'Sarah T.', role: 'Business Owner' }
+    },
+    {
+      title: 'Top pick!',
+      ratings: 4,
+      review: `I've tried several platforms, and this one stands out for its reliability and user-friendly.`,
+      profile: { avatar: '', name: 'Alex M.', role: 'Project Manager' }
+    },
+    {
+      title: 'Widely praised!',
+      ratings: 2,
+      review: `Outstanding customer support! They're responsive and go above and beyond to ensure a smooth experience. Highly satisfied.`,
+      profile: { avatar: '', name: 'Emily P.', role: 'Freelancer' }
+    },
+    {
+      title: 'Hugely endorsed!',
+      ratings: 5,
+      review: `I've recommended this platform to colleagues, and they've all been impressed. It's versatile, efficient, and simply fantastic.`,
+      profile: { avatar: '', name: 'Maria S', role: 'Marketing Specialist' }
+    },
+    {
+      title: 'Outstanding choice!',
+      ratings: 2,
+      review: `This platform transformed the way we work. It's flexible, scalable, and adapts seamlessly to our evolving needs.`,
+      profile: { avatar: '', name: 'James L.', role: 'IT Professional' }
+    },
+    {
+      title: 'A must-consider!',
+      ratings: 3,
+      review: `As a tech enthusiast, I appreciate the innovation behind this platform. It's modern, sleek, and delivers on its promises.`,
+      profile: { avatar: '', name: 'Kevin R.', role: 'Software Developer' }
+    },
+    {
+      title: 'Highly recommended!',
+      ratings: 5,
+      review: `I've used many platforms in my career, and this one is a standout. The functionality is unmatched, making it a joy to work with.`,
+      profile: { avatar: '', name: 'Jessica W.', role: 'UX/UI Designer' }
+    },
+    {
+      title: 'Exceptional suggestion!',
+      ratings: 1,
+      review: `Our team's productivity soared after adopting this platform. It's a reliable solution that brings tangible results.`,
+      profile: { avatar: '', name: 'Eric H.', role: 'Operations Manager' }
+    },
+    {
+      title: 'Superbly recommended!',
+      ratings: 3,
+      review: 'What I love most is the seamless integration with other tools. It streamlines our workflow and saves us valuable time.',
+      profile: { avatar: '', name: 'Brian C.', role: 'Content Creator' }
+    }
+  ]
+};
+
+/***************************  BLOCK - TESTIMONIAL 10  ***************************/
+
+export default function BlockTestimonial10() {
+  return <Testimonial10 {...data} />;
+}
@@ -0,0 +1,13 @@
+'use client';
+import PropTypes from 'prop-types';
+
+// @project
+import ThemeProviders from '@/components/ThemeProvider';
+
+/***************************  LAYOUT - COMMON  ***************************/
+
+export default function CommonLayout({ children }) {
+  return <ThemeProviders>{children}</ThemeProviders>;
+}
+
+CommonLayout.propTypes = { children: PropTypes.any };
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const About = dynamic(() => import('@/views/sections/About'));
+
+/***************************  METADATA - ABOUT  ***************************/
+
+export const metadata = { ...SEO_CONTENT.about, openGraph: { ...SEO_CONTENT.about, url: PAGE_PATH.about } };
+
+/***************************  PAGE - ABOUT  ***************************/
+
+export default function AboutPage() {
+  return <About />;
+}
@@ -0,0 +1,20 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const ForgotPassword = dynamic(() => import('@/views/sections/ForgotPassword'));
+
+/***************************  METADATA - FORGOT PASSWORD  ***************************/
+
+export const metadata = {
+  ...SEO_CONTENT.forgotPassword,
+  openGraph: { ...SEO_CONTENT.forgotPassword, url: PAGE_PATH.forgotPassword }
+};
+
+/***************************  PAGE - FORGOT PASSWORD  ***************************/
+
+export default function ForgotPasswordPage() {
+  return <ForgotPassword />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Login = dynamic(() => import('@/views/sections/Login'));
+
+/***************************  METADATA - LOGIN  ***************************/
+
+export const metadata = { ...SEO_CONTENT.login, openGraph: { ...SEO_CONTENT.login, url: PAGE_PATH.login } };
+
+/***************************  PAGE - LOGIN  ***************************/
+
+export default function LoginPage() {
+  return <Login />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const NewPassword = dynamic(() => import('@/views/sections/NewPassword'));
+
+/***************************  METADATA - NEW PASSWORD  ***************************/
+
+export const metadata = { ...SEO_CONTENT.newPassword, openGraph: { ...SEO_CONTENT.newPassword, url: PAGE_PATH.newPassword } };
+
+/***************************  PAGE - NEW PASSWORD  ***************************/
+
+export default function NewPasswordPage() {
+  return <NewPassword />;
+}
@@ -0,0 +1,20 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const OtpVerification = dynamic(() => import('@/views/sections/OtpVerification'));
+
+/***************************  METADATA - OTP VERIFICATION  ***************************/
+
+export const metadata = {
+  ...SEO_CONTENT.otpVerification,
+  openGraph: { ...SEO_CONTENT.otpVerification, url: PAGE_PATH.otpVerification }
+};
+
+/***************************  PAGE - OTP VERIFICATION  ***************************/
+
+export default function OtpVerificationPage() {
+  return <OtpVerification />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Register = dynamic(() => import('@/views/sections/Register'));
+
+/***************************  METADATA - REGISTER  ***************************/
+
+export const metadata = { ...SEO_CONTENT.register, openGraph: { ...SEO_CONTENT.register, url: PAGE_PATH.register } };
+
+/***************************  PAGE - REGISTER  ***************************/
+
+export default function RegisterPage() {
+  return <Register />;
+}
@@ -0,0 +1,18 @@
+// @next
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const BlogDetails = dynamic(() => import('@/views/sections/BlogDetails'));
+
+/***************************  METADATA - BLOG DETAILS  ***************************/
+
+export const metadata = { ...SEO_CONTENT.blogDetails, openGraph: { ...SEO_CONTENT.blogDetails, url: PAGE_PATH.blogDetails } };
+
+/***************************  PAGE - BLOG DETAILS  ***************************/
+
+export default function BlogDetailsPage() {
+  return <BlogDetails />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Blog = dynamic(() => import('@/views/sections/Blog'));
+
+/***************************  METADATA - BLOG  ***************************/
+
+export const metadata = { ...SEO_CONTENT.blog, openGraph: { ...SEO_CONTENT.blog, url: PAGE_PATH.blog } };
+
+/***************************  PAGE - BLOG  ***************************/
+
+export default function BlogPage() {
+  return <Blog />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Clientele = dynamic(() => import('@/views/sections/Clientele'));
+
+/***************************  METADATA - CLIENTELE  ***************************/
+
+export const metadata = { ...SEO_CONTENT.clientele, openGraph: { ...SEO_CONTENT.clientele, url: PAGE_PATH.clientele } };
+
+/***************************  PAGE - CLIENTELE  ***************************/
+
+export default function ClientelePage() {
+  return <Clientele />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Color = dynamic(() => import('@/views/sections/Color'));
+
+/***************************  METADATA - COLOR  ***************************/
+
+export const metadata = { ...SEO_CONTENT.color, openGraph: { ...SEO_CONTENT.color, url: PAGE_PATH.color } };
+
+/***************************  PAGE - COLOR  ***************************/
+
+export default function ColorPage() {
+  return <Color />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const ComingSoon = dynamic(() => import('@/views/sections/ComingSoon'));
+
+/***************************  METADATA - COMING SOON  ***************************/
+
+export const metadata = { ...SEO_CONTENT.comingSoon, openGraph: { ...SEO_CONTENT.comingSoon, url: PAGE_PATH.comingSoon } };
+
+/***************************  PAGE - COMING SOON  ***************************/
+
+export default function ComingSoonPage() {
+  return <ComingSoon />;
+}
@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { SEO_CONTENT } from '@/metadata';
+
+const ContactUs = dynamic(() => import('@/views/sections/ContactUs'));
+
+/***************************  METADATA - CONTACT US  ***************************/
+
+export const metadata = { ...SEO_CONTENT.contactUs };
+
+/***************************  PAGE - CONTACT US  ***************************/
+
+export default function ContactUsPage() {
+  return <ContactUs />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Cookie = dynamic(() => import('@/views/sections/Cookie'));
+
+/***************************  METADATA - COOKIE  ***************************/
+
+export const metadata = { ...SEO_CONTENT.cookie, openGraph: { ...SEO_CONTENT.cookie, url: PAGE_PATH.cookie } };
+
+/***************************  PAGE - COOKIE  ***************************/
+
+export default function CookiePage() {
+  return <Cookie />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Cta = dynamic(() => import('@/views/sections/Cta'));
+
+/***************************  METADATA - CALL TO ACTION  ***************************/
+
+export const metadata = { ...SEO_CONTENT.cta, openGraph: { ...SEO_CONTENT.cta, url: PAGE_PATH.cta } };
+
+/***************************  PAGE - CALL TO ACTION  ***************************/
+
+export default function CtaPage() {
+  return <Cta />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const EarlyAccess = dynamic(() => import('@/views/sections/EarlyAccess'));
+
+/***************************  METADATA - EARLY ACCCESS  ***************************/
+
+export const metadata = { ...SEO_CONTENT.earlyAccess, openGraph: { ...SEO_CONTENT.earlyAccess, url: PAGE_PATH.earlyAccess } };
+
+/***************************  PAGE - EARLY ACCCESS  ***************************/
+
+export default function EarlyAccessPage() {
+  return <EarlyAccess />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Error404 = dynamic(() => import('@/views/sections/Error404'));
+
+/***************************  METADATA - ERROR 404  ***************************/
+
+export const metadata = { ...SEO_CONTENT.error404, openGraph: { ...SEO_CONTENT.error404, url: PAGE_PATH.error404 } };
+
+/***************************  PAGE - ERROR 404  ***************************/
+
+export default function Error404Page() {
+  return <Error404 />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Error500 = dynamic(() => import('@/views/sections/Error500'));
+
+/***************************  METADATA - ERROR 500  ***************************/
+
+export const metadata = { ...SEO_CONTENT.error500, openGraph: { ...SEO_CONTENT.error500, url: PAGE_PATH.error500 } };
+
+/***************************  PAGE - ERROR 500  ***************************/
+
+export default function Error500Page() {
+  return <Error500 />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Faq = dynamic(() => import('@/views/sections/Faq'));
+
+/***************************  METADATA - FAQ  ***************************/
+
+export const metadata = { ...SEO_CONTENT.faq, openGraph: { ...SEO_CONTENT.faq, url: PAGE_PATH.faq } };
+
+/***************************  PAGE - FAQ  ***************************/
+
+export default function FaqPage() {
+  return <Faq />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Feature = dynamic(() => import('@/views/sections/Feature'));
+
+/***************************  METADATA - FEATURE  ***************************/
+
+export const metadata = { ...SEO_CONTENT.feature, openGraph: { ...SEO_CONTENT.feature, url: PAGE_PATH.feature } };
+
+/***************************  PAGE - FEATURE  ***************************/
+
+export default function FeaturePage() {
+  return <Feature />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Footer = dynamic(() => import('@/views/sections/Footer'));
+
+/***************************  METADATA - FOOTER  ***************************/
+
+export const metadata = { ...SEO_CONTENT.footer, openGraph: { ...SEO_CONTENT.footer, url: PAGE_PATH.footer } };
+
+/***************************  PAGE - FOOTER  ***************************/
+
+export default function FooterPage() {
+  return <Footer />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Gallery = dynamic(() => import('@/views/sections/Gallery'));
+
+/***************************  METADATA - GALLERY  ***************************/
+
+export const metadata = { ...SEO_CONTENT.gallery, openGraph: { ...SEO_CONTENT.gallery, url: PAGE_PATH.gallery } };
+
+/***************************  PAGE - GALLERY  ***************************/
+
+export default function GalleryPage() {
+  return <Gallery />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Hero = dynamic(() => import('@/views/sections/Hero'));
+
+/***************************  METADATA - HERO  ***************************/
+
+export const metadata = { ...SEO_CONTENT.hero, openGraph: { ...SEO_CONTENT.hero, url: PAGE_PATH.hero } };
+
+/***************************  PAGE - HERO  ***************************/
+
+export default function HeroPage() {
+  return <Hero />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Icon = dynamic(() => import('@/views/sections/Icon'));
+
+/***************************  METADATA - ICON  ***************************/
+
+export const metadata = { ...SEO_CONTENT.icon, openGraph: { ...SEO_CONTENT.icon, url: PAGE_PATH.icon } };
+
+/***************************  PAGE - ICON  ***************************/
+
+export default function IconPage() {
+  return <Icon />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Integration = dynamic(() => import('@/views/sections/Integration'));
+
+/***************************  METADATA - INTEGRATION  ***************************/
+
+export const metadata = { ...SEO_CONTENT.integration, openGraph: { ...SEO_CONTENT.integration, url: PAGE_PATH.integration } };
+
+/***************************  PAGE - INTEGRATION  ***************************/
+
+export default function IntegrationPage() {
+  return <Integration />;
+}
@@ -0,0 +1,26 @@
+'use client';
+import PropTypes from 'prop-types';
+
+// @next
+import dynamic from 'next/dynamic';
+
+const ScrollFab = dynamic(() => import('@/components/ScrollFab'));
+const SectionsLayout = dynamic(() => import('@/views/sections/layout'));
+
+/***************************  LAYOUT - SECTIONS  ***************************/
+
+export default function Sections({ children }) {
+
+  return (
+    <SectionsLayout>
+      <>
+        {children}
+
+        {/* scroll to top section */}
+        <ScrollFab />
+      </>
+    </SectionsLayout>
+  );
+}
+
+Sections.propTypes = { children: PropTypes.any };
@@ -0,0 +1,8 @@
+// @project
+import Loader from '@/components/Loader';
+
+/***************************  LOADER  ***************************/
+
+export default function Loading() {
+  return <Loader />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const MegaMenu = dynamic(() => import('@/views/sections/MegaMenu'));
+
+/***************************  METADATA - MEGA MENU  ***************************/
+
+export const metadata = { ...SEO_CONTENT.megaMenu, openGraph: { ...SEO_CONTENT.megaMenu, url: PAGE_PATH.megaMenu } };
+
+/***************************  PAGE - MEGA MENU  ***************************/
+
+export default function MegaMenuPage() {
+  return <MegaMenu />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Metrics = dynamic(() => import('@/views/sections/metrics'));
+
+/***************************  METADATA - METRICS  ***************************/
+
+export const metadata = { ...SEO_CONTENT.metrics, openGraph: { ...SEO_CONTENT.metrics, url: PAGE_PATH.metrics } };
+
+/***************************  PAGE - METRICS  ***************************/
+
+export default function MetricsPage() {
+  return <Metrics />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Navbar = dynamic(() => import('@/views/sections/Navbar'));
+
+/***************************  METADATA - NAVBAR  ***************************/
+
+export const metadata = { ...SEO_CONTENT.navbar, openGraph: { ...SEO_CONTENT.navbar, url: PAGE_PATH.navbar } };
+
+/***************************  PAGE - NAVBAR  ***************************/
+
+export default function NavbarPage() {
+  return <Navbar />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const OnBoard = dynamic(() => import('@/views/sections/OnBoard'));
+
+/***************************  METADATA - ONBOARD  ***************************/
+
+export const metadata = { ...SEO_CONTENT.onBoard, openGraph: { ...SEO_CONTENT.onBoard, url: PAGE_PATH.onboard } };
+
+/***************************  PAGE - ONBOARD  ***************************/
+
+export default function OnBoardPage() {
+  return <OnBoard />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Other = dynamic(() => import('@/views/sections/Other'));
+
+/***************************  METADATA - OTHER  ***************************/
+
+export const metadata = { ...SEO_CONTENT.other, openGraph: { ...SEO_CONTENT.other, url: PAGE_PATH.other } };
+
+/***************************  PAGE - OTHER  ***************************/
+
+export default function OtherPage() {
+  return <Other />;
+}
@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { SEO_CONTENT } from '@/metadata';
+
+const Sections = dynamic(() => import('@/views/sections'));
+
+/***************************  METADATA - SECTIONS  ***************************/
+
+export const metadata = { ...SEO_CONTENT.section };
+
+/***************************  PAGE - SECTIONS  ***************************/
+
+export default function SectionsPage() {
+  return <Sections />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Pricing = dynamic(() => import('@/views/sections/Pricing'));
+
+/***************************  METADATA - PRICING  ***************************/
+
+export const metadata = { ...SEO_CONTENT.pricing, openGraph: { ...SEO_CONTENT.pricing, url: PAGE_PATH.pricing } };
+
+/***************************  PAGE - PRICING  ***************************/
+
+export default function PricingPage() {
+  return <Pricing />;
+}
@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { SEO_CONTENT } from '@/metadata';
+
+const PrivacyPolicy = dynamic(() => import('@/views/sections/PrivacyPolicy'));
+
+/***************************  METADATA - PRIVACY POLICY  ***************************/
+
+export const metadata = { ...SEO_CONTENT.privacyPolicy };
+
+/***************************  PAGE - PRIVACY POLICY  ***************************/
+
+export default function PrivacyPolicyPage() {
+  return <PrivacyPolicy />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const ProPages = dynamic(() => import('@/views/sections/ProPage'));
+
+/***************************  METADATA - PRO PAGE  ***************************/
+
+export const metadata = { ...SEO_CONTENT.pricing, openGraph: { ...SEO_CONTENT.pricing, url: PAGE_PATH.pricing } };
+
+/***************************  PAGE - PRICING  ***************************/
+
+export default function ProPage() {
+  return <ProPages />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Process = dynamic(() => import('@/views/sections/Process'));
+
+/***************************  METADATA - PROCESS  ***************************/
+
+export const metadata = { ...SEO_CONTENT.process, openGraph: { ...SEO_CONTENT.process, url: PAGE_PATH.process } };
+
+/***************************  PAGE - PROCESS  ***************************/
+
+export default function ProcessPage() {
+  return <Process />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const SmallHero = dynamic(() => import('@/views/sections/SmallHero'));
+
+/***************************  METADATA - SMALL HERO  ***************************/
+
+export const metadata = { ...SEO_CONTENT.smallHero, openGraph: { ...SEO_CONTENT.smallHero, url: PAGE_PATH.smallHero } };
+
+/***************************  PAGE - SMALL HERO  ***************************/
+
+export default function SmallHeroPage() {
+  return <SmallHero />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Team = dynamic(() => import('@/views/sections/Team'));
+
+/***************************  METADATA - TEAM  ***************************/
+
+export const metadata = { ...SEO_CONTENT.team, openGraph: { ...SEO_CONTENT.team, url: PAGE_PATH.team } };
+
+/***************************  PAGE - TEAM  ***************************/
+
+export default function TeamPage() {
+  return <Team />;
+}
@@ -0,0 +1,20 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const TermsCondition = dynamic(() => import('@/views/sections/TermsCondition'));
+
+/***************************  METADATA - TERMS CONDITION  ***************************/
+
+export const metadata = {
+  ...SEO_CONTENT.termsCondition,
+  openGraph: { ...SEO_CONTENT.termsCondition, url: PAGE_PATH.termsCondition }
+};
+
+/***************************  PAGE - TERMS CONDITION  ***************************/
+
+export default function TermsConditionPage() {
+  return <TermsCondition />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Testimonial = dynamic(() => import('@/views/sections/Testimonial'));
+
+/***************************  METADATA - TESTIMONIAL  ***************************/
+
+export const metadata = { ...SEO_CONTENT.testimonial, openGraph: { ...SEO_CONTENT.testimonial, url: PAGE_PATH.testimonial } };
+
+/***************************  PAGE - TESTIMONIAL  ***************************/
+
+export default function TestimonialPage() {
+  return <Testimonial />;
+}
@@ -0,0 +1,15 @@
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+import TopOffer from '@/views/sections/TopOffer';
+
+/***************************  METADATA - TOP OFFER  ***************************/
+
+export const metadata = { ...SEO_CONTENT.topOffer, openGraph: { ...SEO_CONTENT.topOffer, url: PAGE_PATH.topOffer } };
+
+/***************************  PAGE - TOP OFFER  ***************************/
+
+export default function TopOfferPage() {
+  return <TopOffer />;
+}
@@ -0,0 +1,17 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const Typography = dynamic(() => import('@/views/sections/Typography'));
+
+/***************************  METADATA - TYPOGRAPHY  ***************************/
+
+export const metadata = { ...SEO_CONTENT.typography, openGraph: { ...SEO_CONTENT.typography, url: PAGE_PATH.typography } };
+
+/***************************  PAGE - TYPOGRAPHY  ***************************/
+
+export default function TypographyPage() {
+  return <Typography />;
+}
@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { SEO_CONTENT } from '@/metadata';
+
+const UnderMaintenance = dynamic(() => import('@/views/sections/UnderMaintenance'));
+
+/***************************  METADATA - UNDER MAINTENANCE  ***************************/
+
+export const metadata = { ...SEO_CONTENT.underMaintenance };
+
+/***************************  PAGE - UNDER MAINTENANCE  ***************************/
+
+export default function UnderMaintenancePage() {
+  return <UnderMaintenance />;
+}
@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { SEO_CONTENT } from '@/metadata';
+
+const Contact = dynamic(() => import('@/views/landings/default/contact'));
+
+/***************************  METADATA - CONTACT  ***************************/
+
+export const metadata = { ...SEO_CONTENT.contactUs };
+
+/***************************  PAGE - CONTACT  ***************************/
+
+export default function ContactPage() {
+  return <Contact />;
+}
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+// @next
+import dynamic from 'next/dynamic';
+
+// @project
+const ScrollFab = dynamic(() => import('@/components/ScrollFab'));
+// const ThemeAI = dynamic(() => import('@/views/landings/ai/theme'));
+const MainLayout = dynamic(() => import('@/views/landings/default/layout'));
+
+/***************************  LAYOUT - AI  ***************************/
+
+export default function AI({ children }) {
+  return (
+    // <ThemeAI>
+    <MainLayout>
+      <>
+        {children}
+
+        {/* scroll to top section */}
+        <ScrollFab />
+      </>
+    </MainLayout>
+    // </ThemeAI>
+  );
+}
+
+AI.propTypes = { children: PropTypes.any };
@@ -0,0 +1,19 @@
+// @next
+import dynamic from 'next/dynamic';
+
+// @project
+const ScrollFab = dynamic(() => import('@/components/ScrollFab'));
+const Main = dynamic(() => import('@/views/landings/default'));
+
+/***************************  PAGE - ROOT  ***************************/
+
+export default function HomePage() {
+  return (
+    <>
+      <Main />
+
+      {/* scroll to top section */}
+      <ScrollFab />
+    </>
+  );
+}
@@ -0,0 +1,16 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { SEO_CONTENT } from '@/metadata';
+
+const PrivacyPolicy = dynamic(() => import('@/views/landings/default/privacy-policy'));
+
+/***************************  METADATA - PRIVACY POLICY  ***************************/
+
+export const metadata = { ...SEO_CONTENT.privacyPolicy };
+
+/*************************** PAGE - PRIVACY POLICY ***************************/
+
+export default function PrivacyPolicyPage() {
+  return <PrivacyPolicy />;
+}
@@ -0,0 +1,20 @@
+import dynamic from 'next/dynamic';
+
+// @project
+import { PAGE_PATH } from '@/path';
+import { SEO_CONTENT } from '@/metadata';
+
+const TermsCondition = dynamic(() => import('@/views/landings/default/terms-condition'));
+
+/***************************  METADATA - TERMS CONDITION  ***************************/
+
+export const metadata = {
+  ...SEO_CONTENT.termsCondition,
+  openGraph: { ...SEO_CONTENT.termsCondition, url: PAGE_PATH.termsConditionPage }
+};
+
+/*************************** PAGE - TERMS CONDITION ***************************/
+
+export default function TermsConditionPage() {
+  return <TermsCondition />;
+}
@@ -0,0 +1,36 @@
+'use client';
+import PropTypes from 'prop-types';
+
+import { useEffect, useState } from 'react';
+
+// @project
+import Loader from '@/components/Loader';
+import ThemeProvider from '@/components/ThemeProvider';
+import { ConfigProvider } from '@/contexts/ConfigContext';
+
+/***************************  COMMON - CONFIG, THEME  ***************************/
+
+export default function ProviderWrapper({ children }) {
+  const [loader, setLoader] = useState(true);
+
+  useEffect(() => {
+    setLoader(false);
+  }, []);
+
+  /**
+   * A loader is needed here to initialize the configuration from localStorage and set the default theme.
+   * Without a loader,
+   * the theme palette and fontFamily don't match, resulting in an error like:
+   * "Warning: Prop className did not match".
+   */
+
+  return (
+    <ConfigProvider>
+      <ThemeProvider>
+        <main>{loader ? <Loader /> : children}</main>
+      </ThemeProvider>
+    </ConfigProvider>
+  );
+}
+
+ProviderWrapper.propTypes = { children: PropTypes.any };
@@ -0,0 +1,38 @@
+// @next
+import { NextResponse } from 'next/server';
+
+// @third-party
+import axios from 'axios';
+
+/***************************  API - MAILERLITE SUBSCRIBE  ***************************/
+
+// POST handler for /api/subscribe
+export async function POST(request) {
+  try {
+    const { email } = await request.json();
+    if (!email) {
+      return NextResponse.json({ error: 'Email is required' }, { status: 400 });
+    }
+    // Example: MailerLite API endpoint (replace with your actual MailerLite API URL)
+    const mailerLiteUrl = `${process.env.MAILERLITE_API_ENDPOINT}/subscribers`;
+
+    // Make the Axios POST request to MailerLite (replace 'YOUR_API_KEY' with your actual API key)
+    await axios.post(
+      mailerLiteUrl,
+      { email, groups: process.env.MAILERLITE_GROUP?.trim().replaceAll(' ', '').split(',') },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${process.env.MAILERLITE_API_KEY}` // Authorization header with MailerLite API key
+        }
+      }
+    );
+
+    // Handle successful response
+    return NextResponse.json({ message: 'Subscribed successfully!' }, { status: 200 });
+  } catch (error) {
+    // Handle failure response
+    console.error('Error subscribing:', error);
+    return NextResponse.json({ error }, { status: 500 });
+  }
+}
@@ -0,0 +1,22 @@
+'use client';
+
+// @project
+import { Error500Page } from '@/blocks/maintenance';
+import ThemeProviders from '@/components/ThemeProvider';
+
+/***************************  ERROR 500 - DATA  ***************************/
+
+const data = {
+  primaryBtn: { children: 'Back to Home Page' },
+  heading: 'Please try again later or feel free to contact us if the problem persists.'
+};
+
+/***************************  ERROR - 500  ***************************/
+
+export default function InternalServerError() {
+  return (
+    <ThemeProviders>
+      <Error500Page {...data} />
+    </ThemeProviders>
+  );
+}
@@ -0,0 +1,18 @@
+/* slick-carousel slider */
+@import 'slick-carousel/slick/slick.css';
+@import 'slick-carousel/slick/slick-theme.css';
+
+/* scrollbar */
+@import '../styles/scrollbar.css';
+
+/* to remove default browser focus-visible */
+body * {
+  &:focus-visible,
+  &:focus {
+    outline: none;
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import Script from 'next/script';
+
+// @style
+import './globals.css';
+
+// @mui
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+
+// @project
+import ProviderWrapper from './ProviderWrapper';
+import { mainMetadata } from '@/metadata';
+
+const gaId = process.env.NEXT_PUBLIC_ANALYTICS_ID || '';
+
+/***************************  METADATA - MAIN  ***************************/
+
+export const metadata = { ...mainMetadata };
+
+/***************************  LAYOUT - MAIN  ***************************/
+
+// Root layout component that wraps the entire application
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        {/* Preconnect and DNS Prefetch */}
+        <link rel="preconnect" href="https://www.googletagmanager.com" />
+        <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
+        <script src="https://fomo.codedthemes.com/pixel/gkPddwTcjNYydfr7v3FcZuToUb9ZAevo" defer data-nscript="lazyOnload"></script>
+      </head>
+      <body>
+        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+          <ProviderWrapper>{children}</ProviderWrapper>
+        </AppRouterCacheProvider>
+        {gaId && <Script strategy="lazyOnload" src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`} />}
+      </body>
+    </html>
+  );
+}
+
+RootLayout.propTypes = { children: PropTypes.any };
@@ -0,0 +1,13 @@
+// @project
+import Loader from '@/components/Loader';
+import ThemeProviders from '@/components/ThemeProvider';
+
+/***************************  LOADER  ***************************/
+
+export default function Loading() {
+  return (
+    <ThemeProviders>
+      <Loader />
+    </ThemeProviders>
+  );
+}
@@ -0,0 +1,22 @@
+'use client';
+
+// @project
+import { Error404Page } from '@/blocks/maintenance';
+import ThemeProviders from '@/components/ThemeProvider';
+
+/***************************  ERROR 404 - DATA  ***************************/
+
+const data = {
+  primaryBtn: { children: 'Back to Home Page', onClick: () => window.history.back() },
+  heading: `Looks like you've taken a wrong turn. Lets get you back on track!`
+};
+
+/***************************  ERROR - 404  ***************************/
+
+export default function notfound() {
+  return (
+    <ThemeProviders>
+      <Error404Page {...data} />
+    </ThemeProviders>
+  );
+}