Merge pull request #17 from jatimdevday/feat-cta-improvments

fix: cta ui improvements

src/assets/svgs/Click.tsx

@@ -0,0 +1,21 @@
+import React, { SVGProps } from "react"
+
+const Click = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={18}
+    height={21}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#212121"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M12.042 20.172 10.684 15.1m0 0-2.51 2.225.569-9.47 5.227 7.917-3.286-.672ZM9 .75V3m5.834.166-1.591 1.591M17.25 9H15M4.757 13.243l-1.59 1.59M3 9H.75m4.007-4.243-1.59-1.59"
+    />
+  </svg>
+)
+export default Click
+

src/assets/svgs/Star3.tsx

@@ -0,0 +1,18 @@
+import React, { SVGProps } from "react"
+
+const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={79}
+    height={98}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#CAF93A"
+      d="M-.916-53.48c1.01-5.451 8.822-5.451 9.832 0l5.209 28.099c.723 3.9 5.48 5.446 8.358 2.716l20.73-19.67c4.022-3.817 10.341.774 7.954 5.779L38.866-10.764c-1.708 3.58 1.233 7.628 5.165 7.11l28.333-3.73c5.497-.723 7.91 6.706 3.038 9.352L50.29 15.606c-3.486 1.893-3.486 6.895 0 8.788l25.113 13.637c4.873 2.646 2.459 10.075-3.038 9.351l-28.333-3.729c-3.932-.518-6.873 3.53-5.165 7.11l12.301 25.794c2.387 5.004-3.932 9.595-7.954 5.779l-20.73-19.67c-2.877-2.73-7.635-1.185-8.358 2.715L8.916 93.48c-1.01 5.451-8.822 5.451-9.832 0L-6.125 65.38c-.723-3.9-5.48-5.446-8.358-2.716l-20.73 19.67c-4.022 3.817-10.341-.774-7.954-5.778l12.301-25.794c1.708-3.58-1.233-7.628-5.165-7.11l-28.333 3.73c-5.497.723-7.91-6.706-3.038-9.352l25.113-13.637c3.486-1.893 3.486-6.895 0-8.788L-67.402 1.969c-4.873-2.646-2.459-10.075 3.038-9.351l28.333 3.729c3.932.518 6.873-3.53 5.165-7.11l-12.301-25.794c-2.387-5.004 3.932-9.595 7.954-5.779l20.73 19.67c2.877 2.73 7.635 1.185 8.358-2.715L-.916-53.48Z"
+    />
+  </svg>
+)
+export default SvgComponent
+

src/screens/landing/sections/Cta.tsx

@@ -1,36 +1,33 @@
-import DarkStar from "@/assets/svgs/DarkStar";
+import Star from "@/assets/svgs/Star";
+import Star3 from "@/assets/svgs/Star3";
+import World2 from "@/assets/svgs/World2";
+import Click from "@/assets/svgs/Click";
 import { Button } from "@/components/Button";
 import { Content } from "@/lib/schema";
-import Image from "next/image";
 import React from "react";
+import Link from "next/link";
 
 const Cta = ({ content }: { content?: Content }) => {
   return (
-    <div className="bg-secondary py-16 md:py-24">
-      <div className="container mx-auto flex flex-col md:flex-row items-center justify-between">
-        <div className="w-[100%] md:w-[63%] text-center md:text-left mb-6 md:mb-0">
-          <div className="flex items-center gap-3 justify-center md:justify-start">
-            <DarkStar />
-            <p className="font-semibold">Main Event</p>
-            <DarkStar />
+    <div className="flex justify-center bg-secondary">
+      <div className="relative w-full text-center py-16 md:py-24">
+        <Star3 className="absolute top-0 left-0" />
+        <div className="mb-6">
+          <div className="flex items-center gap-3 justify-center">
+            <Star />
+            <p className="font-semibold text-white">Main Event</p>
+            <Star />
           </div>
-          <p className="font-semibold text-3xl md:text-[32px] leading-snug mb-6 mt-4">
-            {content?.registration_tagline}
+          <p className="font-semibold text-3xl md:text-[32px] leading-snug mb-12 mt-4 text-white mx-12">
+            Dapatkan Tiketmu Segera!
           </p>
-          <a href={content?.registration_link}>
-            <Button variant="secondary">Daftar Sekarang</Button>
-          </a>
-        </div>
-        <div className="w-[100%] md:w-[30%] hidden md:block">
-          <Image
-            quality={100}
-            src="/character-angry.png"
-            alt=""
-            layout="responsive"
-            width={300}
-            height={200}
-          />
+          <Link href={content?.registration_link || "#"} target="_blank">
+            <Button variant="default">
+              Daftar Sekarang <Click />
+            </Button>
+          </Link>
         </div>
+        <World2 className="absolute bottom-0 right-0 w-24 h-24 md:w-32 md:h-32" />
       </div>
     </div>
   );