1"use client";
2
3export default function ResultsShowcaseHero() {
4  return (
5    <section className="py-32 bg-background">
6      <div className="container px-4 mx-auto">
7        <div className="relative z-10 mx-auto flex max-w-2xl flex-col items-center justify-center gap-4">
8          <h2 className="text-center text-[#49423D] font-calsans font-bold text-5xl lg:text-6xl">
9            Talk is cheap, we deliver Results
10          </h2>
11          <p className="px-10 text-center text-muted-foreground lg:text-lg">
12            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus odit eius tenetur quaerat, aperiam, iste ea ex
13          </p>
14        </div>
15
16        <div className="relative mt-16 flex h-full items-center justify-center">
17          <div className="min-w-4xl size-full border bg-muted rounded-[30px] overflow-hidden">
18            <img
19              className="h-full max-h-[600px] w-full object-cover object-top"
20              src="/static/inspirations/b2b_saas_bento_grid.png"
21              alt="Featured showcase"
22            />
23          </div>
24        </div>
25
26        <div className="relative z-10 mx-auto mt-10 flex w-fit justify-center">
27          <button className="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-9 rounded-full px-4 py-2 active:scale-105">
28            Try now
29          </button>
30          <div className="absolute top-3 -right-30 h-1" style={{ opacity: 1 }}>
31            <p className="font-caveat text-xl tracking-tight">Try free tier now</p>
32            <svg
33              width="82"
34              className="-translate-x-1/2 pr-4"
35              height="45"
36              viewBox="0 0 82 45"
37              fill="none"
38              xmlns="http://www.w3.org/2000/svg"
39            >
40              <path
41                d="M80.2759 1.95576C67.8687 20.6075 49.1102 55.0246 21.9767 39.1283C15.3299 35.2342 12.7124 29.0489 9.38472 22.4634C9.24096 22.1789 6.96955 15.0574 7.91833 15.4904C10.4589 16.65 25.535 23.253 15.8013 18.8782C14.7716 18.4154 8.31018 14.0924 7.25323 14.6265C4.37354 16.0816 2.6512 30.2469 1.58546 33.4898"
42                stroke="#1C1C1C"
43                strokeWidth="2.40332"
44                strokeLinecap="round"
45                pathLength="1"
46                strokeDashoffset="0px"
47                strokeDasharray="1px 1px"
48              />
49            </svg>
50          </div>
51        </div>
52      </div>
53    </section>
54  );
55}
56