Initial commit files

2026-06-18 11:13:39 +05:30
parent 2e710e1fb7
commit d9cc83aa82
36 changed files with 1958 additions and 107 deletions
--- a/components/aiero/HeroSection.tsx
+++ b/components/aiero/HeroSection.tsx
@@ -0,0 +1,86 @@
+
+export function HeroSection() {
+  return (
+    <section className="relative px-5 pt-5">
+      {/* Scroll Down button — vertical, left side */}
+      <div
+        className="absolute left-0 top-1/2 z-20 hidden xl:block"
+        style={{
+          transform: "rotate(-90deg) translateX(-50%) translateY(100%)",
+          transformOrigin: "left bottom",
+        }}
+      >
+        <span className="scroll-btn-decoration">
+          <a
+            href="#scroll-down"
+            className="inline-flex items-center gap-2 rounded-b-[25px] bg-white px-[56px] py-[16px] text-[13px] font-semibold text-[#0b0e17] no-underline transition-colors hover:text-[#45d0bd]"
+            style={{ fontFamily: "var(--font-sora)" }}
+          >
+            Scroll down
+            <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
+              <path d="M1 11L11 1M11 1H3M11 1V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </a>
+        </span>
+      </div>
+
+      {/* Hero container with background */}
+      <div
+        className="relative overflow-hidden rounded-[25px] bg-[#1f1f1f] bg-cover bg-center"
+        style={{
+          backgroundImage: "url(/images/aiero/home-9-top-bg-min.jpg)",
+          padding: "13.5% 0 8.333% 0",
+        }}
+      >
+
+        {/* Hero content */}
+        <div className="relative z-10 mx-auto max-w-[1140px] px-[15px]" style={{ marginLeft: "-35px", paddingLeft: "calc(50% - 570px + 15px)" }}>
+          <div className="flex flex-col items-start">
+            {/* Heading */}
+            <h1
+              className="mb-5 max-w-[1100px] text-left tracking-[-0.03em] text-white"
+              style={{
+                fontFamily: "var(--font-manrope)",
+                fontSize: "clamp(32px, 5.2vw, 80px)",
+                fontWeight: 700,
+                lineHeight: 1.1,
+              }}
+            >
+              Revolutionizing businesses with cutting-edge AI solutions and
+              groundbreaking innovation
+            </h1>
+
+            {/* Subtitle */}
+            <div style={{ marginRight: "53%" }}>
+              <p className="text-[16px] leading-[1.6] text-white">
+                Mummichog paradise fish! Triggerfish bango guppy opah sunfish
+                bluntnose knifefish upside-down catfish cobia spookfish convict
+                cichlid.
+              </p>
+            </div>
+
+            {/* CTA Button */}
+            <div className="mt-10">
+              <a
+                href="#"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="aiero-button aiero-button-solid inline-flex items-center gap-2 rounded-[25px] border border-[#EF6464] bg-[#EF6464] px-[30px] py-[14px] text-[16px] text-white transition-all hover:border-[#F57E7E] hover:bg-[#F57E7E]"
+                style={{ minWidth: "216px", fontFamily: "var(--font-sora)" }}
+              >
+                Discover
+                <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
+                  <path d="M1 11L11 1M11 1H3M11 1V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+                <span className="button-inner" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Scroll anchor */}
+        <div id="scroll-down" className="absolute bottom-0" />
+      </div>
+    </section>
+  );
+}