Beautifully designed, production-ready.

import { format } from "date-fns"

import Grid from "@/components/charts/grid"
import LineChart, { Line } from "@/components/charts/line-chart"
import { ChartTooltip } from "@/components/charts/tooltip"
import {
  Metric,
  MetricLabel,
  MetricValue,
} from "@/components/metric"

export function Metrics01() {
  return (
    <div className="max-w-screen overflow-x-clip">
      <div className="container mx-auto px-4 py-8">
        <div className="border-x border-line">
          <div className="screen-line-bottom">
            <h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-semibold tracking-tight">
              Insights
              <sup className="top-[-0.75em] ml-1 text-sm font-medium tracking-normal text-muted-foreground">
                [{format(new Date(data.startDate), "dd.MM")} –{" "}
                {format(new Date(data.endDate), "dd.MM")}]
              </sup>
            </h2>

            <div className="relative">
              <div className="pointer-events-none absolute inset-0 -z-1 grid grid-cols-2 md:grid-cols-4">
                <div className="border-r border-line" />
                <div className="border-r border-line max-md:hidden" />
                <div className="border-r border-line max-md:hidden" />
              </div>

              <dl className="grid grid-cols-2 md:grid-cols-4">
                <Metric>
                  <MetricLabel>Unique Visitors</MetricLabel>
                  <MetricValue>
                    {data.summary.unique_visitors.toLocaleString()}
                  </MetricValue>
                </Metric>

                <Metric>
                  <MetricLabel>Sessions</MetricLabel>
                  <MetricValue>
                    {data.summary.total_sessions.toLocaleString()}
                  </MetricValue>
                </Metric>

                <Metric>
                  <MetricLabel>Views</MetricLabel>
                  <MetricValue>
                    {data.summary.total_screen_views.toLocaleString()}
                  </MetricValue>
                </Metric>

                <Metric>
                  <MetricLabel>Pages per session</MetricLabel>
                  <MetricValue>
                    {data.summary.views_per_session.toLocaleString()}
                  </MetricValue>
                </Metric>
              </dl>
            </div>

            {data.series.length > 0 ? (
              <LineChart
                className="md:aspect-3/1!"
                data={data.series}
                margin={{ top: 16, right: 32, bottom: 40, left: 32 }}
              >
                <Grid horizontal />
                <Line
                  dataKey="total_sessions"
                  stroke="var(--chart-line-secondary)"
                  strokeWidth={2}
                />
                <Line
                  dataKey="unique_visitors"
                  stroke="var(--chart-line-primary)"
                  strokeWidth={2}
                />
                <ChartTooltip
                  rowLabels={{
                    total_sessions: "Sessions",
                    unique_visitors: "Unique Visitors",
                  }}
                />
              </LineChart>
            ) : (
              <div className="grid aspect-2/1 w-full place-content-center md:aspect-3/1">
                <p className="text-muted-foreground">No insights available.</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

type ISODateString = string

type InsightsSummary = {
  unique_visitors: number
  total_sessions: number
  total_screen_views: number
  views_per_session: number
}

type InsightsSeriesItem = {
  date: ISODateString
  unique_visitors: number
  total_sessions: number
}

type InsightsData = {
  summary: InsightsSummary
  series: InsightsSeriesItem[]
  startDate: ISODateString
  endDate: ISODateString
}

const data: InsightsData = {
  summary: {
    unique_visitors: 13582,
    total_sessions: 16010,
    total_screen_views: 102216,
    views_per_session: 6.38,
  },
  series: [
    {
      date: "2026-04-24T00:00:00.000Z",
      unique_visitors: 295,
      total_sessions: 362,
    },
    {
      date: "2026-04-25T00:00:00.000Z",
      unique_visitors: 320,
      total_sessions: 375,
    },
    {
      date: "2026-04-26T00:00:00.000Z",
      unique_visitors: 324,
      total_sessions: 405,
    },
    {
      date: "2026-04-27T00:00:00.000Z",
      unique_visitors: 435,
      total_sessions: 490,
    },
    {
      date: "2026-04-28T00:00:00.000Z",
      unique_visitors: 548,
      total_sessions: 624,
    },
    {
      date: "2026-04-29T00:00:00.000Z",
      unique_visitors: 627,
      total_sessions: 694,
    },
    {
      date: "2026-04-30T00:00:00.000Z",
      unique_visitors: 537,
      total_sessions: 612,
    },
    {
      date: "2026-05-01T00:00:00.000Z",
      unique_visitors: 391,
      total_sessions: 455,
    },
    {
      date: "2026-05-02T00:00:00.000Z",
      unique_visitors: 377,
      total_sessions: 428,
    },
    {
      date: "2026-05-03T00:00:00.000Z",
      unique_visitors: 401,
      total_sessions: 475,
    },
    {
      date: "2026-05-04T00:00:00.000Z",
      unique_visitors: 407,
      total_sessions: 487,
    },
    {
      date: "2026-05-05T00:00:00.000Z",
      unique_visitors: 582,
      total_sessions: 661,
    },
    {
      date: "2026-05-06T00:00:00.000Z",
      unique_visitors: 1366,
      total_sessions: 1517,
    },
    {
      date: "2026-05-07T00:00:00.000Z",
      unique_visitors: 777,
      total_sessions: 885,
    },
    {
      date: "2026-05-08T00:00:00.000Z",
      unique_visitors: 474,
      total_sessions: 549,
    },
    {
      date: "2026-05-09T00:00:00.000Z",
      unique_visitors: 397,
      total_sessions: 466,
    },
    {
      date: "2026-05-10T00:00:00.000Z",
      unique_visitors: 363,
      total_sessions: 425,
    },
    {
      date: "2026-05-11T00:00:00.000Z",
      unique_visitors: 411,
      total_sessions: 494,
    },
    {
      date: "2026-05-12T00:00:00.000Z",
      unique_visitors: 520,
      total_sessions: 598,
    },
    {
      date: "2026-05-13T00:00:00.000Z",
      unique_visitors: 466,
      total_sessions: 552,
    },
    {
      date: "2026-05-14T00:00:00.000Z",
      unique_visitors: 447,
      total_sessions: 517,
    },
    {
      date: "2026-05-15T00:00:00.000Z",
      unique_visitors: 369,
      total_sessions: 411,
    },
    {
      date: "2026-05-16T00:00:00.000Z",
      unique_visitors: 372,
      total_sessions: 421,
    },
    {
      date: "2026-05-17T00:00:00.000Z",
      unique_visitors: 328,
      total_sessions: 385,
    },
    {
      date: "2026-05-18T00:00:00.000Z",
      unique_visitors: 415,
      total_sessions: 492,
    },
    {
      date: "2026-05-19T00:00:00.000Z",
      unique_visitors: 396,
      total_sessions: 462,
    },
    {
      date: "2026-05-20T00:00:00.000Z",
      unique_visitors: 416,
      total_sessions: 473,
    },
    {
      date: "2026-05-21T00:00:00.000Z",
      unique_visitors: 431,
      total_sessions: 491,
    },
    {
      date: "2026-05-22T00:00:00.000Z",
      unique_visitors: 409,
      total_sessions: 397,
    },
    {
      date: "2026-05-23T00:00:00.000Z",
      unique_visitors: 419,
      total_sessions: 407,
    },
  ],
  startDate: "2026-04-24",
  endDate: "2026-05-24",
}

import { GlowCard, GlowCardGrid } from "@/components/glow-card-grid"

export function Team01() {
  return (
    <div className="container px-4 py-8">
      <GlowCardGrid className="lg:grid-cols-4">
        {CARDS.map((card) => (
          <GlowCard
            key={card.name}
            name={card.name}
            handle={card.handle}
            avatar={card.avatar}
          />
        ))}
      </GlowCardGrid>
    </div>
  )
}

const CARDS = [
  {
    name: "shadcn",
    handle: "@shadcn",
    avatar: "https://unavatar.io/x/shadcn",
  },
  {
    name: "Evil Rabbit",
    handle: "@evilrabbit_",
    avatar: "https://unavatar.io/x/evilrabbit_",
  },
  {
    name: "OrcDev",
    handle: "@orcdev",
    avatar: "https://unavatar.io/x/orcdev",
  },
  {
    name: "David Haz",
    handle: "@davidhdev",
    avatar: "https://unavatar.io/x/davidhdev",
  },
  {
    name: "Shu",
    handle: "@shuding",
    avatar: "https://unavatar.io/x/shuding",
  },
  {
    name: "Emil Kowalski",
    handle: "@emilkowalski",
    avatar: "https://unavatar.io/x/emilkowalski",
  },
  {
    name: "Aaron",
    handle: "@aaronmahlke",
    avatar: "https://unavatar.io/x/aaronmahlke",
  },
  {
    name: "Rahul",
    handle: "@iamncdai",
    avatar: "https://unavatar.io/x/iamncdai",
  },
]

import { CodeXmlIcon, LightbulbIcon } from "lucide-react"

import type { ExperienceItemType } from "@/components/work-experience"
import { WorkExperience } from "@/components/work-experience"

export function Experience01() {
  return (
    <div className="max-w-screen overflow-x-hidden">
      <div className="container mx-auto px-4 py-8">
        <div className="border-x border-line">
          <h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-semibold tracking-tight">
            Experience
          </h2>

          <WorkExperience
            className="bg-transparent *:screen-line-bottom"
            experiences={EXPERIENCE}
          />
        </div>
      </div>
    </div>
  )
}

const EXPERIENCE: ExperienceItemType[] = [
  {
    id: "quaric",
    companyName: "Quaric",
    companyLogo: "https://assets.chanhdai.com/images/companies/quaric.svg",
    companyWebsite: "https://quaric.com",
    positions: [
      {
        id: "2",
        title: "Design Engineer",
        employmentPeriod: {
          start: "03.2024",
        },
        employmentType: "Part-time",
        icon: <CodeXmlIcon />,
        description: `- Integrated VNPAY-QR for secure transactions.
- Registered the e-commerce site with [online.gov.vn](https://online.gov.vn) for compliance.
- Developed online ordering to streamline purchases.
- Build and maintain ZaDark.com with Docusaurus, integrating AdSense.
- Develop and maintain the ZaDark extension for Zalo Web on Chrome, Safari, Edge, and Firefox — with 15,000+ active users via Chrome Web Store.`,
        skills: [
          "Next.js",
          "Strapi",
          "Auth0",
          "VNPAY-QR",
          "Docker",
          "NGINX",
          "Google Cloud",
          "Docusaurus",
          "Extension",
          "Research",
          "Project Management",
        ],
      },
      {
        id: "1",
        title: "Founder",
        employmentPeriod: {
          start: "03.2024",
        },
        employmentType: "Part-time",
        icon: <LightbulbIcon />,
        skills: ["Business Ownership", "Business Law", "Business Tax"],
      },
    ],
    isCurrentEmployer: true,
  },
]

import { ArrowRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ArticleItem } from "@/components/article-item"

export function Blog02() {
  return (
    <div className="max-w-screen overflow-x-hidden">
      <div className="container mx-auto px-4 py-8">
        <div className="border-x border-line">
          <h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-semibold tracking-tight">
            Blog
          </h2>

          <p className="p-4 text-base text-balance text-muted-foreground">
            A collection of articles on development, design, ideas, and tech
            news.
          </p>

          <div className="screen-line-top relative py-4">
            <div className="pointer-events-none absolute inset-0 -z-1 grid grid-cols-1 gap-4 max-sm:hidden sm:grid-cols-2 md:grid-cols-3">
              <div className="border-r border-line" />
              <div className="border-l border-line md:border-x" />
              <div className="border-l border-line max-md:hidden" />
            </div>

            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
              {articles.map((article) => (
                <ArticleItem
                  key={article.id}
                  url="#"
                  title={article.title}
                  coverUrl={article.coverUrl}
                  createdAt={article.createdAt}
                />
              ))}
            </div>
          </div>

          <div className="screen-line-top screen-line-bottom flex justify-center py-2">
            <Button className="gap-2 pr-2.5 pl-3" asChild>
              <a href="#">
                View All
                <ArrowRightIcon />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

type Article = {
  id: string
  title: string
  coverUrl: string
  createdAt: string
}

const articles: Article[] = [
  {
    id: "1",
    title:
      "Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/1.webp",
    createdAt: "2025-09-13",
  },
  {
    id: "2",
    title:
      'While the world is expecting AGI, François Chollet is showing just how "naive" AI can be',
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/2.webp",
    createdAt: "2025-04-21",
  },
  {
    id: "3",
    title:
      "Apple introduces iPhone 16e: A powerful new model for the iPhone 16 lineup",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/3.webp",
    createdAt: "2025-02-20",
  },
  {
    id: "4",
    title:
      "Apple unveils MacBook Pro M4: Same design, base model now with 16GB RAM, priced from $1,599",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/4.webp",
    createdAt: "2024-10-31",
  },
  {
    id: "5",
    title:
      "Apple unveils new Mac mini M4: Smaller, 16GB RAM on the base model, priced from $599",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/5.webp",
    createdAt: "2024-10-31",
  },
  {
    id: "6",
    title:
      "Apple unveils iMac M4: Unchanged design, more powerful M4 chip, RAM starts at 16GB, priced from $1,299",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/6.webp",
    createdAt: "2024-10-29",
  },
]

import { ArrowRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ArticleItem } from "@/components/article-item"

export function Blog01() {
  return (
    <div className="container mx-auto flex flex-col gap-8 px-4 py-8">
      <h2 className="ml-4 font-heading text-4xl leading-snug font-medium tracking-tight md:text-5xl">
        Blog
      </h2>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {articles.map((article) => (
          <a key={article.id} className="block h-full" href="#">
            <ArticleItem
              title={article.title}
              coverUrl={article.coverUrl}
              createdAt={article.createdAt}
            />
          </a>
        ))}
      </div>

      <div className="flex justify-center">
        <Button className="gap-2 pr-2.5 pl-3" asChild>
          <a href="#">
            View All
            <ArrowRightIcon />
          </a>
        </Button>
      </div>
    </div>
  )
}

type Article = {
  id: string
  title: string
  coverUrl: string
  createdAt: string
}

const articles: Article[] = [
  {
    id: "1",
    title:
      "Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/1.webp",
    createdAt: "2025-09-13",
  },
  {
    id: "2",
    title:
      'While the world is expecting AGI, François Chollet is showing just how "naive" AI can be',
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/2.webp",
    createdAt: "2025-04-21",
  },
  {
    id: "3",
    title:
      "Apple introduces iPhone 16e: A powerful new model for the iPhone 16 lineup",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/3.webp",
    createdAt: "2025-02-20",
  },
  {
    id: "4",
    title:
      "Apple unveils MacBook Pro M4: Same design, base model now with 16GB RAM, priced from $1,599",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/4.webp",
    createdAt: "2024-10-31",
  },
  {
    id: "5",
    title:
      "Apple unveils new Mac mini M4: Smaller, 16GB RAM on the base model, priced from $599",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/5.webp",
    createdAt: "2024-10-31",
  },
  {
    id: "6",
    title:
      "Apple unveils iMac M4: Unchanged design, more powerful M4 chip, RAM starts at 16GB, priced from $1,299",
    coverUrl:
      "https://assets.chanhdai.com/registry/images/blocks/blog-01/6.webp",
    createdAt: "2024-10-29",
  },
]

import type { JSX } from "react"
import { Volume2Icon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  LaravelIcon,
  NextJSIcon,
  NodeJSIcon,
  ReactIcon,
  TailwindCSSIcon,
} from "@/components/hero-01-icons"

export function Hero01() {
  return (
    <div className="relative w-screen overflow-hidden pb-8">
      <div className="container mx-auto max-sm:px-2">
        <div className="screen-line-top screen-line-bottom border-x border-line md:hidden">
          <svg
            className="pointer-events-none absolute inset-0 overflow-visible text-line"
            viewBox="0 0 210 340"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g className="text-line">
              <path
                d="M380.853 105.099L-201.625 464.632"
                stroke="currentColor"
                strokeDasharray="4 2"
                vectorEffect="non-scaling-stroke"
              />
              <path
                d="M-165.247 -267.831L369.777 600.141"
                stroke="currentColor"
                strokeDasharray="4 2"
                vectorEffect="non-scaling-stroke"
              />
            </g>

            <g>
              <path
                d="M209.5 260L130 260"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <path
                d="M129.5 339.5L129.5 210"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <path
                d="M159.5 260L159.5 210"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <path
                d="M3.09944e-06 210L209.5 210"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <path
                d="M160 240L130.133 240"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <path
                d="M149.5 240L149.5 260"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
            </g>

            <g>
              <rect
                x="159.5"
                y="210"
                width="30"
                height="30"
                transform="rotate(90 159.5 210)"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <rect
                x="149.5"
                y="240"
                width="20"
                height="20"
                transform="rotate(90 149.5 240)"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <rect
                x="159.5"
                y="240"
                width="20"
                height="10"
                transform="rotate(90 159.5 240)"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
            </g>

            {/* golden spiral */}
            <path
              className="text-border"
              d="M149.643 239.897C155.106 239.897 159.619 244.414 159.619 249.882C159.619 255.35 155.106 259.868 149.643 259.868C138.717 259.868 129.69 250.833 129.69 239.897C129.69 223.493 143.23 209.941 159.619 209.941C186.935 209.941 209.5 232.527 209.5 259.868C209.5 303.613 173.396 339.75 129.69 339.75C58.6695 339.75 -1.22732e-05 281.027 -9.16589e-06 209.941C-4.14648e-06 95.1103 94.7738 0.24998 209.5 0.249985C395.69 0.250001 549.5 154.06 549.5 340.25"
              stroke="currentColor"
              strokeWidth="2"
              vectorEffect="non-scaling-stroke"
            />
          </svg>

          <div className="relative grid aspect-[1/1.618] grid-cols-[1.618fr_minmax(0,1fr)] grid-rows-[1.618fr_1fr]">
            <MainContent className="col-[1/span_2] row-1" />

            <div className="col-2 row-2 flex items-center justify-center p-2 sm:p-4">
              <div className="aspect-square h-auto w-full rounded-[12px] border border-border p-[4px] transition duration-300 hover:brightness-90 sm:size-32">
                <img
                  src="/placeholder.svg"
                  alt="Hero section image"
                  className="rounded-[8px] object-cover select-none"
                />
              </div>
            </div>

            <div className="col-1 row-2 flex flex-col items-center justify-center overflow-hidden p-2 sm:p-4" />
          </div>
        </div>

        <div className="screen-line-top screen-line-bottom hidden border-x border-line md:block">
          <svg
            className="pointer-events-none absolute inset-0 overflow-visible text-line"
            viewBox="0 0 340 210"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g className="text-line">
              <path
                d="M105.1 -170.853L464.633 411.625"
                stroke="currentColor"
                strokeDasharray="4 2"
                vectorEffect="non-scaling-stroke"
              />
              <path
                d="M-267.831 375.247L600.141 -159.777"
                stroke="currentColor"
                strokeDasharray="4 2"
                vectorEffect="non-scaling-stroke"
              />
            </g>

            <g>
              <path
                d="M260 0.5V80"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <path
                d="M339.5 80.5H210"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <path
                d="M210 210V0.5"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
            </g>

            <g>
              <rect
                x="210"
                y="50.5"
                width="30"
                height="30"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <rect
                x="240"
                y="60.5"
                width="20"
                height="20"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
              <rect
                x="240"
                y="50.5"
                width="20"
                height="10"
                stroke="currentColor"
                vectorEffect="non-scaling-stroke"
              />
            </g>

            {/* golden spiral */}
            <path
              className="text-border"
              d="M239.897 60.3571C239.897 54.894 244.414 50.381 249.882 50.381C255.35 50.381 259.868 54.894 259.868 60.3571C259.868 71.2835 250.833 80.3095 239.897 80.3095C223.493 80.3095 209.941 66.7704 209.941 50.381C209.941 23.0652 232.527 0.499999 259.868 0.5C303.613 0.499995 339.75 36.6043 339.75 80.3095C339.75 151.33 281.027 210 209.941 210C95.1103 210 0.25 115.226 0.25 0.5C0.250008 -185.69 154.06 -339.5 340.25 -339.5"
              stroke="currentColor"
              strokeWidth="2"
              vectorEffect="non-scaling-stroke"
            />
          </svg>

          <div className="relative grid aspect-[1.618/1] grid-cols-[1.618fr_minmax(0,1fr)] grid-rows-[1fr_1.618fr]">
            <MainContent className="col-1 row-[1/span_2]" />

            <div className="col-2 row-1 flex items-center justify-center p-4 lg:p-8">
              <div className="aspect-square h-auto w-full rounded-[12px] border border-border p-[4px] transition duration-300 hover:brightness-90 sm:size-32">
                <img
                  src="/placeholder.svg"
                  alt="Hero section image"
                  className="rounded-[8px] object-cover select-none"
                />
              </div>
            </div>

            <div className="col-2 row-2 flex items-center justify-center overflow-hidden p-4 lg:p-8" />
          </div>
        </div>
      </div>
    </div>
  )
}

function MainContent({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        "flex flex-col justify-center overflow-hidden p-4 lg:p-8",
        className
      )}
    >
      <h1 className="mb-4 font-heading text-[2.5rem] leading-none font-semibold tracking-tight text-foreground sm:mb-6 sm:text-6xl md:text-5xl lg:text-6xl xl:text-7xl">
        Plan. Build. Ship.
      </h1>

      <p className="mb-6 text-base leading-normal! text-muted-foreground sm:mb-8 sm:text-xl sm:text-balance md:text-lg lg:text-xl">
        Acme{" "}
        <button
          className="relative top-0.75 inline-flex transition-[scale] outline-none active:scale-[0.97] sm:top-1"
          aria-label="Pronunciation"
        >
          <Volume2Icon className="size-[1em]" />
        </button>{" "}
        provides{" "}
        <strong className="font-normal text-foreground">professional,</strong>{" "}
        <strong className="font-normal text-foreground">high-quality</strong>{" "}
        software design and development services based on your ideas.
      </p>

      <div className="mb-6 grid grid-cols-2 items-center gap-4 sm:mb-8 sm:flex">
        <Button className="border-none px-4 sm:px-8" size="lg" asChild>
          <a href="#">Sign up now</a>
        </Button>

        <Button className="px-4 sm:px-8" variant="outline" size="lg" asChild>
          <a href="#">Learn more</a>
        </Button>
      </div>

      <div className="relative -ml-4 lg:ml-0">
        <div className="absolute -top-2 right-0 z-1 block h-10 w-20 bg-background mask-[linear-gradient(to_left,white,transparent)] lg:hidden" />

        <div className="no-scrollbar flex items-center gap-4 overflow-x-auto px-4 lg:px-0">
          <TechItem icon={<NodeJSIcon />} title="Node.js" />
          <TechItem icon={<LaravelIcon />} title="Laravel" />
          <TechItem icon={<NextJSIcon />} title="Next.js" />
          <TechItem icon={<ReactIcon />} title="React" />
          <TechItem icon={<TailwindCSSIcon />} title="Tailwind CSS" />
        </div>
      </div>
    </div>
  )
}

function TechItem({ icon, title }: { icon: JSX.Element; title: string }) {
  return (
    <div className="flex items-center space-x-2 text-muted-foreground select-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6">
      {icon}
      <span className="text-sm font-medium whitespace-nowrap">{title}</span>
    </div>
  )
}