feat: base styling for hero section

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

@@ -1,12 +1,10 @@
 "use client";
 
-import { HeroSection } 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}>
+    <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/main/HeroCard.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const HeroCard = () => {
+  return (
+    <div className='w-1/4 flex flex-col text-left'>
+        <div className='flex text-[#8A8F98] gap-1 text-xs'>
+          <p>#platne</p>
+          <p>#wroclaw</p>
+          <p>#koncert</p>
+        </div>
+        <h3>koncert fagaty</h3>
+      </div>
+  )
+}

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

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

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

@@ -0,0 +1,18 @@
+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;
+};