feat: made CTA section (ui only) (#50)

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

@@ -1,6 +1,10 @@
 "use client";
 
-import { HeroSection, QuickFilters } from "@reasn/ui/src/components/web";
+import {
+  CTASection,
+  HeroSection,
+  QuickFilters,
+} from "@reasn/ui/src/components/web";
 import { Navbar, Footer } from "@reasn/ui/src/components/shared";
 
 export default function Web() {
@@ -9,6 +13,7 @@ export default function Web() {
       <Navbar />
       <HeroSection />
       <QuickFilters />
+      <CTASection />
       <Footer />
     </div>
   );

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

@@ -1,2 +1,3 @@
 export { HeroSection } from "./main/HeroSection";
 export { QuickFilters } from "./main/QuickFilters";
+export { CTASection } from "./main/CTASection";

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

@@ -0,0 +1,23 @@
+import React from "react";
+
+export const CTASection = () => {
+  return (
+    <div className="mx-auto flex w-[55%] flex-wrap justify-between gap-5 py-36">
+      <h3 className="w-full text-xl font-semibold">
+        Nasze eventy, Twój powód do spotkań.
+      </h3>
+      <div className="group flex h-80 w-[35%] cursor-pointer flex-col justify-between rounded-3xl bg-gradient-to-t from-[#2e2e3460] to-[#23232660] p-10">
+        <div className="h-4/5 w-full rounded-xl border border-[#3E3E44] duration-500 group-hover:h-3/4"></div>
+        <p className="text-lg font-semibold duration-500 group-hover:text-3xl">
+          Dodaj swój event
+        </p>
+      </div>
+      <div className="group relative flex h-80 w-[60%] cursor-pointer flex-col justify-center overflow-clip rounded-3xl bg-gradient-to-r from-[#32346A] to-[#4E4F75] p-10">
+        <p className="z-10 text-6xl font-semibold text-[#828FFF] duration-500 [text-shadow:_0_2px_5px_rgb(0_0_0_/_40%)] group-hover:text-7xl">
+          Zobacz <br /> istniejące eventy
+        </p>
+        <div className="absolute right-0 top-1/2 h-4/5 w-3/5 -translate-y-1/2 rounded-l-xl bg-black duration-500 group-hover:h-full group-hover:w-2/3"></div>
+      </div>
+    </div>
+  );
+};