initial commit

src/views/front-pages/CheckoutPage.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+// React Imports
+import { useEffect } from 'react'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Component Imports
+import Checkout from '@views/pages/wizard-examples/checkout/index'
+import { useSettings } from '@core/hooks/useSettings'
+
+// Styles Imports
+import frontCommonStyles from './styles.module.css'
+
+const CheckoutPage = () => {
+  // Hooks
+  const { updatePageSettings } = useSettings()
+
+  // For Page specific settings
+  useEffect(() => {
+    return updatePageSettings({
+      skin: 'default'
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <section className={classnames('md:plb-[100px] plb-6', frontCommonStyles.layoutSpacing)}>
+      <Checkout />
+    </section>
+  )
+}
+
+export default CheckoutPage

src/views/front-pages/Payment.tsx

@@ -0,0 +1,294 @@
+'use client'
+
+// React Imports
+import type { ChangeEvent } from 'react'
+import { useState, useEffect } from 'react'
+
+// MUI Imports
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Grid from '@mui/material/Grid2'
+import MenuItem from '@mui/material/MenuItem'
+import Avatar from '@mui/material/Avatar'
+import Divider from '@mui/material/Divider'
+import type { ButtonProps } from '@mui/material/Button'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Type Imports
+import type { CustomInputHorizontalData } from '@core/components/custom-inputs/types'
+import type { PricingPlanType } from '@/types/pages/pricingTypes'
+
+// Component Imports
+import CustomInputHorizontal from '@core/components/custom-inputs/Horizontal'
+import PricingDialog from '@components/dialogs/pricing'
+import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'
+import DirectionalIcon from '@components/DirectionalIcon'
+import { useSettings } from '@core/hooks/useSettings'
+import CustomTextField from '@core/components/mui/TextField'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+// Data
+const cardData: CustomInputHorizontalData[] = [
+  {
+    title: (
+      <div className='flex items-center gap-4'>
+        <Avatar
+          variant='rounded'
+          className='is-[58px] bs-[34px]'
+          sx={theme => ({
+            backgroundColor: 'var(--mui-palette-action-hover)',
+            ...theme.applyStyles('dark', {
+              backgroundColor: 'var(--mui-palette-common-white)'
+            })
+          })}
+        >
+          <img src='/images/logos/visa.png' alt='plan' className='bs-3' />
+        </Avatar>
+        <Typography color='text.primary' className='font-medium'>
+          Credit Card
+        </Typography>
+      </div>
+    ),
+    value: 'credit-card',
+    isSelected: true
+  },
+  {
+    title: (
+      <div className='flex items-center gap-4'>
+        <Avatar
+          variant='rounded'
+          className='is-[58px] bs-[34px]'
+          sx={theme => ({
+            backgroundColor: 'var(--mui-palette-action-hover)',
+            ...theme.applyStyles('dark', {
+              backgroundColor: 'var(--mui-palette-common-white)'
+            })
+          })}
+        >
+          <img src='/images/logos/paypal.png' alt='plan' className='bs-5' />
+        </Avatar>
+        <Typography color='text.primary' className='font-medium'>
+          Paypal
+        </Typography>
+      </div>
+    ),
+    value: 'paypal'
+  }
+]
+
+const countries = ['Australia', 'Brazil', 'Canada', 'India', 'United Arab Emirates', 'United Kingdom', 'United States']
+
+const Payment = ({ data }: { data: PricingPlanType[] }) => {
+  // Vars
+  const buttonProps: ButtonProps = {
+    variant: 'tonal',
+    children: 'Change Plan'
+  }
+
+  const initialSelected: string = cardData.filter(item => item.isSelected)[
+    cardData.filter(item => item.isSelected).length - 1
+  ].value
+
+  // States
+  const [selectCountry, setSelectCountry] = useState('Brazil')
+  const [selectInput, setSelectInput] = useState<string>(initialSelected)
+
+  // Hooks
+  const { updatePageSettings } = useSettings()
+
+  const handleCountryChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSelectCountry(event.target.value)
+  }
+
+  const handlePaymentChange = (prop: string | ChangeEvent<HTMLInputElement>) => {
+    if (typeof prop === 'string') {
+      setSelectInput(prop)
+    } else {
+      setSelectInput((prop.target as HTMLInputElement).value)
+    }
+  }
+
+  // For Page specific settings
+  useEffect(() => {
+    return updatePageSettings({
+      skin: 'default'
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <section className={classnames('md:plb-[100px] plb-6', frontCommonStyles.layoutSpacing)}>
+      <Card>
+        <Grid container>
+          <Grid size={{ md: 12, lg: 7 }}>
+            <CardContent className='flex flex-col max-sm:gap-y-5 gap-y-8 sm:p-8 border-be lg:border-be-0 lg:border-e bs-full'>
+              <div className='flex flex-col gap-2'>
+                <Typography variant='h4'>Checkout</Typography>
+                <Typography>
+                  All plans include 40+ advanced tools and features to boost your product. Choose the best plan to fit
+                  your needs.
+                </Typography>
+              </div>
+              <Grid container spacing={4}>
+                {cardData.map((item, index) => (
+                  <CustomInputHorizontal
+                    key={index}
+                    type='radio'
+                    name='paymemt-method'
+                    data={item}
+                    selected={selectInput}
+                    handleChange={handlePaymentChange}
+                    gridProps={{ size: { xs: 12, sm: 6 } }}
+                  />
+                ))}
+              </Grid>
+              <div>
+                <Typography variant='h4' className='mbe-6'>
+                  Billing Details
+                </Typography>
+                <Grid container spacing={5}>
+                  <Grid size={{ xs: 12, sm: 6 }}>
+                    <CustomTextField fullWidth label='Email Address' placeholder='john.deo@gmail.com' type='email' />
+                  </Grid>
+                  <Grid size={{ xs: 12, sm: 6 }}>
+                    <CustomTextField
+                      fullWidth
+                      type='password'
+                      id='password-input'
+                      label='Password'
+                      placeholder='Password'
+                    />
+                  </Grid>
+                  <Grid size={{ xs: 12, sm: 6 }}>
+                    <CustomTextField
+                      select
+                      fullWidth
+                      label='Billing Country'
+                      name='country'
+                      variant='outlined'
+                      value={selectCountry}
+                      onChange={handleCountryChange}
+                    >
+                      {countries.map((item, index) => (
+                        <MenuItem key={index} value={item}>
+                          {item}
+                        </MenuItem>
+                      ))}
+                    </CustomTextField>
+                  </Grid>
+                  <Grid size={{ xs: 12, sm: 6 }}>
+                    <CustomTextField
+                      label='Billing Zip / Postal Code'
+                      id='postal-code-input'
+                      placeholder='Billing Zip / Postal Code'
+                      fullWidth
+                      type='number'
+                    />
+                  </Grid>
+                </Grid>
+              </div>
+              {selectInput === 'credit-card' && (
+                <div>
+                  <Typography variant='h4' className='mbe-6'>
+                    Credit Card Info
+                  </Typography>
+                  <Grid container spacing={5}>
+                    <Grid size={{ xs: 12 }}>
+                      <CustomTextField
+                        fullWidth
+                        id='card-number-input'
+                        placeholder='8763 2345 3478'
+                        label='Card Number'
+                        type='number'
+                      />
+                    </Grid>
+                    <Grid size={{ xs: 12, sm: 6 }}>
+                      <CustomTextField fullWidth id='card-holder-name' placeholder='John Doe' label='Card Holder' />
+                    </Grid>
+                    <Grid size={{ xs: 12, sm: 3 }}>
+                      <CustomTextField
+                        fullWidth
+                        id='expiry-date'
+                        placeholder='05/2026'
+                        label='EXP. date'
+                        type='number'
+                      />
+                    </Grid>
+                    <Grid size={{ xs: 12, sm: 3 }}>
+                      <CustomTextField fullWidth id='cvv' placeholder='734' label='CVV' type='number' />
+                    </Grid>
+                  </Grid>
+                </div>
+              )}
+            </CardContent>
+          </Grid>
+          <Grid size={{ md: 12, lg: 5 }}>
+            <CardContent className='flex flex-col gap-8 sm:p-8'>
+              <div className='flex flex-col gap-2'>
+                <Typography variant='h4'>Order Summary</Typography>
+                <Typography>
+                  It can help you manage and service orders before, during, and after fulfillment.
+                </Typography>
+              </div>
+              <div className='flex flex-col gap-5'>
+                <div className='flex flex-col gap-4 p-6 bg-actionHover rounded'>
+                  <Typography>A simple start for everyone</Typography>
+                  <div className='flex items-baseline'>
+                    <Typography variant='h1'>$59.99</Typography>
+                    <Typography component='sub'>/month</Typography>
+                  </div>
+                  <OpenDialogOnElementClick
+                    element={Button}
+                    elementProps={buttonProps}
+                    dialog={PricingDialog}
+                    dialogProps={{ data }}
+                  />
+                </div>
+                <div>
+                  <div className='flex gap-2 items-center justify-between mbe-2'>
+                    <Typography>Subscription</Typography>
+                    <Typography color='text.primary' className='font-medium'>
+                      $85.99
+                    </Typography>
+                  </div>
+                  <div className='flex gap-2 items-center justify-between'>
+                    <Typography>Tax</Typography>
+                    <Typography color='text.primary' className='font-medium'>
+                      $4.99
+                    </Typography>
+                  </div>
+                  <Divider className='mlb-4' />
+                  <div className='flex gap-2 items-center justify-between'>
+                    <Typography>Total</Typography>
+                    <Typography color='text.primary' className='font-medium'>
+                      $90.98
+                    </Typography>
+                  </div>
+                </div>
+                <Button
+                  variant='contained'
+                  color='success'
+                  endIcon={<DirectionalIcon ltrIconClass='tabler-arrow-right' rtlIconClass='tabler-arrow-left' />}
+                >
+                  Proceed With Payment
+                </Button>
+              </div>
+              <Typography>
+                By continuing, you accept to our Terms of Services and Privacy Policy. Please note that payments are
+                non-refundable.
+              </Typography>
+            </CardContent>
+          </Grid>
+        </Grid>
+      </Card>
+    </section>
+  )
+}
+
+export default Payment

src/views/front-pages/help-center/Articles.tsx

@@ -0,0 +1,87 @@
+// React Imports
+import type { ReactNode } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid2'
+
+// SVG Imports
+import Gift from '@assets/svg/front-pages/help-center/Gift'
+import Rocket from '@assets/svg/front-pages/help-center/Rocket'
+import File from '@assets/svg/front-pages/help-center/File'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+// Types
+type popularArticlesType = {
+  slug: string
+  title: string
+  svg: ReactNode
+  subtitle: string
+}
+
+// Data
+const popularArticles: popularArticlesType[] = [
+  {
+    slug: 'getting-started',
+    title: 'Getting Started',
+    svg: <Rocket color='var(--mui-palette-text-secondary)' />,
+    subtitle: "Whether you're new or you're a power user, this article will"
+  },
+  {
+    slug: 'first-steps',
+    title: 'First Steps',
+    svg: <Gift color='var(--mui-palette-text-secondary)' />,
+    subtitle: 'Are you a new customer and wondering how to get started?'
+  },
+  {
+    slug: 'external-content',
+    title: 'Add External Content',
+    svg: <File color='var(--mui-palette-text-secondary)' />,
+    subtitle: 'Article will show you how to expand the functionality of App'
+  }
+]
+
+const Articles = () => {
+  return (
+    <section className='md:plb-[100px] plb-[50px] bg-backgroundPaper'>
+      <div className={frontCommonStyles.layoutSpacing}>
+        <Typography variant='h4' className='text-center mbe-6'>
+          Popular Articles
+        </Typography>
+        <Grid container spacing={6}>
+          {popularArticles.map((article, index) => {
+            return (
+              <Grid size={{ xs: 12, lg: 4 }} key={index}>
+                <Card variant='outlined'>
+                  <CardContent className='flex flex-col items-center justify-center gap-3 text-center'>
+                    {article.svg}
+                    <Typography variant='h5'>{article.title}</Typography>
+                    <Typography>{article.subtitle}</Typography>
+                    <Button
+                      component={Link}
+                      href='/front-pages/help-center/article/how-to-add-product-in-cart'
+                      variant='tonal'
+                      size='small'
+                    >
+                      Read More
+                    </Button>
+                  </CardContent>
+                </Card>
+              </Grid>
+            )
+          })}
+        </Grid>
+      </div>
+    </section>
+  )
+}
+
+export default Articles

src/views/front-pages/help-center/HelpCenterHeader.tsx

@@ -0,0 +1,64 @@
+// MUI Imports
+import { styled } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+import InputAdornment from '@mui/material/InputAdornment'
+import type { TextFieldProps } from '@mui/material/TextField'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Components Imports
+import CustomTextField from '@core/components/mui/TextField'
+
+// Styles imports
+import styles from './styles.module.css'
+
+// Styled TextField component
+const CustomTextFieldStyled = styled(CustomTextField)<TextFieldProps>(({ theme }) => ({
+  '& .MuiInputBase-root.MuiFilledInput-root': {
+    width: '100%',
+    backgroundColor: 'var(--mui-palette-background-paper) !important'
+  },
+  [theme.breakpoints.up('sm')]: {
+    width: '55%'
+  }
+}))
+
+type Props = {
+  searchValue: string
+  setSearchValue: (value: string) => void
+}
+
+const HelpCenterHeader = ({ searchValue, setSearchValue }: Props) => {
+  return (
+    <section className={classnames('-mbs-[18%] sm:mbs-[-10%] lg:mbs-[-5%] md:mbs-[-8%]', styles.bgImage)}>
+      <div
+        className={classnames(
+          'flex flex-col gap-4 items-center text-center pbs-[150px] lg:pbs-[168px] pbe-[40px] sm:pbe-[100px] pli-5'
+        )}
+      >
+        <Typography variant='h4' color='primary.main'>
+          Hello, how can we help?
+        </Typography>
+        <CustomTextFieldStyled
+          className='is-full sm:max-is-[55%] md:max-is-[465px]'
+          placeholder='Ask a question...'
+          value={searchValue}
+          onChange={e => setSearchValue(e.target.value)}
+          slotProps={{
+            input: {
+              startAdornment: (
+                <InputAdornment position='start'>
+                  <i className='tabler-search' />
+                </InputAdornment>
+              )
+            }
+          }}
+        />
+        <Typography>Common troubleshooting topics: eCommerce, Blogging to payment</Typography>
+      </div>
+    </section>
+  )
+}
+
+export default HelpCenterHeader

src/views/front-pages/help-center/KeepLearning.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid2'
+
+// SVG Imports
+import Laptop from '@assets/svg/front-pages/help-center/Laptop'
+import Bulb from '@assets/svg/front-pages/help-center/Bulb'
+import Discord from '@assets/svg/front-pages/help-center/Discord'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+// Types
+type keepLearningType = {
+  slug: string
+  title: string
+  svg: ReactNode
+  subtitle: string
+}
+
+// Data
+const keepLearning: keepLearningType[] = [
+  {
+    slug: 'blogging',
+    title: 'Blogging',
+    svg: <Laptop color='var(--mui-palette-text-secondary)' />,
+    subtitle: 'Expert tips & tools to improve your website or online store using blog.'
+  },
+  {
+    slug: 'inspiration-center',
+    title: 'Inspiration Center',
+    svg: <Bulb color='var(--mui-palette-text-secondary)' />,
+    subtitle: 'Inspiration from experts to help you start and grow your big ideas.'
+  },
+  {
+    slug: 'community',
+    title: 'Community',
+    svg: <Discord color='var(--mui-palette-text-secondary)' />,
+    subtitle: 'A group of people living in the same place or having a particular.'
+  }
+]
+
+const KeepLearning = () => {
+  return (
+    <section className='flex flex-col md:plb-[100px] plb-[50px] bg-backgroundPaper'>
+      <div className={frontCommonStyles.layoutSpacing}>
+        <Typography variant='h4' className='text-center mbe-6'>
+          Keep Learning
+        </Typography>
+        <Grid container spacing={6}>
+          {keepLearning.map((article, index) => {
+            return (
+              <Grid size={{ xs: 12, lg: 4 }} key={index}>
+                <Card variant='outlined'>
+                  <CardContent className='flex flex-col items-center justify-center gap-3 text-center'>
+                    {article.svg}
+                    <Typography variant='h5'>{article.title}</Typography>
+                    <Typography>{article.subtitle}</Typography>
+                    <Button
+                      component={Link}
+                      href='/front-pages/help-center/article/how-to-add-product-in-cart'
+                      variant='tonal'
+                      size='small'
+                    >
+                      Read More
+                    </Button>
+                  </CardContent>
+                </Card>
+              </Grid>
+            )
+          })}
+        </Grid>
+      </div>
+    </section>
+  )
+}
+
+export default KeepLearning

src/views/front-pages/help-center/KnowledgeBase.tsx

@@ -0,0 +1,162 @@
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Grid2'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Component Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+import DirectionalIcon from '@components/DirectionalIcon'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+// Types
+type popularArticlesType = {
+  title: string
+  icon: string
+  articles: { title: string }[]
+}
+
+// Data
+const allArticles: popularArticlesType[] = [
+  {
+    title: 'Buying',
+    icon: 'tabler-shopping-cart',
+    articles: [
+      { title: 'What are Favourites?' },
+      { title: 'How do I purchase an item?' },
+      { title: 'How do i add or change my details?' },
+      { title: 'How do refunds work?' },
+      { title: 'Can I Get A Refund?' },
+      { title: "I'm trying to find a specific item" }
+    ]
+  },
+  {
+    title: 'Item Support',
+    icon: 'tabler-help',
+    articles: [
+      { title: 'What is Item Support?' },
+      { title: 'How to contact an author?' },
+      { title: 'Where Is My Purchase Code?' },
+      { title: 'Extend or renew Item Support' },
+      { title: 'Item Support FAQ' },
+      { title: 'Why has my item been removed?' }
+    ]
+  },
+  {
+    title: 'Licenses',
+    icon: 'tabler-currency-dollar',
+    articles: [
+      { title: 'Can I use the same license for the...' },
+      { title: 'How to contact an author?' },
+      { title: "I'm making a test site - it's not for ..." },
+      { title: 'which license do I need?' },
+      { title: 'I want to make multiple end prod ...' },
+      { title: 'For logo what license do I need?' }
+    ]
+  },
+  {
+    title: 'Template Kits',
+    icon: 'tabler-color-swatch',
+    articles: [
+      { title: 'Template Kits' },
+      { title: 'Elementor Template Kits: PHP Zip ...' },
+      { title: 'Template Kits - Imported template ...' },
+      { title: 'Troubleshooting Import Problems' },
+      { title: 'How to use the WordPress Plugin ...' },
+      { title: 'How to use the Template Kit Import ...' }
+    ]
+  },
+  {
+    title: 'Account & Password',
+    icon: 'tabler-lock-open',
+    articles: [
+      { title: 'Signing in with a social account' },
+      { title: 'Locked Out of Account' },
+      { title: "I'm not receiving the verification email" },
+      { title: 'Forgotten Username Or Password' },
+      { title: 'New password not accepted' },
+      { title: 'What is Sign In Verification?' }
+    ]
+  },
+  {
+    title: 'Account Settings',
+    icon: 'tabler-user',
+    articles: [
+      { title: 'How do I change my password?' },
+      { title: 'How do I change my username?' },
+      { title: 'How do I close my account?' },
+      { title: 'How do I change my email address?' },
+      { title: 'How can I regain access to my a ...' },
+      { title: 'Are RSS feeds available on Market?' }
+    ]
+  }
+]
+
+const KnowledgeBase = () => {
+  return (
+    <section className={classnames('flex flex-col gap-6 md:plb-[100px] plb-[50px]', frontCommonStyles.layoutSpacing)}>
+      <Typography variant='h4' className='text-center'>
+        Knowledge Base
+      </Typography>
+      <Grid container spacing={6}>
+        {allArticles.map((article, index) => {
+          return (
+            <Grid size={{ xs: 12, lg: 4 }} key={index}>
+              <Card>
+                <CardContent className='flex flex-col items-start gap-6 text-center'>
+                  <div className='flex gap-3 items-center'>
+                    <CustomAvatar skin='light' variant='rounded' color='primary' size={32}>
+                      <i className={classnames('text-xl', article.icon)} />
+                    </CustomAvatar>
+                    <Typography variant='h5'>{article.title}</Typography>
+                  </div>
+                  <div className='flex flex-col gap-2 is-full'>
+                    {article.articles.map((data, index) => {
+                      return (
+                        <div key={index} className='flex justify-between items-center gap-2'>
+                          <Typography
+                            color='text.primary'
+                            component={Link}
+                            href='/front-pages/help-center/article/how-to-add-product-in-cart'
+                            className='truncate'
+                          >
+                            {data.title}
+                          </Typography>
+                          <DirectionalIcon
+                            ltrIconClass='tabler-chevron-right text-textDisabled text-xl'
+                            rtlIconClass='tabler-chevron-left text-textDisabled text-xl'
+                          />
+                        </div>
+                      )
+                    })}
+                  </div>
+                  <Link
+                    href='/front-pages/help-center/article/how-to-add-product-in-cart'
+                    className='flex items-center gap-x-2 text-primary'
+                  >
+                    <span className='font-medium'>See all 6 articles</span>
+                    <DirectionalIcon
+                      className='text-lg'
+                      ltrIconClass='tabler-arrow-right'
+                      rtlIconClass='tabler-arrow-left'
+                    />
+                  </Link>
+                </CardContent>
+              </Card>
+            </Grid>
+          )
+        })}
+      </Grid>
+    </section>
+  )
+}
+
+export default KnowledgeBase

src/views/front-pages/help-center/NeedHelp.tsx

@@ -0,0 +1,34 @@
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+const NeedHelp = () => {
+  return (
+    <section
+      className={classnames(
+        'flex flex-col justify-center items-center gap-4 md:plb-[100px] plb-[50px]',
+        frontCommonStyles.layoutSpacing
+      )}
+    >
+      <Typography variant='h4' className='text-center'>
+        Still need help?
+      </Typography>
+      <Typography className='text-center'>
+        Our specialists are always happy to help. Contact us during standard business hours or email us 24/7, and
+        we&apos;ll get back to you.
+      </Typography>
+      <div className='flex flex-wrap items-center justify-center gap-4'>
+        <Button variant='contained'>Visit our community</Button>
+        <Button variant='contained'>Contact Us</Button>
+      </div>
+    </section>
+  )
+}
+
+export default NeedHelp

src/views/front-pages/help-center/Questions.tsx

@@ -0,0 +1,106 @@
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Breadcrumbs from '@mui/material/Breadcrumbs'
+import Grid from '@mui/material/Grid2'
+import Divider from '@mui/material/Divider'
+import InputAdornment from '@mui/material/InputAdornment'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Component Imports
+import Link from '@components/Link'
+import DirectionalIcon from '@components/DirectionalIcon'
+import CustomTextField from '@core/components/mui/TextField'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+// Data
+const articleList = [
+  'Template Kits',
+  'Elementor Template Kits: PHP Zip Extends',
+  'Envato Elements Template Kits',
+  'Envato Elements Template Kits',
+  'How to use the template in WordPress',
+  'How to use the Template Kit Import'
+]
+
+const Questions = () => {
+  return (
+    <section className='flex flex-col justify-center items-center gap-4 md:plb-[100px] plb-[50px] pbs-[70px] -mbs-[70px] bg-backgroundPaper'>
+      <div className={classnames('pbs-10 md:pbs-16', frontCommonStyles.layoutSpacing)}>
+        <Grid container spacing={6}>
+          <Grid size={{ xs: 12, lg: 8 }}>
+            <div className='flex flex-col gap-2'>
+              <Breadcrumbs aria-label='breadcrumb'>
+                <Link className='hover:text-primary' href='/front-pages/help-center'>
+                  Help Center
+                </Link>
+                <Typography className='text-textPrimary'>How to add product in cart</Typography>
+              </Breadcrumbs>
+              <Typography variant='h4'>How to add product in cart?</Typography>
+              <Typography>1 month ago - Updated</Typography>
+            </div>
+            <Divider className='mlb-6' />
+            <div className='flex flex-col gap-6'>
+              <div>
+                <Typography className='mbe-4'>
+                  If you&apos;re after only one item, simply choose the &apos;Buy Now&apos; option on the item page.
+                  This will take you directly to Checkout.
+                </Typography>
+                <Typography>
+                  If you want several items, use the &apos;Add to Cart&apos; button and then choose &apos;Keep
+                  Browsing&apos; to continue shopping or &apos;Checkout&apos; to finalize your purchase.
+                </Typography>
+              </div>
+              <img src='/images/front-pages/product.png' alt='product image' className='rounded is-full max-is-auto' />
+              <Typography>
+                You can go back to your cart at any time by clicking on the shopping cart icon at the top right side of
+                the page.
+              </Typography>
+              <img
+                src='/images/front-pages/checkout.png'
+                alt='checkout image'
+                className='rounded is-full max-is-auto'
+              />
+            </div>
+          </Grid>
+          <Grid size={{ xs: 12, lg: 4 }} className='flex flex-col gap-6'>
+            <CustomTextField
+              placeholder='Search...'
+              slotProps={{
+                input: {
+                  startAdornment: (
+                    <InputAdornment position='start'>
+                      <i className='tabler-search' />
+                    </InputAdornment>
+                  )
+                }
+              }}
+            />
+            <div className='flex flex-col gap-4'>
+              <div className='pli-5 plb-2 bg-actionHover rounded'>
+                <Typography variant='h5'>Articles in this section</Typography>
+              </div>
+              <div className='flex flex-col gap-4'>
+                {articleList.map((article, index) => (
+                  <Typography key={index} component={Link} className='flex gap-2 justify-between hover:text-primary'>
+                    <Typography color='inherit'>{article}</Typography>
+                    <DirectionalIcon
+                      ltrIconClass='tabler-chevron-right text-textDisabled text-xl'
+                      rtlIconClass='tabler-chevron-left text-textDisabled text-xl'
+                      className='text-textDisabled'
+                    />
+                  </Typography>
+                ))}
+              </div>
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+    </section>
+  )
+}
+
+export default Questions

src/views/front-pages/help-center/index.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+// React Imports
+import { useState, useEffect } from 'react'
+
+// Component Imports
+import HelpCenterHeader from './HelpCenterHeader'
+import Articles from './Articles'
+import KnowledgeBase from './KnowledgeBase'
+import KeepLearning from './KeepLearning'
+import NeedHelp from './NeedHelp'
+import { useSettings } from '@core/hooks/useSettings'
+
+const HelpCenterWrapper = () => {
+  // States
+  const [searchValue, setSearchValue] = useState('')
+
+  // Hooks
+  const { updatePageSettings } = useSettings()
+
+  // For Page specific settings
+  useEffect(() => {
+    return updatePageSettings({
+      skin: 'default'
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <>
+      <HelpCenterHeader searchValue={searchValue} setSearchValue={setSearchValue} />
+      <Articles />
+      <KnowledgeBase />
+      <KeepLearning />
+      <NeedHelp />
+    </>
+  )
+}
+
+export default HelpCenterWrapper

src/views/front-pages/help-center/styles.module.css

@@ -0,0 +1,5 @@
+.bgImage {
+  background: url('/images/pages/faq-header.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+}

src/views/front-pages/landing-page/ContactUs.tsx

@@ -0,0 +1,143 @@
+// React Imports
+import { useEffect, useRef } from 'react'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid2'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Button from '@mui/material/Button'
+import Chip from '@mui/material/Chip'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Components Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+import CustomTextField from '@core/components/mui/TextField'
+
+// Hook Imports
+import { useIntersection } from '@/hooks/useIntersection'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+import styles from './styles.module.css'
+
+const ContactUs = () => {
+  // Refs
+  const skipIntersection = useRef(true)
+  const ref = useRef<null | HTMLDivElement>(null)
+
+  // Hooks
+  const { updateIntersections } = useIntersection()
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (skipIntersection.current) {
+          skipIntersection.current = false
+
+          return
+        }
+
+        updateIntersections({ [entry.target.id]: entry.isIntersecting })
+      },
+      { threshold: 0.35 }
+    )
+
+    ref.current && observer.observe(ref.current)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <section id='contact-us' className='plb-[100px] bg-backgroundDefault' ref={ref}>
+      <div className={classnames('flex flex-col gap-14', frontCommonStyles.layoutSpacing)}>
+        <div className='flex flex-col gap-y-4 items-center justify-center'>
+          <Chip size='small' variant='tonal' color='primary' label='Contact Us' />
+          <div className='flex flex-col items-center gap-y-1 justify-center flex-wrap'>
+            <div className='flex items-center gap-x-2'>
+              <Typography color='text.primary' variant='h4'>
+                <span className='relative z-[1] font-extrabold'>
+                  Let&#39;s work
+                  <img
+                    src='/images/front-pages/landing-page/bg-shape.png'
+                    alt='bg-shape'
+                    className='absolute block-end-0 z-[1] bs-[40%] is-[132%] -inline-start-[19%] block-start-[17px]'
+                  />
+                </span>{' '}
+                together
+              </Typography>
+            </div>
+            <Typography className='text-center'>Any question or remark? just write us a message</Typography>
+          </div>
+        </div>
+        <div className='lg:pis-[38px]'>
+          <Grid container spacing={6}>
+            <Grid size={{ xs: 12, md: 6, lg: 5 }}>
+              <div className={classnames('border p-[10px] relative', styles.contactRadius)}>
+                <img
+                  src='/images/front-pages/landing-page/contact-border.png'
+                  className='absolute -block-start-[7%] -inline-start-[8%] max-is-full max-lg:hidden '
+                  alt='contact-border'
+                  width='180'
+                />
+                <img
+                  src='/images/front-pages/landing-page/customer-service.png'
+                  alt='customer-service'
+                  className={classnames('is-full', styles.contactRadius)}
+                />
+                <div className='flex justify-between flex-wrap gap-4 pli-6 pbs-4 pbe-[10px]'>
+                  <div className='flex gap-3'>
+                    <CustomAvatar variant='rounded' size={36} skin='light' color='primary'>
+                      <i className='tabler-mail' />
+                    </CustomAvatar>
+                    <div>
+                      <Typography>Email</Typography>
+                      <Typography color='text.primary' className='font-medium'>
+                        example@gamil.com
+                      </Typography>
+                    </div>
+                  </div>
+                  <div className='flex gap-3'>
+                    <CustomAvatar variant='rounded' size={36} skin='light' color='success'>
+                      <i className='tabler-phone' />
+                    </CustomAvatar>
+                    <div>
+                      <Typography>Phone</Typography>
+                      <Typography color='text.primary' className='font-medium'>
+                        +123 568 963
+                      </Typography>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Grid>
+            <Grid size={{ xs: 12, md: 6, lg: 7 }}>
+              <Card>
+                <CardContent>
+                  <div className='flex flex-col gap-y-[6px] mbe-6'>
+                    <Typography variant='h4'>Send a message</Typography>
+                    <Typography>
+                      If you would like to discuss anything related to payment, account, licensing, partnerships, or
+                      have pre-sales questions, you&#39;re at the right place.
+                    </Typography>
+                  </div>
+                  <form className='flex flex-col items-start gap-6'>
+                    <div className='flex gap-5 is-full'>
+                      <CustomTextField fullWidth label='Full name' id='name-input' />
+                      <CustomTextField fullWidth label='Email address' id='email-input' type='email' />
+                    </div>
+                    <CustomTextField fullWidth multiline rows={7} label='Message' id='message-input' />
+                    <Button variant='contained'>Send Inquiry</Button>
+                  </form>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ContactUs

src/views/front-pages/landing-page/CustomerReviews.tsx

@@ -0,0 +1,245 @@
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Chip from '@mui/material/Chip'
+import Rating from '@mui/material/Rating'
+import Divider from '@mui/material/Divider'
+
+// Third-party Imports
+import { useKeenSlider } from 'keen-slider/react'
+import classnames from 'classnames'
+
+// Component Imports
+import CustomIconButton from '@core/components/mui/IconButton'
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styled Component Imports
+import AppKeenSlider from '@/libs/styles/AppKeenSlider'
+
+// SVG Imports
+import HubSpot from '@assets/svg/front-pages/landing-page/HubSpot'
+import Pinterest from '@assets/svg/front-pages/landing-page/Pinterest'
+import Dribbble from '@assets/svg/front-pages/landing-page/Dribbble'
+import Airbnb from '@assets/svg/front-pages/landing-page/Airbnb'
+import Coinbase from '@assets/svg/front-pages/landing-page/Coinbase'
+import Netflix from '@assets/svg/front-pages/landing-page/Netflix'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+import styles from './styles.module.css'
+
+// Data
+const data = [
+  {
+    desc: "I've never used a theme as versatile and flexible as Vuexy. It's my go to for building dashboard sites on almost any project.",
+    svg: <Pinterest color='#ee7676' />,
+    rating: 5,
+    name: 'Eugenia Moore',
+    position: 'Founder of Pinterest',
+    avatarSrc: '/images/avatars/1.png'
+  },
+  {
+    desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
+    svg: <Netflix color='#d34c4d' />,
+    rating: 5,
+    name: 'Tommy haffman',
+    position: 'Founder of Netflix',
+    avatarSrc: '/images/avatars/2.png'
+  },
+  {
+    desc: "This template is superior in so many ways. The code, the design, the regular updates, the support.. It's the whole package. Excellent Work.",
+    svg: <Airbnb color='#FF5A60' />,
+    rating: 4,
+    name: 'Eugenia Moore',
+    position: 'CTO of Airbnb',
+    avatarSrc: '/images/avatars/3.png'
+  },
+  {
+    desc: "All the requirements for developers have been taken into consideration, so I'm able to build any interface I want.",
+    svg: <Coinbase color='#0199ff' />,
+    rating: 5,
+    name: 'Sara Smith',
+    position: 'Founder of Coinbase',
+    avatarSrc: '/images/avatars/4.png'
+  },
+  {
+    desc: "I've never used a theme as versatile and flexible as Vuexy. It's my go to for building dashboard sites on almost any project.",
+    svg: <Dribbble color='#ea4c89' />,
+    rating: 5,
+    name: 'Tommy haffman',
+    position: 'Founder of Dribble',
+    avatarSrc: '/images/avatars/5.png'
+  },
+  {
+    desc: "I've never used a theme as versatile and flexible as Vuexy. It's my go to for building dashboard sites on almost any project.",
+    svg: <Pinterest color='#ee7676' />,
+    rating: 5,
+    name: 'Eugenia Moore',
+    position: 'Founder of Pinterest',
+    avatarSrc: '/images/avatars/6.png'
+  },
+  {
+    desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
+    svg: <HubSpot color='#FF5C35' />,
+    rating: 5,
+    name: 'Tommy haffman',
+    position: 'Founder of HubSpot',
+    avatarSrc: '/images/avatars/7.png'
+  },
+  {
+    desc: "This template is superior in so many ways. The code, the design, the regular updates, the support.. It's the whole package. Excellent Work.",
+    svg: <Airbnb color='#FF5A60' />,
+    rating: 4,
+    name: 'Eugenia Moore',
+    position: 'CTO of Airbnb',
+    avatarSrc: '/images/avatars/8.png'
+  },
+  {
+    desc: "All the requirements for developers have been taken into consideration, so I'm able to build any interface I want.",
+    svg: <Coinbase color='#0199ff' />,
+    rating: 5,
+    name: 'Sara Smith',
+    position: 'Founder of Coinbase',
+    avatarSrc: '/images/avatars/9.png'
+  },
+  {
+    desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
+    svg: <Dribbble color='#ea4c89' />,
+    rating: 5,
+    name: 'Tommy haffman',
+    position: 'Founder of Dribbble',
+    avatarSrc: '/images/avatars/10.png'
+  }
+]
+
+const CustomerReviews = () => {
+  // Hooks
+  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
+    {
+      loop: true,
+      slides: {
+        perView: 3,
+        origin: 'auto'
+      },
+      breakpoints: {
+        '(max-width: 1200px)': {
+          slides: {
+            perView: 2,
+            spacing: 10,
+            origin: 'auto'
+          }
+        },
+        '(max-width: 900px)': {
+          slides: {
+            perView: 2,
+            spacing: 10
+          }
+        },
+        '(max-width: 600px)': {
+          slides: {
+            perView: 1,
+            spacing: 10,
+            origin: 'center'
+          }
+        }
+      }
+    },
+    [
+      slider => {
+        let timeout: ReturnType<typeof setTimeout>
+        const mouseOver = false
+
+        function clearNextTimeout() {
+          clearTimeout(timeout)
+        }
+
+        function nextTimeout() {
+          clearTimeout(timeout)
+          if (mouseOver) return
+          timeout = setTimeout(() => {
+            slider.next()
+          }, 2000)
+        }
+
+        slider.on('created', nextTimeout)
+        slider.on('dragStarted', clearNextTimeout)
+        slider.on('animationEnded', nextTimeout)
+        slider.on('updated', nextTimeout)
+      }
+    ]
+  )
+
+  return (
+    <section className={classnames('flex flex-col gap-8 plb-[100px] bg-backgroundDefault', styles.sectionStartRadius)}>
+      <div
+        className={classnames('flex max-md:flex-col max-sm:flex-wrap is-full gap-6', frontCommonStyles.layoutSpacing)}
+      >
+        <div className='flex flex-col gap-1 bs-full justify-center items-center lg:items-start is-full md:is-[30%] mlb-auto sm:pbs-2'>
+          <Chip label='Real Customers Reviews' variant='tonal' color='primary' size='small' className='mbe-3' />
+          <div className='flex flex-col gap-y-1 flex-wrap max-lg:text-center '>
+            <Typography color='text.primary' variant='h4'>
+              <span className='relative z-[1] font-extrabold'>
+                What people say
+                <img
+                  src='/images/front-pages/landing-page/bg-shape.png'
+                  alt='bg-shape'
+                  className='absolute block-end-0 z-[1] bs-[40%] is-[132%] inline-start-[-8%] block-start-[17px]'
+                />
+              </span>
+            </Typography>
+            <Typography>See what our customers have to say about their experience.</Typography>
+          </div>
+          <div className='flex gap-x-4 mbs-11'>
+            <CustomIconButton color='primary' variant='tonal' onClick={() => instanceRef.current?.prev()}>
+              <i className='tabler-chevron-left' />
+            </CustomIconButton>
+            <CustomIconButton color='primary' variant='tonal' onClick={() => instanceRef.current?.next()}>
+              <i className='tabler-chevron-right' />
+            </CustomIconButton>
+          </div>
+        </div>
+        <div className='is-full md:is-[70%]'>
+          <AppKeenSlider>
+            <div ref={sliderRef} className='keen-slider mbe-6'>
+              {data.map((item, index) => (
+                <div key={index} className='keen-slider__slide flex p-4 sm:p-3'>
+                  <Card elevation={8} className='flex items-start'>
+                    <CardContent className='p-8 items-center mlb-auto'>
+                      <div className='flex flex-col gap-4 items-start'>
+                        {item.svg}
+                        <Typography>{item.desc}</Typography>
+                        <Rating value={item.rating} readOnly />
+                        <div className='flex items-center gap-x-3'>
+                          <CustomAvatar size={32} src={item.avatarSrc} alt={item.name} />
+                          <div className='flex flex-col items-start'>
+                            <Typography color='text.primary' className='font-medium'>
+                              {item.name}
+                            </Typography>
+                            <Typography variant='body2' color='text.disabled'>
+                              {item.position}
+                            </Typography>
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              ))}
+            </div>
+          </AppKeenSlider>
+        </div>
+      </div>
+      <Divider />
+      <div className='flex flex-wrap items-center justify-center gap-x-16 gap-y-6 mli-3'>
+        <Airbnb color='var(--mui-palette-text-secondary)' />
+        <Netflix color='var(--mui-palette-text-secondary)' />
+        <Dribbble color='var(--mui-palette-text-secondary)' />
+        <Coinbase color='var(--mui-palette-text-secondary)' />
+        <Pinterest color='var(--mui-palette-text-secondary)' />
+      </div>
+    </section>
+  )
+}
+
+export default CustomerReviews

src/views/front-pages/landing-page/Faqs.tsx

@@ -0,0 +1,142 @@
+// React Imports
+import { useEffect, useRef } from 'react'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import Grid from '@mui/material/Grid2'
+import Chip from '@mui/material/Chip'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Hook Imports
+import { useIntersection } from '@/hooks/useIntersection'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+import styles from './styles.module.css'
+
+type FaqsDataTypes = {
+  id: string
+  question: string
+  active?: boolean
+  answer: string
+}
+
+const FaqsData: FaqsDataTypes[] = [
+  {
+    id: 'panel1',
+    question: 'Do you charge for each upgrade?',
+    answer:
+      'Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.'
+  },
+  {
+    id: 'panel2',
+    question: 'What is regular license?',
+    active: true,
+    answer:
+      'Regular license can be used for end products that do not charge users for access or service(access is free and there will be no monthly subscription fee). Single regular license can be used for single end product and end product can be used by you or your client. If you want to sell end product to multiple clients then you will need to purchase separate license for each client. The same rule applies if you want to use the same end product on multiple domains(unique setup). For more info on regular license you can check official description.'
+  },
+  {
+    id: 'panel3',
+    question: 'What is extended license?',
+    answer:
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis et aliquid quaerat possimus maxime! Mollitia reprehenderit neque repellat deleniti delectus architecto dolorum maxime, blanditiis earum ea, incidunt quam possimus cumque.'
+  },
+  {
+    id: 'panel4',
+    question: 'Which license is applicable for SASS application?',
+    answer:
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis et aliquid quaerat possimus maxime! Mollitia reprehenderit neque repellat deleniti delectus architecto dolorum maxime, blanditiis earum ea, incidunt quam possimus cumque.'
+  }
+]
+
+const Faqs = () => {
+  // Refs
+  const skipIntersection = useRef(true)
+  const ref = useRef<null | HTMLDivElement>(null)
+
+  // Hooks
+  const { updateIntersections } = useIntersection()
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (skipIntersection.current) {
+          skipIntersection.current = false
+
+          return
+        }
+
+        updateIntersections({ [entry.target.id]: entry.isIntersecting })
+      },
+      { threshold: 0.35 }
+    )
+
+    ref.current && observer.observe(ref.current)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <section id='faq' ref={ref} className={classnames('plb-[100px] bg-backgroundDefault', styles.sectionStartRadius)}>
+      <div className={classnames('flex flex-col gap-16', frontCommonStyles.layoutSpacing)}>
+        <div className='flex flex-col gap-y-4 items-center justify-center'>
+          <Chip size='small' variant='tonal' color='primary' label='FAQ' />
+          <div className='flex flex-col items-center gap-y-1 justify-center flex-wrap'>
+            <div className='flex items-center gap-x-2'>
+              <Typography color='text.primary' variant='h4'>
+                Frequently asked
+                <span className='relative z-[1] font-extrabold'>
+                  <img
+                    src='/images/front-pages/landing-page/bg-shape.png'
+                    alt='bg-shape'
+                    className='absolute block-end-0 z-[1] bs-[40%] is-[132%] -inline-start-[8%] block-start-[17px]'
+                  />{' '}
+                  questions
+                </span>
+              </Typography>
+            </div>
+            <Typography className='text-center'>
+              Browse through these FAQs to find answers to commonly asked questions.
+            </Typography>
+          </div>
+        </div>
+        <div>
+          <Grid container spacing={6}>
+            <Grid size={{ xs: 12, lg: 5 }} className='text-center'>
+              <img
+                src='/images/front-pages/landing-page/boy-sitting-with-laptop.png'
+                alt='boy with laptop'
+                className='is-[80%] max-is-[320px]'
+              />
+            </Grid>
+            <Grid size={{ xs: 12, lg: 7 }}>
+              <div>
+                {FaqsData.map((data, index) => {
+                  return (
+                    <Accordion key={index} defaultExpanded={data.active}>
+                      <AccordionSummary
+                        aria-controls={data.id + '-content'}
+                        id={data.id + '-header'}
+                        className='font-medium'
+                        color='text.primary'
+                      >
+                        {data.question}
+                      </AccordionSummary>
+                      <AccordionDetails className='text-textSecondary'>{data.answer}</AccordionDetails>
+                    </Accordion>
+                  )
+                })}
+              </div>
+            </Grid>
+          </Grid>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Faqs

src/views/front-pages/landing-page/GetStarted.tsx

@@ -0,0 +1,66 @@
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Type Imports
+import type { SystemMode } from '@core/types'
+
+// Hooks Imports
+import { useImageVariant } from '@core/hooks/useImageVariant'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+const GetStarted = ({ mode }: { mode: SystemMode }) => {
+  // Vars
+  const getStartedImageLight = '/images/front-pages/landing-page/get-started-bg-light.png'
+  const getStartedImageDark = '/images/front-pages/landing-page/get-started-bg-dark.png'
+
+  // Hooks
+  const getStartedImage = useImageVariant(mode, getStartedImageLight, getStartedImageDark)
+
+  return (
+    <section className='relative'>
+      <img
+        src={getStartedImage}
+        alt='background-image'
+        className='absolute is-full flex -z-1 pointer-events-none bs-full block-end-0'
+      />
+      <div
+        className={classnames(
+          'flex items-center flex-wrap justify-center lg:justify-between gap-y-4 gap-x-28',
+          frontCommonStyles.layoutSpacing
+        )}
+      >
+        <div className='flex flex-col items-center lg:items-start gap-y-8 pbs-9 lg:plb-9 z-[1]'>
+          <div className='flex flex-col gap-1 max-lg:items-center'>
+            <Typography variant='h3' color='primary.main' className='font-bold text-[2.125rem] max-sm:text-center'>
+              Ready to Get Started?
+            </Typography>
+            <Typography variant='h5' color='text.secondary' className='max-sm:text-center'>
+              Start your project with a 14-day free trial
+            </Typography>
+          </div>
+          <Button component={Link} href='/front-pages/payment' variant='contained'>
+            Get Started
+          </Button>
+        </div>
+        <div className='flex pbs-4 lg:pbs-[60px] md:pie-4 z-[1]'>
+          <img
+            src='/images/front-pages/landing-page/crm-dashboard.png'
+            alt='dashboard-image'
+            className='max-is-[600px] is-full rounded-bs'
+          />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default GetStarted

src/views/front-pages/landing-page/HeroSection.tsx

@@ -0,0 +1,119 @@
+// React Imports
+import { useState, useEffect } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import { useColorScheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import type { Theme } from '@mui/material/styles'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Type Imports
+import type { SystemMode } from '@core/types'
+
+// Hook Imports
+import { useImageVariant } from '@core/hooks/useImageVariant'
+
+// Styles Imports
+import styles from './styles.module.css'
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+const HeroSection = ({ mode }: { mode: SystemMode }) => {
+  // States
+  const [transform, setTransform] = useState('')
+
+  // Vars
+  const dashboardImageLight = '/images/front-pages/landing-page/hero-dashboard-light.png'
+  const dashboardImageDark = '/images/front-pages/landing-page/hero-dashboard-dark.png'
+  const elementsImageLight = '/images/front-pages/landing-page/hero-elements-light.png'
+  const elementsImageDark = '/images/front-pages/landing-page/hero-elements-dark.png'
+  const heroSectionBgLight = '/images/front-pages/landing-page/hero-bg-light.png'
+  const heroSectionBgDark = '/images/front-pages/landing-page/hero-bg-dark.png'
+
+  // Hooks
+  const { mode: muiMode } = useColorScheme()
+  const dashboardImage = useImageVariant(mode, dashboardImageLight, dashboardImageDark)
+  const elementsImage = useImageVariant(mode, elementsImageLight, elementsImageDark)
+  const heroSectionBg = useImageVariant(mode, heroSectionBgLight, heroSectionBgDark)
+
+  const _mode = (muiMode === 'system' ? mode : muiMode) || mode
+  const isAboveLgScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up('lg'))
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const handleMouseMove = (event: MouseEvent) => {
+        const rotateX = (window.innerHeight - 2 * event.clientY) / 100
+        const rotateY = (window.innerWidth - 2 * event.clientX) / 100
+
+        setTransform(
+          `perspective(1200px) rotateX(${rotateX < -40 ? -20 : rotateX}deg) rotateY(${rotateY}deg) scale3d(1,1,1)`
+        )
+      }
+
+      window.addEventListener('mousemove', handleMouseMove)
+
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove)
+      }
+    }
+  }, [])
+
+  return (
+    <section id='home' className='overflow-hidden pbs-[75px] -mbs-[75px] relative'>
+      <img
+        src={heroSectionBg}
+        alt='hero-bg'
+        className={classnames('bs-[95%] sm:bs-[85%] md:bs-[80%]', styles.heroSectionBg, {
+          [styles.bgLight]: _mode === 'light',
+          [styles.bgDark]: _mode === 'dark'
+        })}
+      />
+      <div className={classnames('pbs-[88px] overflow-hidden', frontCommonStyles.layoutSpacing)}>
+        <div className='md:max-is-[550px] mbs-0 mbe-7 mli-auto text-center relative'>
+          <Typography
+            className={classnames('font-extrabold sm:text-[42px] text-3xl mbe-4 leading-[48px]', styles.heroText)}
+          >
+            All in one sass application for your business
+          </Typography>
+          <Typography className='font-medium' color='text.primary'>
+            No coding required to make customizations. The live customizer has everything your marketing need.
+          </Typography>
+          <div className='flex mbs-6 items-baseline justify-center relative'>
+            <div className='flex gap-2 absolute inline-start-[0%] block-start-[41%] max-md:hidden'>
+              <Typography className='font-medium'>Join community</Typography>
+              <img src='/images/front-pages/landing-page/join-community-arrow.png' alt='arrow' height='48' width='60' />
+            </div>
+            <Button
+              component={Link}
+              size='large'
+              href='/front-pages/landing-page#pricing-plans'
+              variant='contained'
+              color='primary'
+            >
+              Get Early Access
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div
+        className={classnames('relative text-center', frontCommonStyles.layoutSpacing)}
+        style={{ transform: isAboveLgScreen ? transform : 'none' }}
+      >
+        <Link href='/' target='_blank' className='block relative'>
+          <img src={dashboardImage} alt='dashboard-image' className={classnames('mli-auto', styles.heroSecDashboard)} />
+          <div className={classnames('absolute', styles.heroSectionElements)}>
+            <img src={elementsImage} alt='dashboard-elements' />
+          </div>
+        </Link>
+      </div>
+    </section>
+  )
+}
+
+export default HeroSection

src/views/front-pages/landing-page/OurTeam.tsx

@@ -0,0 +1,137 @@
+// React Imports
+import { useEffect, useRef } from 'react'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid2'
+import Chip from '@mui/material/Chip'
+import { styled } from '@mui/material/styles'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Type Imports
+import type { ThemeColor } from '@core/types'
+
+// Hook Imports
+import { useIntersection } from '@/hooks/useIntersection'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+import styles from './styles.module.css'
+
+// Data
+const team = [
+  {
+    name: 'Sophie Gilbert',
+    position: 'Project Manager',
+    image: '/images/front-pages/landing-page/sophie.png',
+    color: 'var(--mui-palette-primary-mainOpacity)'
+  },
+  {
+    name: 'Paul Miles',
+    position: 'UI Designer',
+    image: '/images/front-pages/landing-page/paul.png',
+    color: 'var(--mui-palette-info-mainOpacity)'
+  },
+  {
+    name: 'Nannie Ford',
+    position: 'Development Lead',
+    image: '/images/front-pages/landing-page/nannie.png',
+    color: 'var(--mui-palette-error-mainOpacity)'
+  },
+  {
+    name: 'Chris Watkins',
+    position: 'Marketing Manager',
+    image: '/images/front-pages/landing-page/chris.png',
+    color: 'var(--mui-palette-success-mainOpacity)'
+  }
+]
+
+const Card = styled('div')`
+  border-color: ${(props: { color: ThemeColor }) => props.color};
+  border-start-start-radius: 90px;
+  border-start-end-radius: 20px;
+  border-end-start-radius: 6px;
+  border-end-end-radius: 6px;
+`
+
+const OurTeam = () => {
+  // Refs
+  const skipIntersection = useRef(true)
+  const ref = useRef<null | HTMLDivElement>(null)
+
+  // Hooks
+  const { updateIntersections } = useIntersection()
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (skipIntersection.current) {
+          skipIntersection.current = false
+
+          return
+        }
+
+        updateIntersections({ [entry.target.id]: entry.isIntersecting })
+      },
+      { threshold: 0.35 }
+    )
+
+    ref.current && observer.observe(ref.current)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <section id='team' className='plb-[100px] bg-backgroundPaper' ref={ref}>
+      <div className={frontCommonStyles.layoutSpacing}>
+        <div className='flex flex-col gap-y-4 items-center justify-center'>
+          <Chip size='small' variant='tonal' color='primary' label='Our Great Team' />
+          <div className='flex flex-col items-center gap-y-1 justify-center flex-wrap'>
+            <div className='flex items-center gap-x-2'>
+              <Typography color='text.primary' variant='h4'>
+                <span className='relative z-[1] font-extrabold'>
+                  Supported
+                  <img
+                    src='/images/front-pages/landing-page/bg-shape.png'
+                    alt='bg-shape'
+                    className='absolute block-end-0 z-[1] bs-[40%] is-[132%] -inline-start-[19%] block-start-[17px]'
+                  />
+                </span>{' '}
+                by Real People
+              </Typography>
+            </div>
+            <Typography className='text-center'>Who is behind these great-looking interfaces?</Typography>
+          </div>
+        </div>
+        <Grid container rowSpacing={16} columnSpacing={6} className='pbs-[100px]'>
+          {team.map((member, index) => (
+            <Grid size={{ xs: 12, md: 6, lg: 3 }} key={index}>
+              <Card className='border overflow-visible' color={member.color as ThemeColor}>
+                <div className='flex flex-col items-center justify-center p-0'>
+                  <div
+                    className={classnames(
+                      'flex justify-center is-full mli-auto text-center bs-[189px] relative overflow-visible',
+                      styles.teamCard
+                    )}
+                    style={{ backgroundColor: member.color }}
+                  >
+                    <img src={member.image} alt={member.name} className='bs-[240px] absolute block-start-[-50px]' />
+                  </div>
+                  <div className='flex flex-col gap-3 p-5 is-full'>
+                    <div className='text-center'>
+                      <Typography variant='h5'>{member.name}</Typography>
+                      <Typography color='text.disabled'>{member.position}</Typography>
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </div>
+    </section>
+  )
+}
+
+export default OurTeam

src/views/front-pages/landing-page/Pricing.tsx

@@ -0,0 +1,180 @@
+// React Imports
+import { useState } from 'react'
+import type { ChangeEvent } from 'react'
+
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid2'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Switch from '@mui/material/Switch'
+import Chip from '@mui/material/Chip'
+import Button from '@mui/material/Button'
+import InputLabel from '@mui/material/InputLabel'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Components Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+import styles from './styles.module.css'
+
+const pricingPlans = [
+  {
+    title: 'Basic',
+    img: '/images/front-pages/landing-page/pricing-basic.png',
+    monthlyPay: 19,
+    annualPay: 14,
+    perYearPay: 168,
+    features: ['Timeline', 'Basic search', 'Live chat widget', 'Email marketing', 'Custom Forms', 'Traffic analytics'],
+    current: false
+  },
+  {
+    title: 'Team',
+    img: '/images/front-pages/landing-page/pricing-team.png',
+    monthlyPay: 29,
+    annualPay: 22,
+    perYearPay: 264,
+    features: [
+      'Everything in basic',
+      'Timeline with database',
+      'Advanced search',
+      'Marketing automation',
+      'Advanced chatbot',
+      'Campaign management'
+    ],
+    current: true
+  },
+  {
+    title: 'Enterprise',
+    img: '/images/front-pages/landing-page/pricing-enterprise.png',
+    monthlyPay: 49,
+    annualPay: 37,
+    perYearPay: 444,
+    features: [
+      'Campaign management',
+      'Timeline with database',
+      'Fuzzy search',
+      'A/B testing sanbox',
+      'Custom permissions',
+      'Social media automation'
+    ],
+    current: false
+  }
+]
+
+const PricingPlan = () => {
+  // States
+  const [pricingPlan, setPricingPlan] = useState<'monthly' | 'annually'>('annually')
+
+  const handleChange = (e: ChangeEvent<{ checked: boolean }>) => {
+    if (e.target.checked) {
+      setPricingPlan('annually')
+    } else {
+      setPricingPlan('monthly')
+    }
+  }
+
+  return (
+    <section
+      id='pricing-plans'
+      className={classnames(
+        'flex flex-col gap-8 lg:gap-12 plb-[100px] bg-backgroundDefault rounded-[60px]',
+        styles.sectionStartRadius
+      )}
+    >
+      <div className={classnames('is-full', frontCommonStyles.layoutSpacing)}>
+        <div className='flex flex-col gap-y-4 items-center justify-center'>
+          <Chip size='small' variant='tonal' color='primary' label='Pricing Plans' />
+          <div className='flex flex-col items-center gap-y-1 justify-center flex-wrap'>
+            <div className='flex items-center gap-x-2'>
+              <Typography color='text.primary' variant='h4' className='text-center'>
+                <span className='relative z-[1] font-extrabold'>
+                  Tailored pricing plans
+                  <img
+                    src='/images/front-pages/landing-page/bg-shape.png'
+                    alt='bg-shape'
+                    className='absolute block-end-0 z-[1] bs-[40%] is-[125%] sm:is-[132%] -inline-start-[10%] sm:inline-start-[-19%] block-start-[17px]'
+                  />
+                </span>{' '}
+                designed for you
+              </Typography>
+            </div>
+            <Typography className='text-center'>
+              All plans include 40+ advanced tools and features to boost your product.
+              <br />
+              Choose the best plan to fit your needs.
+            </Typography>
+          </div>
+        </div>
+        <div className='flex justify-center items-center max-sm:mlb-3 mbe-6'>
+          <InputLabel htmlFor='pricing-switch' className='cursor-pointer'>
+            Pay Monthly
+          </InputLabel>
+          <Switch id='pricing-switch' onChange={handleChange} checked={pricingPlan === 'annually'} />
+          <InputLabel htmlFor='pricing-switch' className='cursor-pointer'>
+            Pay Annually
+          </InputLabel>
+          <div className='flex gap-x-1 items-start max-sm:hidden mis-2 mbe-5'>
+            <img src='/images/front-pages/landing-page/pricing-arrow.png' width='50' />
+            <Typography className='font-medium'>Save 25%</Typography>
+          </div>
+        </div>
+        <Grid container spacing={6}>
+          {pricingPlans.map((plan, index) => (
+            <Grid key={index} size={{ xs: 12, lg: 4 }}>
+              <Card className={`${plan.current && 'border-2 border-[var(--mui-palette-primary-main)] shadow-xl'}`}>
+                <CardContent className='flex flex-col gap-8 p-8'>
+                  <div className='is-full flex flex-col items-center gap-3'>
+                    <img src={plan.img} alt={plan.img} height='88' width='86' className='text-center' />
+                  </div>
+                  <div className='flex flex-col items-center gap-y-[2px] relative'>
+                    <Typography className='text-center' variant='h4'>
+                      {plan.title}
+                    </Typography>
+                    <div className='flex items-baseline gap-x-1'>
+                      <Typography variant='h2' color='primary.main' className='font-extrabold'>
+                        ${pricingPlan === 'monthly' ? plan.monthlyPay : plan.annualPay}
+                      </Typography>
+                      <Typography color='text.disabled' className='font-medium'>
+                        /mo
+                      </Typography>
+                    </div>
+                    {pricingPlan === 'annually' && (
+                      <Typography color='text.disabled' className='absolute block-start-[100%]'>
+                        ${plan.perYearPay} / year
+                      </Typography>
+                    )}
+                  </div>
+                  <div>
+                    <div className='flex flex-col gap-3 mbs-3'>
+                      {plan.features.map((feature, index) => (
+                        <div key={index} className='flex items-center gap-[12px]'>
+                          <CustomAvatar color='primary' skin={plan.current ? 'filled' : 'light'} size={20}>
+                            <i className='tabler-check text-sm' />
+                          </CustomAvatar>
+                          <Typography variant='h6'>{feature}</Typography>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <Button component={Link} href='/front-pages/payment' variant={plan.current ? 'contained' : 'tonal'}>
+                    Get Started
+                  </Button>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </div>
+    </section>
+  )
+}
+
+export default PricingPlan

src/views/front-pages/landing-page/ProductStat.tsx

@@ -0,0 +1,87 @@
+// React Imports
+import type { ReactNode } from 'react'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid2'
+
+// SVG Imports
+import Check from '@assets/svg/front-pages/landing-page/Check'
+import User from '@assets/svg/front-pages/landing-page/User'
+import LaptopCharging from '@assets/svg/front-pages/landing-page/LaptopCharging'
+import Diamond from '@assets/svg/front-pages/landing-page/Diamond'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+// Type
+type StatData = {
+  title: string
+  value: string
+  svg: ReactNode
+  color: string
+  isHover: boolean
+}
+
+// Data
+const statData: StatData[] = [
+  {
+    title: 'Support Tickets Resolved',
+    value: '7.1k+',
+    svg: <LaptopCharging color='var(--mui-palette-primary-main)' />,
+    color: 'var(--mui-palette-primary-darkerOpacity)',
+    isHover: false
+  },
+  {
+    title: 'Join creatives community',
+    value: '50k+',
+    svg: <User color='var(--mui-palette-success-main)' />,
+    color: 'var(--mui-palette-success-darkerOpacity)',
+    isHover: false
+  },
+  {
+    title: 'Highly Rated Products',
+    value: '4.8/5',
+    svg: <Diamond color='var(--mui-palette-info-main)' />,
+    color: 'var(--mui-palette-info-darkerOpacity)',
+    isHover: false
+  },
+  {
+    title: 'Money Back Guarantee',
+    value: '100%',
+    svg: <Check color='var(--mui-palette-warning-main)' />,
+    color: 'var(--mui-palette-warning-darkerOpacity)',
+    isHover: false
+  }
+]
+
+const ProductStat = () => {
+  return (
+    <section className='plb-[84px] bg-backgroundPaper'>
+      <div className={frontCommonStyles.layoutSpacing}>
+        <Grid container spacing={6}>
+          {statData.map((stat, index) => (
+            <Grid key={index} size={{ xs: 12, sm: 6, md: 3 }}>
+              <div
+                className='flex flex-col items-center justify-center gap-y-4 border p-6 rounded'
+                style={{
+                  borderColor: stat.color
+                }}
+              >
+                {stat.svg}
+                <div className='text-center'>
+                  <Typography variant='h3' className='font-medium'>
+                    {stat.value}
+                  </Typography>
+                  <Typography className='font-medium'>{stat.title}</Typography>
+                </div>
+              </div>
+            </Grid>
+          ))}
+        </Grid>
+      </div>
+    </section>
+  )
+}
+
+export default ProductStat

src/views/front-pages/landing-page/UsefulFeature.tsx

@@ -0,0 +1,130 @@
+// React Imports
+import { useEffect, useRef } from 'react'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid2'
+import Chip from '@mui/material/Chip'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Hook Imports
+import { useIntersection } from '@/hooks/useIntersection'
+
+// SVG Imports
+import Paper from '@assets/svg/front-pages/landing-page/Paper'
+import Check from '@assets/svg/front-pages/landing-page/Check'
+import User from '@assets/svg/front-pages/landing-page/User'
+import LaptopCharging from '@assets/svg/front-pages/landing-page/LaptopCharging'
+import Rocket from '@assets/svg/front-pages/landing-page/Rocket'
+import Document from '@assets/svg/front-pages/landing-page/Document'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+// Data
+const feature = [
+  {
+    icon: <LaptopCharging color='var(--mui-palette-primary-main)' />,
+    title: 'Quality Code',
+    description: 'Code structure that all developers will easily understand and fall in love with.'
+  },
+  {
+    icon: <Rocket color='var(--mui-palette-primary-main)' />,
+    title: 'Continuous Updates',
+    description: 'Free updates for the next 12 months, including new demos and features.'
+  },
+  {
+    icon: <Paper color='var(--mui-palette-primary-main)' />,
+    title: 'Stater-Kit',
+    description: 'Start your project quickly without having to remove unnecessary features.'
+  },
+  {
+    icon: <Check color='var(--mui-palette-primary-main)' />,
+    title: 'API Ready',
+    description: 'Just change the endpoint and see your own data loaded within seconds.'
+  },
+  {
+    icon: <User color='var(--mui-palette-primary-main)' />,
+    title: 'Excellent Support',
+    description: 'An easy-to-follow doc with lots of references and code examples.'
+  },
+  {
+    icon: <Document color='var(--mui-palette-primary-main)' />,
+    title: 'Well Documented',
+    description: 'An easy-to-follow doc with lots of references and code examples.'
+  }
+]
+
+const UsefulFeature = () => {
+  // Refs
+  const skipIntersection = useRef(true)
+  const ref = useRef<null | HTMLDivElement>(null)
+
+  // Hooks
+  const { updateIntersections } = useIntersection()
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (skipIntersection.current) {
+          skipIntersection.current = false
+
+          return
+        }
+
+        updateIntersections({ [entry.target.id]: entry.isIntersecting })
+      },
+      { threshold: 0.35 }
+    )
+
+    ref.current && observer.observe(ref.current)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <section id='features' ref={ref} className='bg-backgroundPaper'>
+      <div className={classnames('flex flex-col gap-12 pbs-12 pbe-[100px]', frontCommonStyles.layoutSpacing)}>
+        <div className='flex flex-col gap-y-4 items-center justify-center'>
+          <Chip size='small' variant='tonal' color='primary' label='Useful Feature' />
+          <div className='flex flex-col items-center gap-y-1 justify-center flex-wrap'>
+            <div className='flex items-center gap-x-2'>
+              <Typography color='text.primary' variant='h4' className='text-center'>
+                <span className='relative z-[1] font-extrabold'>
+                  Everything you need
+                  <img
+                    src='/images/front-pages/landing-page/bg-shape.png'
+                    alt='bg-shape'
+                    className='absolute block-end-0 z-[1] bs-[40%] is-[125%] sm:is-[132%] -inline-start-[13%] sm:inline-start-[-19%] block-start-[17px]'
+                  />
+                </span>{' '}
+                to start your next project
+              </Typography>
+            </div>
+            <Typography className='text-center'>
+              Not just a set of tools, the package includes ready-to-deploy conceptual application.
+            </Typography>
+          </div>
+        </div>
+        <div>
+          <Grid container spacing={6}>
+            {feature.map((item, index) => (
+              <Grid size={{ xs: 12, sm: 6, lg: 4 }} key={index}>
+                <div className='flex flex-col gap-2 justify-center items-center'>
+                  {item.icon}
+                  <Typography className='mbs-2' variant='h5'>
+                    {item.title}
+                  </Typography>
+                  <Typography className='max-is-[364px] text-center'>{item.description}</Typography>
+                </div>
+              </Grid>
+            ))}
+          </Grid>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default UsefulFeature

src/views/front-pages/landing-page/index.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+// React Imports
+import { useEffect } from 'react'
+
+// Type Imports
+import type { SystemMode } from '@core/types'
+
+// Component Imports
+import HeroSection from './HeroSection'
+import UsefulFeature from './UsefulFeature'
+import CustomerReviews from './CustomerReviews'
+import OurTeam from './OurTeam'
+import Pricing from './Pricing'
+import ProductStat from './ProductStat'
+import Faqs from './Faqs'
+import GetStarted from './GetStarted'
+import ContactUs from './ContactUs'
+import { useSettings } from '@core/hooks/useSettings'
+
+const LandingPageWrapper = ({ mode }: { mode: SystemMode }) => {
+  // Hooks
+  const { updatePageSettings } = useSettings()
+
+  // For Page specific settings
+  useEffect(() => {
+    return updatePageSettings({
+      skin: 'default'
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <div className='bg-backgroundPaper'>
+      <HeroSection mode={mode} />
+      <UsefulFeature />
+      <CustomerReviews />
+      <OurTeam />
+      <Pricing />
+      <ProductStat />
+      <Faqs />
+      <GetStarted mode={mode} />
+      <ContactUs />
+    </div>
+  )
+}
+
+export default LandingPageWrapper

src/views/front-pages/landing-page/styles.module.css

@@ -0,0 +1,69 @@
+.heroSectionBg {
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: absolute;
+  inline-size: 100%;
+  inset-block-start: -12%;
+  pointer-events: none;
+  z-index: 0;
+  border-end-start-radius: 3.5rem;
+  border-end-end-radius: 3.5rem;
+  &.bgLight {
+    background: linear-gradient(138.18deg, #eae8fd 0%, #fce5e6 94.44%);
+  }
+  &.bgDark {
+    background: var(--mui-palette-background-default);
+  }
+}
+
+.heroSecDashboard {
+  inline-size: 100%;
+}
+
+.heroSectionElements {
+  inset-block-start: 0%;
+  inset-inline-end: 0%;
+  img {
+    inline-size: 100%;
+  }
+}
+
+.heroText {
+  background: linear-gradient(135deg, #28c76f 0%, #5a4aff 47.92%, #ff3739 100%) repeat;
+  background-size: 200% 200%;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0);
+  animation: shine 2s ease-in-out infinite alternate;
+}
+
+@keyframes shine {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.teamCard {
+  border-start-start-radius: 90px;
+  border-start-end-radius: 20px;
+}
+
+.contactRadius {
+  border-start-start-radius: 3.75rem;
+  border-start-end-radius: var(--mui-shape-borderRadius);
+  border-end-end-radius: var(--mui-shape-borderRadius);
+  border-end-start-radius: var(--mui-shape-borderRadius);
+}
+
+.sectionStartRadius {
+  border-start-start-radius: 3.75rem;
+  border-start-end-radius: 3.75rem;
+}

src/views/front-pages/pricing/Faqs.tsx

@@ -0,0 +1,76 @@
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import AccordionDetails from '@mui/material/AccordionDetails'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+// Types
+type faqsDataTypes = {
+  id: string
+  question: string
+  answer: string
+  defaultExpanded?: boolean
+}
+
+// Data
+const faqsData: faqsDataTypes[] = [
+  {
+    id: 'panel1',
+    question: 'What counts towards the 100 responses limit?',
+    answer:
+      'We count all responses submitted through all your forms in a month. If you already received 100 responses this month, you won’t be able to receive any more of them until next month when the counter resets.'
+  },
+  {
+    id: 'panel2',
+    question: 'How do you process payments?',
+    answer:
+      'We accept Visa®, MasterCard®, American Express®, and PayPal®. So you can be confident that your credit card information will be kept safe and secure.',
+    defaultExpanded: true
+  },
+  {
+    id: 'panel3',
+    question: 'What payment methods do you accept?',
+    answer: '2Checkout accepts all types of credit and debit cards.'
+  },
+  {
+    id: 'panel4',
+    question: 'Do you have a money-back guarantee?',
+    answer: 'Yes. You may request a refund within 30 days of your purchase without any additional explanations.'
+  },
+  {
+    id: 'panel5',
+    question: 'I have more questions. Where can I get help?',
+    answer: 'Please contact us if you have any other questions or concerns. We’re here to help!'
+  }
+]
+
+const Faqs = () => {
+  return (
+    <section className={classnames('md:plb-[100px] plb-[50px]', frontCommonStyles.layoutSpacing)}>
+      <div className='flex flex-col text-center gap-2 mbe-6'>
+        <Typography variant='h4'>FAQ&apos;s</Typography>
+        <Typography>Let us help answer the most common questions.</Typography>
+      </div>
+      <div>
+        {faqsData.map((data, index) => {
+          return (
+            <Accordion key={index} defaultExpanded={data.defaultExpanded}>
+              <AccordionSummary aria-controls={data.id + '-content'} id={data.id + '-header'} className='font-medium'>
+                {data.question}
+              </AccordionSummary>
+              <AccordionDetails className='text-textSecondary'>{data.answer}</AccordionDetails>
+            </Accordion>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+export default Faqs

src/views/front-pages/pricing/FreeTrial.tsx

@@ -0,0 +1,44 @@
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Grid from '@mui/material/Grid2'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+const FreeTrial = () => {
+  return (
+    <section className='bg-[var(--mui-palette-primary-lightOpacity)]'>
+      <div className={classnames('flex justify-between flex-wrap md:relative', frontCommonStyles.layoutSpacing)}>
+        <Grid container spacing={2}>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <div className='flex flex-col gap-11 items-center md:items-start justify-center plb-12'>
+              <div className='flex flex-col gap-2 max-md:text-center'>
+                <Typography variant='h4' color='primary.main' className='font-medium'>
+                  Still not convinced? Start with a 14-day FREE trial!
+                </Typography>
+                <Typography>You will get full access to with all the features for 14 days.</Typography>
+              </div>
+              <Button component={Link} href='/front-pages/payment' variant='contained'>
+                Start 14-Days Free Trial
+              </Button>
+            </div>
+          </Grid>
+          <Grid size={{ xs: 12, md: 6 }}>
+            <div className='md:absolute md:inline-end-[90px] xl:inline-end-[2%] flex justify-center block-end-0'>
+              <img src='/images/illustrations/characters/4.png' alt='girl with laptop' className='bs-[270px]' />
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+    </section>
+  )
+}
+
+export default FreeTrial

src/views/front-pages/pricing/Plans.tsx

@@ -0,0 +1,244 @@
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import Chip from '@mui/material/Chip'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Component Imports
+import CustomAvatar from '@core/components/mui/Avatar'
+
+// Styles Imports
+import tableStyles from '@core/styles/table.module.css'
+import styles from './styles.module.css'
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+// Types
+type FeatureType = {
+  feature: string
+  starter: boolean
+  pro: boolean
+  enterprise: boolean
+  addOnAvailable: {
+    starter: boolean
+    pro: boolean
+    enterprise: boolean
+  }
+}
+type PlanType = {
+  variant: 'tonal' | 'contained'
+  label: string
+  plan: 'starter' | 'pro' | 'enterprise'
+}
+
+// Data
+const features: FeatureType[] = [
+  {
+    feature: '14-days free trial',
+    starter: true,
+    pro: true,
+    enterprise: true,
+    addOnAvailable: {
+      starter: false,
+      pro: false,
+      enterprise: false
+    }
+  },
+  {
+    feature: 'No user limit',
+    starter: false,
+    pro: false,
+    enterprise: true,
+    addOnAvailable: {
+      starter: false,
+      pro: false,
+      enterprise: false
+    }
+  },
+  {
+    feature: 'Product Support',
+    starter: false,
+    pro: true,
+    enterprise: true,
+    addOnAvailable: {
+      starter: false,
+      pro: false,
+      enterprise: false
+    }
+  },
+  {
+    feature: 'Email Support',
+    starter: false,
+    pro: false,
+    enterprise: true,
+    addOnAvailable: {
+      starter: false,
+      pro: true,
+      enterprise: false
+    }
+  },
+  {
+    feature: 'Integrations',
+    starter: false,
+    pro: true,
+    enterprise: true,
+    addOnAvailable: {
+      starter: false,
+      pro: false,
+      enterprise: false
+    }
+  },
+  {
+    feature: 'Removal of Front branding',
+    starter: false,
+    pro: false,
+    enterprise: true,
+    addOnAvailable: {
+      starter: false,
+      pro: true,
+      enterprise: false
+    }
+  },
+  {
+    feature: 'Active maintenance & support',
+    starter: false,
+    pro: false,
+    enterprise: true,
+    addOnAvailable: {
+      starter: false,
+      pro: false,
+      enterprise: false
+    }
+  },
+  {
+    feature: 'Data storage for 365 days',
+    starter: false,
+    pro: false,
+    enterprise: true,
+    addOnAvailable: {
+      starter: false,
+      pro: false,
+      enterprise: false
+    }
+  }
+]
+
+const plans: PlanType[] = [
+  { variant: 'tonal', label: 'Choose Plan', plan: 'starter' },
+  { variant: 'contained', label: 'Choose Plan', plan: 'pro' },
+  { variant: 'tonal', label: 'Choose Plan', plan: 'enterprise' }
+]
+
+const Plans = () => {
+  return (
+    <section className='md:plb-[100px] plb-[50px] bg-backgroundPaper'>
+      <div className={frontCommonStyles.layoutSpacing}>
+        <div className='flex flex-col text-center gap-2 mbe-6'>
+          <Typography variant='h3'>Pick a plan that works best for you</Typography>
+          <Typography>Stay cool, we have a 48-hour money back guarantee!</Typography>
+        </div>
+        <div className='overflow-x-auto border-x border-be rounded'>
+          <table className={tableStyles.table}>
+            <thead className={styles.tableHead}>
+              <tr>
+                <th>
+                  <>FEATURES</>
+                  <Typography variant='body2' className='capitalize'>
+                    Native Front Features
+                  </Typography>
+                </th>
+                <th>
+                  <>STARTER</>
+                  <Typography variant='body2' className='capitalize'>
+                    Free
+                  </Typography>
+                </th>
+                <th>
+                  <div className='flex justify-center gap-x-2'>
+                    <>Pro</>
+                    <CustomAvatar size={20} color='primary'>
+                      <i className='tabler-star text-[14px]' />
+                    </CustomAvatar>
+                  </div>
+                  <Typography variant='body2' className='capitalize'>
+                    $7.5/Month
+                  </Typography>
+                </th>
+                <th>
+                  <>ENTERPRISE</>
+                  <Typography variant='body2' className='capitalize'>
+                    $16/Month
+                  </Typography>
+                </th>
+              </tr>
+            </thead>
+            <tbody className={classnames('border-be', styles.tableBody)}>
+              {features.map((feature, index) => (
+                <tr key={index}>
+                  <td>
+                    <Typography color='text.primary'>{feature.feature}</Typography>
+                  </td>
+                  <td className='flex items-center justify-center'>
+                    {feature.starter ? (
+                      <CustomAvatar skin='light' color='primary' size={20}>
+                        <i className='tabler-check text-primary text-[14px]' />
+                      </CustomAvatar>
+                    ) : (
+                      <CustomAvatar skin='light' color='secondary' size={20}>
+                        <i className='tabler-x text-[14px]' />
+                      </CustomAvatar>
+                    )}
+                  </td>
+                  <td>
+                    <div className='flex items-center justify-center'>
+                      {feature.pro ? (
+                        <CustomAvatar skin='light' color='primary' size={20}>
+                          <i className='tabler-check text-primary text-[14px]' />
+                        </CustomAvatar>
+                      ) : feature.addOnAvailable.pro && !feature.pro ? (
+                        <Chip variant='tonal' size='small' color='primary' label='Add-on-Available' />
+                      ) : (
+                        <CustomAvatar skin='light' color='secondary' size={20}>
+                          <i className='tabler-x text-[14px]' />
+                        </CustomAvatar>
+                      )}
+                    </div>
+                  </td>
+                  <td className='flex items-center justify-center'>
+                    {feature.enterprise ? (
+                      <CustomAvatar skin='light' color='primary' size={20}>
+                        <i className='tabler-check text-primary text-[14px]' />
+                      </CustomAvatar>
+                    ) : (
+                      <CustomAvatar skin='light' color='secondary' size={20}>
+                        <i className='tabler-x text-[14px]' />
+                      </CustomAvatar>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+            <tfoot>
+              <tr>
+                <td></td>
+                {plans.map((plan, index) => (
+                  <td key={index} className='text-center plb-[9px]'>
+                    <Button component={Link} href='/front-pages/payment' variant={plan.variant}>
+                      {plan.label}
+                    </Button>
+                  </td>
+                ))}
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Plans

src/views/front-pages/pricing/PricingSection.tsx

@@ -0,0 +1,23 @@
+// Third-party Imports
+import classnames from 'classnames'
+
+// Type Imports
+import type { PricingPlanType } from '@/types/pages/pricingTypes'
+
+// Component Imports
+import Pricing from '@components/pricing'
+
+// Styles Imports
+import frontCommonStyles from '@views/front-pages/styles.module.css'
+
+const PricingSection = ({ data }: { data: PricingPlanType[] }) => {
+  return (
+    <section className='plb-[100px] pbs-[70px] -mbs-[70px]'>
+      <div className={classnames('pbs-[50px] md:pbs-[100px]', frontCommonStyles.layoutSpacing)}>
+        <Pricing data={data} />
+      </div>
+    </section>
+  )
+}
+
+export default PricingSection

src/views/front-pages/pricing/index.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+// React Imports
+import { useEffect } from 'react'
+
+// Component Imports
+import PricingSection from '@views/front-pages/pricing/PricingSection'
+import FreeTrial from './FreeTrial'
+import Plans from './Plans'
+import Faqs from './Faqs'
+import { useSettings } from '@core/hooks/useSettings'
+
+// Type Imports
+import type { PricingPlanType } from '@/types/pages/pricingTypes'
+
+const PricingWrapper = ({ data }: { data: PricingPlanType[] }) => {
+  // Hooks
+  const { updatePageSettings } = useSettings()
+
+  // For Page specific settings
+  useEffect(() => {
+    return updatePageSettings({
+      skin: 'default'
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <>
+      <PricingSection data={data} />
+      <FreeTrial />
+      <Plans />
+      <Faqs />
+    </>
+  )
+}
+
+export default PricingWrapper

src/views/front-pages/pricing/styles.module.css

@@ -0,0 +1,14 @@
+.tableHead {
+  tr th:not(:first-child) {
+    text-align: center;
+  }
+}
+
+.tableBody {
+  tr td:not(:first-child) {
+    text-align: center;
+  }
+  tr:nth-child(even) {
+    background-color: var(--mui-palette-action-hover);
+  }
+}

src/views/front-pages/styles.module.css

@@ -0,0 +1,16 @@
+.layoutSpacing {
+  margin-inline: auto;
+  padding-inline: 1.5rem;
+
+  @media (min-width: 900px) {
+    max-inline-size: 900px;
+  }
+
+  @media (min-width: 1200px) {
+    max-inline-size: 1200px;
+  }
+
+  @media (min-width: 1920px) {
+    max-inline-size: 1440px;
+  }
+}