10a69f7d-526e-47d4-bbd6-4310769be01b/src/app/about/page.tsx

"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Sparkles, Shield, CheckCircle } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "Portfolio", id: "portfolio" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  const coreValues = [
    {
      title: "Quality First",
      description: "We never compromise on materials or craftsmanship.",
      buttonIcon: CheckCircle,
    },
    {
      title: "Client-Centric",
      description: "Your satisfaction is our ultimate measure of success.",
      buttonIcon: CheckCircle,
    },
    {
      title: "Professionalism",
      description: "Punctuality, transparency, and integrity in all dealings.",
      buttonIcon: CheckCircle,
    },
    {
      title: "Innovation",
      description: "We stay updated with latest design trends and techniques.",
      buttonIcon: CheckCircle,
    },
    {
      title: "Affordability",
      description: "Premium services at competitive, fair prices.",
      buttonIcon: CheckCircle,
    },
    {
      title: "Sustainability",
      description: "Environmentally conscious choices where possible.",
      buttonIcon: CheckCircle,
    },
  ];

  const metrics = [
    { value: "10+", title: "Years of Industry Experience" },
    { value: "85+", title: "Successful Projects Completed" },
    { value: "4.7★", title: "Average Client Rating" },
    { value: "100%", title: "Client Satisfaction Rate" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Services", href: "/services" },
        { label: "Portfolio", href: "/portfolio" },
      ],
    },
    {
      items: [
        { label: "About", href: "/about" },
        { label: "Contact", href: "/contact" },
        { label: "Get Quote", href: "/contact" },
      ],
    },
    {
      items: [
        { label: "Phone: +92 333 8555667", href: "tel:+923338555667" },
        { label: "Location: Islamabad, Pakistan", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="medium"
      sizing="mediumLarge"
      background="noiseDiagonalGradient"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={navItems}
          brandName="Interior Decor Islamabad"
          bottomLeftText="Islamabad, Pakistan"
          bottomRightText="+92 333 8555667"
        />
      </div>

      <div id="hero-about" data-section="hero-about" className="min-h-screen">
        <HeroSplitDualMedia
          title="About Interior Decor Islamabad"
          description="A dedicated team of interior designers and renovation experts committed to transforming spaces with creativity, quality, and professionalism."
          tag="About Us"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Get In Touch",
              href: "/contact",
            },
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k3s5be&_wi=2",
              imageAlt: "Professional interior design team",
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1v8hgb&_wi=4",
              imageAlt: "Team at work on renovation project",
            },
          ]}
          mediaAnimation="opacity"
          rating={4.7}
          ratingText="10+ Years of Excellence"
          background={{
            variant: "gradient-bars",
          }}
        />
      </div>

      <div id="about-story" data-section="about-story" className="py-20">
        <MetricSplitMediaAbout
          title="Our Story"
          description="Founded with a passion for creating beautiful, functional spaces, Interior Decor Islamabad has grown to become a trusted name in interior design and renovation. We believe every space has potential, and we're here to unlock it."
          metrics={metrics}
          tag="Our Journey"
          tagIcon={Shield}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k3s5be&_wi=3"
          imageAlt="Professional team at work"
          mediaAnimation="opacity"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="values" data-section="values" className="py-20">
        <FeatureCardTwentySix
          title="Our Core Values"
          description="These principles guide every project we undertake."
          features={coreValues}
          tag="Our Principles"
          tagIcon={Shield}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="footer-about" data-section="footer-about">
        <FooterLogoEmphasis
          logoText="Interior Decor Islamabad"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}