feat(products/shop): add coming soon tips

sites/crossbell.io/components/pages/products/Sections/ParallaxSection.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, PropsWithChildren } from "react";
+import React, { ComponentProps, PropsWithChildren } from "react";
 import { m, useTime, useTransform } from "framer-motion";
 import { Text, Title, UnstyledButton } from "@mantine/core";
 import BaseSection from "./BaseSection";
@@ -15,6 +15,7 @@ export default function ParallaxSection({
 	btnText,
 	btnHoverClassName,
 	link,
+	onClick,
 	image,
 	children,
 }: PropsWithChildren<{
@@ -24,6 +25,7 @@ export default function ParallaxSection({
 	btnText: string;
 	btnHoverClassName?: string;
 	link: string;
+	onClick?: (event: React.MouseEvent) => void;
 	image: ComponentProps<typeof Image>["src"];
 }>) {
 	// image animation
@@ -66,6 +68,7 @@ export default function ParallaxSection({
 						<UnstyledButton
 							component={Link}
 							href={link}
+							onClick={onClick}
 							target={link.startsWith("/") ? "_self" : "_blank"}
 							className={classNames(
 								"mt-50px relative flex flex-row items-center justify-center space-x-10px w-300px h-60px rounded-md bg-black transition-colors group",

sites/crossbell.io/components/pages/products/lazy.tsx

@@ -1,5 +1,6 @@
 import { m, useMotionTemplate, useTime, useTransform } from "framer-motion";
 import { useMediaQuery } from "@mantine/hooks";
+import { showNotification } from "@mantine/notifications";
 
 import { Image } from "~/shared/components/image";
 import config from "~/shared/config";
@@ -97,6 +98,11 @@ export default function LazyIndex() {
 					btnText="Shop now"
 					btnHoverClassName="hover:bg-[#E65040]"
 					link="/shop"
+					onClick={(event) => {
+						event.stopPropagation();
+						event.preventDefault();
+						showNotification({ message: "Coming Soon", color: "blue" });
+					}}
 					image={shopImage}
 				/>