From 8aa1315bd19f2ae0b1b8fff84ba282ae8cd050d5 Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Wed, 8 May 2024 20:04:08 +0200
Subject: [PATCH 1/3] feat: hero section base component (like really BASE)

---
 Client/reasn-client/apps/web/app/page.tsx                  | 5 ++---
 .../packages/ui/src/components/main/HeroSection.tsx        | 7 +++++++
 Client/reasn-client/packages/ui/src/index.tsx              | 1 +
 3 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx

diff --git a/Client/reasn-client/apps/web/app/page.tsx b/Client/reasn-client/apps/web/app/page.tsx
index d8bbf2f0..1fb59eaf 100644
--- a/Client/reasn-client/apps/web/app/page.tsx
+++ b/Client/reasn-client/apps/web/app/page.tsx
@@ -1,14 +1,13 @@
 "use client";
 
-import { Button } from "@reasn/ui";
+import { HeroSection } from "@reasn/ui";
 
 import styles from "../styles/index.module.css";
 
 export default function Web() {
   return (
     <div className={styles.container}>
-      <h1>Web</h1>
-      <Button onClick={() => console.log("Pressed!")} text="Boop" />
+      <HeroSection />
     </div>
   );
 }
diff --git a/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx b/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx
new file mode 100644
index 00000000..0a40ed03
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const HeroSection = () => {
+  return (
+    <div className='bg-red-500'>HeroSection</div>
+  )
+}
\ No newline at end of file
diff --git a/Client/reasn-client/packages/ui/src/index.tsx b/Client/reasn-client/packages/ui/src/index.tsx
index 4dbd459a..59314924 100644
--- a/Client/reasn-client/packages/ui/src/index.tsx
+++ b/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";

From da747b9fade9515c4a31e690e3fbe4e23208ae1e Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Wed, 15 May 2024 16:13:39 +0200
Subject: [PATCH 2/3] feat: base styling for hero section

---
 Client/reasn-client/apps/web/app/page.tsx      |  6 ++----
 .../apps/web/styles/index.module.css           |  3 ---
 .../ui/src/components/main/HeroCard.tsx        | 14 ++++++++++++++
 .../ui/src/components/main/HeroSection.tsx     | 13 ++++++++++++-
 .../packages/ui/src/icons/Fire.tsx             | 18 ++++++++++++++++++
 .../packages/ui/src/icons/IconProps.ts         |  5 +++++
 6 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 Client/reasn-client/packages/ui/src/components/main/HeroCard.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/Fire.tsx
 create mode 100644 Client/reasn-client/packages/ui/src/icons/IconProps.ts

diff --git a/Client/reasn-client/apps/web/app/page.tsx b/Client/reasn-client/apps/web/app/page.tsx
index 1fb59eaf..f16ce2dc 100644
--- a/Client/reasn-client/apps/web/app/page.tsx
+++ b/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>
   );
diff --git a/Client/reasn-client/apps/web/styles/index.module.css b/Client/reasn-client/apps/web/styles/index.module.css
index d2a4fa15..e69de29b 100644
--- a/Client/reasn-client/apps/web/styles/index.module.css
+++ b/Client/reasn-client/apps/web/styles/index.module.css
@@ -1,3 +0,0 @@
-.container {
-  text-align: center;
-}
diff --git a/Client/reasn-client/packages/ui/src/components/main/HeroCard.tsx b/Client/reasn-client/packages/ui/src/components/main/HeroCard.tsx
new file mode 100644
index 00000000..05a19a94
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx b/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx
index 0a40ed03..19ec5ded 100644
--- a/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx
+++ b/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>
   )
 }
\ No newline at end of file
diff --git a/Client/reasn-client/packages/ui/src/icons/Fire.tsx b/Client/reasn-client/packages/ui/src/icons/Fire.tsx
new file mode 100644
index 00000000..e4d47a48
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/Client/reasn-client/packages/ui/src/icons/IconProps.ts b/Client/reasn-client/packages/ui/src/icons/IconProps.ts
new file mode 100644
index 00000000..d457bf06
--- /dev/null
+++ b/Client/reasn-client/packages/ui/src/icons/IconProps.ts
@@ -0,0 +1,5 @@
+type IconProps = {
+    className?: string;
+    colors?: string[];
+    gradientTransform?: string;
+};
\ No newline at end of file

From 6037479eea62fbf9830b43abf1a1ff5c6943c722 Mon Sep 17 00:00:00 2001
From: Maciej Krawczyk <63869461+wzarek@users.noreply.github.com>
Date: Thu, 6 Jun 2024 20:45:18 +0200
Subject: [PATCH 3/3] feat: implemented hero section with card component
 (without RWD)

---
 Client/reasn-client/apps/web/app/page.tsx     |  2 +-
 .../packages/ui/src/components/Card.tsx       | 10 ++--
 .../ui/src/components/main/HeroCard.tsx       | 14 ------
 .../ui/src/components/main/HeroSection.tsx    | 31 ++++++++-----
 .../packages/ui/src/icons/Fire.tsx            | 46 +++++++++++++------
 .../packages/ui/src/icons/IconProps.ts        |  8 ++--
 6 files changed, 60 insertions(+), 51 deletions(-)
 delete mode 100644 Client/reasn-client/packages/ui/src/components/main/HeroCard.tsx

diff --git a/Client/reasn-client/apps/web/app/page.tsx b/Client/reasn-client/apps/web/app/page.tsx
index f16ce2dc..47a2f97e 100644
--- a/Client/reasn-client/apps/web/app/page.tsx
+++ b/Client/reasn-client/apps/web/app/page.tsx
@@ -4,7 +4,7 @@ import { HeroSection } from "@reasn/ui/src";
 
 export default function Web() {
   return (
-    <div className='bg-[#161618] text-white'>
+    <div className="bg-[#161618] text-white">
       <HeroSection />
     </div>
   );
diff --git a/Client/reasn-client/packages/ui/src/components/Card.tsx b/Client/reasn-client/packages/ui/src/components/Card.tsx
index 203c4012..9ceabaf5 100644
--- a/Client/reasn-client/packages/ui/src/components/Card.tsx
+++ b/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>
diff --git a/Client/reasn-client/packages/ui/src/components/main/HeroCard.tsx b/Client/reasn-client/packages/ui/src/components/main/HeroCard.tsx
deleted file mode 100644
index 05a19a94..00000000
--- a/Client/reasn-client/packages/ui/src/components/main/HeroCard.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-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>
-  )
-}
diff --git a/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx b/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx
index 19ec5ded..485291d1 100644
--- a/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx
+++ b/Client/reasn-client/packages/ui/src/components/main/HeroSection.tsx
@@ -1,18 +1,25 @@
-import React from 'react'
-import { Fire } from '../../icons/Fire'
-import { HeroCard } from './HeroCard'
+import React from "react";
+import { Fire } from "../../icons/Fire";
+import { Card, CardVariant } from "../Card";
 
 export const HeroSection = () => {
   return (
-    <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
+    <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>
-      <HeroCard />
+      <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>
-  )
-}
\ No newline at end of file
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/Fire.tsx b/Client/reasn-client/packages/ui/src/icons/Fire.tsx
index e4d47a48..4ae6646b 100644
--- a/Client/reasn-client/packages/ui/src/icons/Fire.tsx
+++ b/Client/reasn-client/packages/ui/src/icons/Fire.tsx
@@ -1,18 +1,38 @@
-import React from 'react'
+import React from "react";
 
 export const Fire = (props: IconProps) => {
-    const { className, colors, gradientTransform } = props
+  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
+      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>
-  )
-}
+  );
+};
diff --git a/Client/reasn-client/packages/ui/src/icons/IconProps.ts b/Client/reasn-client/packages/ui/src/icons/IconProps.ts
index d457bf06..edcc6a2d 100644
--- a/Client/reasn-client/packages/ui/src/icons/IconProps.ts
+++ b/Client/reasn-client/packages/ui/src/icons/IconProps.ts
@@ -1,5 +1,5 @@
 type IconProps = {
-    className?: string;
-    colors?: string[];
-    gradientTransform?: string;
-};
\ No newline at end of file
+  className?: string;
+  colors?: string[];
+  gradientTransform?: string;
+};