From ad1e2d3f636a93cb8e7f39ee9caf866bdc7766b4 Mon Sep 17 00:00:00 2001
From: Sanidhya Kumar Verma <sanidhya.verma12345@gmail.com>
Date: Sat, 21 Sep 2024 16:58:10 +0000
Subject: [PATCH] hero section implemented

---
 src/App.tsx               |  3 ++
 src/components/Button.tsx | 70 +++++++++++++++++++++++++++++++++++++++
 src/components/Marker.tsx | 22 ++++++++++++
 src/sections/Header.tsx   |  8 +++--
 src/sections/Hero.tsx     | 39 ++++++++++++++++++++++
 5 files changed, 139 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Button.tsx
 create mode 100644 src/components/Marker.tsx
 create mode 100644 src/sections/Hero.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 51f3fe9..a6df555 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,9 +1,12 @@
 import { Header } from "./sections/Header";
+import { Hero } from "./sections/Hero";
 
 export const App = () => {
   return (
     <main className="overflow-hidden">
       <Header />
+
+      <Hero />
     </main>
   );
 };
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..b8894bf
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,70 @@
+import type { PropsWithChildren } from "react";
+import { cn } from "../lib/utils";
+import { Marker } from "./Marker";
+
+interface ButtonProps {
+  icon?: string;
+  href?: string;
+  onClick?: () => void;
+  containerClassName?: string;
+  markerFill?: string;
+}
+
+export const Button = ({
+  icon,
+  children,
+  href,
+  onClick,
+  containerClassName,
+  markerFill,
+}: PropsWithChildren<ButtonProps>) => {
+  const Inner = () => (
+    <>
+      <span className="relative flex items-center min-h-[60px] px-4 g4 rounded-2xl inner-before group-hover:before:opacity-100 overflow-hidden">
+        <span className="absolute -left-[1px]">
+          <Marker fill={markerFill} />
+        </span>
+
+        {icon && (
+          <img
+            src={icon}
+            alt="circle"
+            className="size-10 mr-5 object-contain z-10"
+          />
+        )}
+
+        <span className="relative z-2 font-poppins base-bold text-p1 uppercase">
+          {children}
+        </span>
+
+        <span className="glow-before glow-after" />
+      </span>
+    </>
+  );
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={cn(
+          "relative p-0.5 g5 rounded-2xl shadow-500 group",
+          containerClassName
+        )}
+      >
+        <Inner />
+      </a>
+    );
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "relative p-0.5 g5 rounded-2xl shadow-500 group",
+        containerClassName
+      )}
+    >
+      <Inner />
+    </button>
+  );
+};
diff --git a/src/components/Marker.tsx b/src/components/Marker.tsx
new file mode 100644
index 0000000..e484f49
--- /dev/null
+++ b/src/components/Marker.tsx
@@ -0,0 +1,22 @@
+interface MarkerProps {
+  fill?: string;
+}
+
+export const Marker = ({ fill }: MarkerProps) => {
+  return (
+    <svg
+      width="8"
+      height="22"
+      viewBox="0 0 8 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 0H0.5V4V18V22H2.5V16.25L7.63991 11.7526C8.09524 11.3542 8.09524 10.6458 7.63991 10.2474L2.5 5.75V0Z"
+        fill={fill || "#2EF2FF"}
+      />
+    </svg>
+  );
+};
diff --git a/src/sections/Header.tsx b/src/sections/Header.tsx
index af6bd37..f7a1e3c 100644
--- a/src/sections/Header.tsx
+++ b/src/sections/Header.tsx
@@ -20,9 +20,11 @@ export const Header = () => {
   return (
     <header className="fixed top-0 left-0 z-50 w-full py-10">
       <div className="container flex h-14 items-center max-lg:px-5">
-        <a href="/" className="lg:hidden flex-1 z-2 cursor-pointer">
-          <img src="/images/xora.svg" width={115} height={55} alt="logo" />
-        </a>
+        <div className="lg:hidden flex-1 z-2">
+          <a href="/" className="block w-fit cursor-pointer">
+            <img src="/images/xora.svg" width={115} height={55} alt="logo" />
+          </a>
+        </div>
 
         <div
           className={cn(
diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
new file mode 100644
index 0000000..7ccecc9
--- /dev/null
+++ b/src/sections/Hero.tsx
@@ -0,0 +1,39 @@
+import { Element, Link as LinkScroll } from "react-scroll";
+import { Button } from "../components/Button";
+
+export const Hero = () => {
+  return (
+    <section className="relative pt-60 pb-40 max-lg:pt-52 max-lg:pb-36 max-md:pt-36 max-md:pb-32">
+      <Element name="hero">
+        <div className="container">
+          <div className="relative z-2 max-w-512 max-lg:max-w-388">
+            <div className="caption small-2 uppercase text-p3">
+              Video Editing
+            </div>
+
+            <h1 className="mb-6 h1 text-p4 uppercase max-lg:mb-7 max-lg:h2 max-md:mb-4 max-md:text-5xl max-md:leading-12">
+              Amazingly simple
+            </h1>
+
+            <p className="max-2-440 mb-14 body-1 max-md:mb-10">
+              We designed Xora AI Video Editor to be an easy to use, quick to
+              learn, and surprisingly powerful.
+            </p>
+
+            <LinkScroll to="features" offset={-100} spy smooth>
+              <Button icon="/images/zap.svg">Try it now</Button>
+            </LinkScroll>
+          </div>
+
+          <div className="absolute -top-32 left-[calc(50%_-_340px)] w-[1230px] pointer-events-none hero-img_res">
+            <img
+              src="/images/hero.png"
+              className="size-1230 max-lg:h-auto"
+              alt="hero"
+            />
+          </div>
+        </div>
+      </Element>
+    </section>
+  );
+};