9c80702c-b5df-4e45-a373-64336018ba7f/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Award, Building, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="compact"
        sizing="mediumLarge"
        background="noise"
        cardStyle="gradient-radial"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Who We Are",          id: "#about"},
        {
          name: "Portfolio",          id: "#portfolio"},
        {
          name: "Services",          id: "#services"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="HZCreation"
      button={{ text: "Get In Touch", href: "#contact" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{
        variant: "cell-wave"}}
      logoText="HZCREATION"
      description="Jingtai Group – Elevating the Standards of Interior Design and Construction."
      buttons={[
        {
          text: "Explore Portfolio",          href: "#portfolio"},
        {
          text: "Get In Touch",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/exterior-modern-buildings_1112-1992.jpg"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="Who We Are"
      metrics={[
        {
          icon: Building,
          label: "Projects Completed",          value: "500+"},
        {
          icon: Award,
          label: "Certified Offices",          value: "120+"},
        {
          icon: Users,
          label: "Global Team",          value: "80+"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardMedia
      animationType="scale-rotate"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "s1",          title: "Pre-lease Survey",          description: "Accurate spatial analysis to help you make informed real estate decisions.",          tag: "Survey",          imageSrc: "http://img.b2bpic.net/free-photo/rear-view-busy-woman-office_329181-10984.jpg"},
        {
          id: "s2",          title: "LEED & WELL Design",          description: "High-performance building standards focusing on health and sustainability.",          tag: "Design",          imageSrc: "http://img.b2bpic.net/free-photo/girl-showing-book-friends_23-2147678971.jpg"},
        {
          id: "s3",          title: "Project Management",          description: "Comprehensive construction oversight from concept to completion.",          tag: "Execution",          imageSrc: "http://img.b2bpic.net/free-photo/three-architects-wearing-helmets_23-2147702486.jpg"},
      ]}
      title="Our Professional Services"
      description="We specialize in end-to-end office interiors."
    />
  </div>

  <div id="testimonial" data-section="testimonial">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Client Success Stories"
      description="See why industry leaders trust us with their workspaces."
      kpiItems={[
        {
          value: "98%",          label: "Client Satisfaction"},
        {
          value: "15+",          label: "Years Experience"},
        {
          value: "40+",          label: "Regional Awards"},
      ]}
      testimonials={[
        {
          id: "t1",          name: "Alex Rivera",          role: "CEO",          company: "TechFlow Solutions",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/rear-view-busy-woman-office_329181-10984.jpg"},
        {
          id: "t2",          name: "Sarah Chen",          role: "Director",          company: "Innovate Corp",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/girl-showing-book-friends_23-2147678971.jpg"},
        {
          id: "t3",          name: "Mark Sterling",          role: "COO",          company: "Global Logistics",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/three-architects-wearing-helmets_23-2147702486.jpg"},
        {
          id: "t4",          name: "Elena Vance",          role: "Founder",          company: "GreenBuild Lab",          rating: 4,
          imageSrc: "http://img.b2bpic.net/free-photo/exterior-modern-buildings_1112-1992.jpg"},
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "downward-rays-animated-grid"}}
      tag="Let's Connect"
      title="Start Your Project"
      description="Ready to design your office workspace? Contact our team for an initial consultation."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Portfolio",              href: "#portfolio"},
          ],
        },
        {
          items: [
            {
              label: "Services",              href: "#services"},
            {
              label: "Join Us",              href: "#join"},
          ],
        },
        {
          items: [
            {
              label: "Contact",              href: "#contact"},
            {
              label: "Privacy Policy",              href: "#"},
          ],
        },
      ]}
      logoText="HZCREATION"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}