refactor: update import paths and enhance HomePage structure

- Replaced imports in HomePage component to utilize new preview paths for better organization.
- Updated Features and Pricing components to align with the new structure.
- Wrapped CallToAction component in a div for improved layout consistency.
- Commented out unused HeroHeader in the HeroSection component for clarity.

src/app/[locale]/(marketing)/(home)/page.tsx

@@ -1,16 +1,17 @@
-import CallToAction from '@/components/sections/call-to-action/call-to-action';
-import FAQs from '@/components/sections/faq/faqs';
-import Features7 from '@/components/sections/features/features-7';
-import HeroSection from '@/components/sections/hero/hero-section-4';
-import LogoCloud from '@/components/sections/logo-cloud/logo-cloud';
-import Pricing4 from '@/components/sections/pricing/pricing-4';
-import StatsSection from '@/components/sections/stats/stats';
-import Testimonials from '@/components/sections/testimonials/testimonials';
 import { constructMetadata } from '@/lib/metadata';
 import { getBaseUrlWithLocale } from '@/lib/urls/get-base-url';
 import { Metadata } from 'next';
 import { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
+import CallToAction from '../../preview/call-to-action/one/page';
+import ContentSection from '../../preview/content/one/page';
+import FAQs from '../../preview/faqs/one/page';
+import Features from '../../preview/features/one/page';
+import HeroSection from '../../preview/hero-section/one/page';
+import LogoCloud from '../../preview/logo-cloud/one/page';
+import Pricing from '../../preview/pricing/one/page';
+import StatsSection from '../../preview/stats/one/page';
+import Testimonials from '../../preview/testimonials/one/page';
 
 /**
  * https://next-intl.dev/docs/environments/actions-metadata-route-handlers#metadata-api
@@ -20,9 +21,9 @@ export async function generateMetadata({
 }: {
   params: Promise<{ locale: Locale }>;
 }): Promise<Metadata | undefined> {
-  const {locale} = await params;
-  const t = await getTranslations({locale, namespace: 'Metadata'});
-  
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Metadata' });
+
   return constructMetadata({
     title: t('title'),
     description: t('description'),
@@ -51,15 +52,15 @@ export default async function HomePage(props: HomePageProps) {
         </div>
 
         <div id="features" className="">
-          <Features7 />
+          <Features />
         </div>
 
-        {/* <FeaturesSection /> */}
-
-        {/* <ContentSection /> */}
+        <div id="content" className="">
+          <ContentSection />
+        </div>
 
         <div id="pricing" className="">
-          <Pricing4 />
+          <Pricing />
         </div>
 
         <div id="faqs" className="">
@@ -74,7 +75,9 @@ export default async function HomePage(props: HomePageProps) {
           <StatsSection />
         </div>
 
-        <CallToAction />
+        <div id="call-to-action" className="">
+          <CallToAction />
+        </div>
       </div>
     </>
   );

src/app/[locale]/preview/hero-section/one/page.tsx

@@ -30,7 +30,7 @@ const transitionVariants = {
 export default function HeroSection() {
   return (
     <>
-      <HeroHeader />
+      {/* <HeroHeader /> */}
       <main className="overflow-hidden">
         <div
           aria-hidden
@@ -41,7 +41,8 @@ export default function HeroSection() {
           <div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
         </div>
         <section>
-          <div className="relative pt-24 md:pt-36">
+          {/* pt-24 md:pt-36 */}
+          <div className="relative">
             <AnimatedGroup
               variants={{
                 container: {