[RSN-41] - create hero component (#29)

* feat: hero section base component (like really BASE)

* feat: base styling for hero section

* feat: implemented hero section with card component (without RWD)

Client/reasn-client/apps/web/app/page.tsx

@@ -1,14 +1,11 @@
 "use client";
 
-import { Button } from "@reasn/ui";
-
-import styles from "../styles/index.module.css";
+import { HeroSection } from "@reasn/ui/src";
 
 export default function Web() {
   return (
-    <div className={styles.container}>
-      <h1>Web</h1>
-      <Button onClick={() => console.log("Pressed!")} text="Boop" />
+    <div className="bg-[#161618] text-white">
+      <HeroSection />
     </div>
   );
 }

Client/reasn-client/apps/web/styles/index.module.css

@@ -1,3 +0,0 @@
-.container {
-  text-align: center;
-}

Client/reasn-client/packages/ui/src/components/Card.tsx

@@ -28,12 +28,8 @@ export const Card = (props: Readonly<CardProps>) => {
 const CardBig = ({ event }: { event: string }) => {
   return (
     <div className="relative h-[30vh] w-[30vw] overflow-hidden rounded-3xl">
-      <img
-        src={MOCK_IMG_URL}
-        alt=""
-        className="absolute left-0 top-0 -z-10 w-full"
-      />
-      <div className="flex h-[45%] w-full flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
+      <img src={MOCK_IMG_URL} alt="" className="absolute left-0 top-0 w-full" />
+      <div className="relative flex h-[45%] w-full flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
         <div className="flex gap-2 text-xs text-[#cacaca]">
           <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>
           <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>
@@ -95,7 +91,7 @@ const CardList = ({ event }: { event: string }) => {
         alt=""
         className="absolute left-0 top-0 -z-10 w-full"
       />
-      <div className="flex h-full w-2/3 flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
+      <div className="relative flex h-full w-2/3 flex-col gap-2 bg-[#232326ee] p-4 text-[#F7F8F8]">
         <div className="flex gap-2 text-xs text-[#cacaca]">
           <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>
           <p className="rounded-md bg-[#4b4e52] px-[5px] py-[1px]">#abcd</p>

Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Fire } from "../../icons/Fire";
+import { Card, CardVariant } from "../Card";
+
+export const HeroSection = () => {
+  return (
+    <section className="flex h-[50vh] w-full items-center justify-center gap-24">
+      <div className="relative z-10 h-1/3 w-fit">
+        <div className='absolute top-0 h-1.5 w-2/3 rounded-lg bg-gradient-to-r from-[#FF6363] to-[#1E34FF] content-[""]'></div>
+        <Fire
+          className="absolute right-0 top-0 h-14 w-14 translate-y-[-50%] rotate-[16deg]"
+          colors={["#6E45C8", "#953A3D"]}
+          gradientTransform="rotate(90)"
+        />
+        <h2 className="h-full content-center bg-gradient-to-r from-[#FF6363] to-[#1E34FF] bg-clip-text text-right text-5xl font-bold text-transparent">
+          to jest teraz <br /> na topie
+        </h2>
+      </div>
+      <div className="relative">
+        <div className='absolute right-[-25%] top-[-50%] z-0 h-[200%] w-[150%] rounded-full bg-gradient-to-r from-[#FF6363] to-[#1E34FF] opacity-5 blur-3xl content-[""]'></div>
+        <Card variant={CardVariant.Big} event={"abcd"} />
+      </div>
+    </section>
+  );
+};

Client/reasn-client/packages/ui/src/icons/Fire.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+export const Fire = (props: IconProps) => {
+  const { className, colors, gradientTransform } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      className={className}
+      viewBox="0 0 16 16"
+      fill="url(#gradient1)"
+    >
+      <defs>
+        <linearGradient
+          id="gradient1"
+          x1="0%"
+          y1="0%"
+          x2="100%"
+          y2="0%"
+          gradientTransform={gradientTransform}
+        >
+          {colors?.map((color, index) => (
+            <stop
+              key={index}
+              offset={`${
+                index + 1 < colors.length ? index * (100 / colors.length) : 100
+              }%`}
+              style={{ stopColor: color, stopOpacity: 1 }}
+            />
+          ))}
+        </linearGradient>
+      </defs>
+      <path d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16m0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15" />
+    </svg>
+  );
+};

Client/reasn-client/packages/ui/src/icons/IconProps.ts

@@ -0,0 +1,5 @@
+type IconProps = {
+  className?: string;
+  colors?: string[];
+  gradientTransform?: string;
+};

Client/reasn-client/packages/ui/src/index.tsx

@@ -1,2 +1,3 @@
 export { Button, type ButtonProps } from "./button";
 export { Card, type CardProps, CardVariant } from "./components/Card";
+export { HeroSection } from "./components/main/HeroSection";