chore: update home page

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

@@ -1,11 +1,16 @@
+import CallToAction from '@/components/blocks/call-to-action/call-to-action';
 import CallToAction3 from '@/components/blocks/call-to-action/call-to-action-3';
 import Content2 from '@/components/blocks/content/content-2';
 import FAQs from '@/components/blocks/faq/faqs';
+import Features from '@/components/blocks/features/features';
+import Features7 from '@/components/blocks/features/features-7';
 import FeaturesSection from '@/components/blocks/features/features-8';
 import HeroSection from '@/components/blocks/hero/hero-section-4';
 import LogoCloud from '@/components/blocks/logo-cloud/logo-cloud';
 import Pricing from '@/components/blocks/pricing/pricing';
+import Pricing4 from '@/components/blocks/pricing/pricing-4';
 import StatsSection from '@/components/blocks/stats/stats';
+import Testimonials from '@/components/blocks/testimonials/testimonials';
 import { getTranslations } from 'next-intl/server';
 
 interface HomePageProps {
@@ -19,26 +24,40 @@ export default async function HomePage(props: HomePageProps) {
 
   return (
     <>
-      <div className="mt-8 flex flex-col gap-16">
-        <HeroSection />
+      <div className="mt-8 flex flex-col gap-16 pb-16">
+        <div id="hero" className="">
+          <HeroSection />
+        </div>
 
-        <LogoCloud />
+        <div id="logo-cloud" className="">
+          <LogoCloud />
+        </div>
 
-        {/* <Features /> */}
+        <div id="features" className="">
+          <Features7 />
+        </div>
 
         {/* <FeaturesSection /> */}
 
         {/* <ContentSection /> */}
 
-        <Pricing />
+        <div id="pricing" className="">
+          <Pricing4 />
+        </div>
 
-        {/* <FAQs />
+        <div id="faqs" className="">
+          <FAQs />
+        </div>
 
-        <WallOfLoveSection /> */}
+        <div id="testimonials" className="">
+          <Testimonials />
+        </div>
 
-        {/* <StatsSection />
+        <div id="stats" className="">
+          <StatsSection />
+        </div>
 
-        <CallToAction /> */}
+        <CallToAction />
       </div>
     </>
   );

src/components/blocks/hero/hero-section-4.tsx

@@ -1,21 +1,15 @@
 'use client';
-import React from 'react';
-import Link from 'next/link';
-import { Logo } from '@/components/logo';
-import { ArrowRight, Menu, Rocket, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { ArrowRight, Rocket } from 'lucide-react';
 import Image from 'next/image';
+import Link from 'next/link';
 
-const menuItems = [
-  { name: 'Features', href: '#' },
-  { name: 'Solution', href: '#' },
-  { name: 'Pricing', href: '#' },
-  { name: 'About', href: '#' },
-];
-
+/**
+ * https://nsui.irung.me/hero-section
+ *
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/hero-section-4.json
+ */
 export default function HeroSection4() {
-  const [menuState, setMenuState] = React.useState(false);
-
   return (
     <>
       <main className="overflow-hidden">