ui-landing-page 6.1.0

package/src/components/LandingPage/common/icons/social-icons/LocationIcon.tsx

@@ -0,0 +1,16 @@
+export default function LocationIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        d="M9.99996 18.3334C9.80551 18.3334 9.63885 18.2779 9.49996 18.1667C9.36107 18.0556 9.2569 17.9098 9.18746 17.7292C8.92357 16.9515 8.59024 16.2223 8.18746 15.5417C7.79857 14.8612 7.24996 14.0626 6.54163 13.1459C5.83329 12.2292 5.2569 11.3542 4.81246 10.5209C4.3819 9.68758 4.16663 8.68064 4.16663 7.50008C4.16663 5.87508 4.72913 4.50008 5.85413 3.37508C6.99302 2.23619 8.37496 1.66675 9.99996 1.66675C11.625 1.66675 13 2.23619 14.125 3.37508C15.2638 4.50008 15.8333 5.87508 15.8333 7.50008C15.8333 8.76397 15.5902 9.81952 15.1041 10.6667C14.6319 11.5001 14.0833 12.3265 13.4583 13.1459C12.7083 14.1459 12.1388 14.9792 11.75 15.6459C11.375 16.2987 11.0625 16.9931 10.8125 17.7292C10.743 17.9237 10.6319 18.0765 10.4791 18.1876C10.3402 18.2848 10.1805 18.3334 9.99996 18.3334ZM9.99996 15.3542C10.2361 14.882 10.5 14.4167 10.7916 13.9584C11.0972 13.5001 11.5416 12.889 12.125 12.1251C12.7222 11.3473 13.2083 10.632 13.5833 9.97925C13.9722 9.31258 14.1666 8.48619 14.1666 7.50008C14.1666 6.3473 13.7569 5.36814 12.9375 4.56258C12.1319 3.74314 11.1527 3.33341 9.99996 3.33341C8.84718 3.33341 7.86107 3.74314 7.04163 4.56258C6.23607 5.36814 5.83329 6.3473 5.83329 7.50008C5.83329 8.48619 6.02079 9.31258 6.39579 9.97925C6.78468 10.632 7.27774 11.3473 7.87496 12.1251C8.45829 12.889 8.89579 13.5001 9.18746 13.9584C9.49302 14.4167 9.76385 14.882 9.99996 15.3542ZM9.99996 9.58341C10.5833 9.58341 11.0763 9.38203 11.4791 8.97925C11.8819 8.57647 12.0833 8.08341 12.0833 7.50008C12.0833 6.91675 11.8819 6.42369 11.4791 6.02091C11.0763 5.61814 10.5833 5.41675 9.99996 5.41675C9.41663 5.41675 8.92357 5.61814 8.52079 6.02091C8.11801 6.42369 7.91663 6.91675 7.91663 7.50008C7.91663 8.08341 8.11801 8.57647 8.52079 8.97925C8.92357 9.38203 9.41663 9.58341 9.99996 9.58341Z"
+        fill="#1D1B20"
+      />
+    </svg>
+  );
+}

package/src/components/LandingPage/common/icons/social-icons/TelegramIcon.tsx

@@ -0,0 +1,23 @@
+import { Theme } from "../../ui-kit/organisms/ProfileSection";
+
+interface Props {
+  theme: Theme;
+}
+
+export default function TelegramIcon(props: Props) {
+  const { theme } = props;
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="10.5" fill="currentColor" />
+      <path
+        d="M17.2399 7.65659C17.3334 7.05249 16.7591 6.57567 16.2219 6.8115L5.52361 11.5086C5.13842 11.6778 5.1666 12.2612 5.5661 12.3884L7.77236 13.091C8.19344 13.2251 8.64939 13.1558 9.01709 12.9017L13.9912 9.4652C14.1412 9.36157 14.3047 9.57485 14.1766 9.70697L10.5961 13.3985C10.2488 13.7566 10.3177 14.3634 10.7355 14.6254L14.7442 17.1392C15.1938 17.4212 15.7723 17.1379 15.8564 16.5946L17.2399 7.65659Z"
+        fill={theme === Theme.Light ? "white" : "black"}
+      />
+    </svg>
+  );
+}

package/src/components/LandingPage/common/icons/social-icons/ThreadsIcon.tsx

@@ -0,0 +1,15 @@
+export default function ThreadsIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.735 11.2696C16.6488 11.2283 16.5613 11.1886 16.4727 11.1505C16.3183 8.30606 14.764 6.6776 12.1542 6.66094C12.1424 6.66086 12.1307 6.66086 12.1188 6.66086C10.5578 6.66086 9.25957 7.32718 8.46049 8.53966L9.89581 9.52425C10.4927 8.61857 11.4296 8.4255 12.1195 8.4255C12.1275 8.4255 12.1355 8.4255 12.1434 8.42557C13.0027 8.43105 13.6511 8.6809 14.0708 9.16813C14.3762 9.52284 14.5805 10.013 14.6816 10.6316C13.9198 10.5022 13.0958 10.4623 12.215 10.5128C9.73369 10.6558 8.13853 12.1029 8.24566 14.1137C8.30003 15.1337 8.80817 16.0112 9.67643 16.5845C10.4105 17.0691 11.356 17.306 12.3387 17.2524C13.6363 17.1812 14.6543 16.6861 15.3646 15.7808C15.9039 15.0933 16.2451 14.2024 16.3957 13.0798C17.0141 13.453 17.4725 13.9442 17.7256 14.5346C18.156 15.5382 18.1811 17.1875 16.8354 18.5321C15.6563 19.71 14.239 20.2196 12.0971 20.2353C9.72114 20.2177 7.92422 19.4557 6.75592 17.9705C5.6619 16.5798 5.09651 14.571 5.07541 12C5.09651 9.42894 5.6619 7.42017 6.75592 6.02945C7.92422 4.54426 9.72111 3.78229 12.0971 3.76464C14.4903 3.78243 16.3185 4.54806 17.5315 6.04042C18.1263 6.77225 18.5748 7.69258 18.8704 8.76566L20.5524 8.3169C20.194 6.99606 19.6302 5.85789 18.8629 4.91396C17.3078 3.0007 15.0334 2.02033 12.1029 2H12.0912C9.1667 2.02026 6.9178 3.00435 5.40698 4.92493C4.06257 6.634 3.36908 9.01205 3.34578 11.993L3.3457 12L3.34578 12.007C3.36908 14.9879 4.06257 17.366 5.40698 19.0751C6.9178 20.9956 9.1667 21.9798 12.0912 22H12.1029C14.703 21.982 16.5357 21.3013 18.0455 19.7928C20.0208 17.8194 19.9613 15.3457 19.3103 13.8272C18.8432 12.7382 17.9527 11.8538 16.735 11.2696ZM12.2458 15.4903C11.1583 15.5516 10.0285 15.0634 9.97274 14.0179C9.93145 13.2427 10.5244 12.3777 12.3125 12.2747C12.5173 12.2629 12.7182 12.2571 12.9156 12.2571C13.5651 12.2571 14.1727 12.3202 14.7251 12.4409C14.519 15.0141 13.3105 15.4319 12.2458 15.4903Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/LandingPage/common/icons/social-icons/TiktokIcon.tsx

@@ -0,0 +1,16 @@
+export default function TiktokIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}>
+      <path
+        d="M19.739 7.89054V10.9144C19.2107 10.8628 18.5242 10.7427 17.7648 10.4644C16.7732 10.1009 16.0352 9.60386 15.5517 9.21901V15.3307L15.5394 15.3116C15.5472 15.4328 15.5517 15.5562 15.5517 15.6807C15.5517 18.7158 13.0829 21.1865 10.0476 21.1865C7.0123 21.1865 4.54346 18.7158 4.54346 15.6807C4.54346 12.6457 7.0123 10.1739 10.0476 10.1739C10.3448 10.1739 10.6365 10.1974 10.9214 10.2434V13.2235C10.6477 13.1259 10.3538 13.0731 10.0476 13.0731C8.6107 13.0731 7.44078 14.2423 7.44078 15.6807C7.44078 17.1192 8.6107 18.2883 10.0476 18.2883C11.4845 18.2883 12.6544 17.118 12.6544 15.6807C12.6544 15.6269 12.6533 15.573 12.6499 15.5192V3.64258H15.6706C15.6818 3.8984 15.6919 4.15646 15.7031 4.41228C15.7233 4.91607 15.9028 5.39965 16.2158 5.79573C16.5825 6.26137 17.1243 6.80219 17.8848 7.23416C18.5971 7.63697 19.2656 7.81088 19.739 7.89279V7.89054Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/LandingPage/common/icons/social-icons/TwitterIcon.tsx

@@ -0,0 +1,28 @@
+export default function TwitterIcon() {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_1633_8735)">
+        <path
+          d="M15.4409 4.10547H17.6839L12.7837 9.70615L18.5484 17.3274H14.0347L10.4993 12.7052L6.45409 17.3274H4.20975L9.45106 11.3369L3.9209 4.10547H8.54926L11.7449 8.33039L15.4409 4.10547ZM14.6537 15.9849H15.8966L7.87392 5.37749H6.5402L14.6537 15.9849Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1633_8735">
+          <rect
+            width="15.9573"
+            height="15.9573"
+            fill="white"
+            fillOpacity="1"
+            transform="translate(3.25586 2.83984)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/components/LandingPage/common/icons/social-icons/YoutubeIcon.tsx

@@ -0,0 +1,26 @@
+import { Theme } from "../../ui-kit/organisms/ProfileSection";
+
+interface Props {
+  theme: Theme;
+}
+
+export default function YoutubeIcon(props: Props) {
+  const { theme } = props;
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1.68338 7.45583C1.77978 5.97175 2.97296 4.80867 4.45835 4.73508C6.60929 4.62852 9.6836 4.5 12 4.5C14.3164 4.5 17.3907 4.62852 19.5417 4.73508C21.027 4.80867 22.2202 5.97175 22.3166 7.45583C22.409 8.8777 22.5 10.6272 22.5 12C22.5 13.3728 22.409 15.1223 22.3166 16.5442C22.2202 18.0283 21.027 19.1913 19.5417 19.2649C17.3907 19.3715 14.3164 19.5 12 19.5C9.6836 19.5 6.60929 19.3715 4.45835 19.2649C2.97296 19.1913 1.77978 18.0283 1.68338 16.5442C1.59102 15.1223 1.5 13.3728 1.5 12C1.5 10.6272 1.59102 8.87769 1.68338 7.45583Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.75 9V15L15.75 12L9.75 9Z"
+        fill={theme === Theme.Light ? "white" : "black"}
+      />
+    </svg>
+  );
+}

package/src/components/LandingPage/common/icons/social-icons/index.tsx

@@ -0,0 +1,19 @@
+import FacebookIcon from "./FacebookIcon";
+import InstagramIcon from "./InstagramIcon";
+import LinkedinIcon from "./LinkedinIcon";
+import ThreadsIcon from "./ThreadsIcon";
+import TwitterIcon from "./TwitterIcon";
+import TiktokIcon from "./TiktokIcon";
+import LocationIcon from "./LocationIcon";
+import PhoneIcon from "../PhoneIcon";
+
+export {
+  FacebookIcon,
+  InstagramIcon,
+  LinkedinIcon,
+  ThreadsIcon,
+  TwitterIcon,
+  TiktokIcon,
+  LocationIcon,
+  PhoneIcon,
+};

package/src/components/LandingPage/common/shadcn-ui-kit/Dialog.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+import { cn } from "../../utils/helper";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        )}
+        {...props}>
+        {children}
+        {/*<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">*/}
+        {/*  <X className="h-4 w-4" />*/}
+        {/*  <span className="sr-only">Close</span>*/}
+        {/*</DialogPrimitive.Close>*/}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/components/LandingPage/common/shadcn-ui-kit/input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { cn } from "@/utils/helper";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "border-input bg-background file:bg-transparent placeholder:text-muted-foreground flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/components/LandingPage/common/shadcn-ui-kit/select.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/utils/helper"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative max-h-96 min-w-[8rem] overflow-hidden rounded-md border",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-pointer items-center rounded-sm py-1.5 pl-8 pr-2 text-sm",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}

package/src/components/LandingPage/common/ui-kit/atomics/ BaseModal.tsx

@@ -0,0 +1,60 @@
+import { X } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogOverlay,
+} from "../../shadcn-ui-kit/Dialog";
+import { cn } from "@phygitallabs/helpers";
+import { CSSProperties } from "react";
+
+interface Props {
+  isOpen: boolean;
+  toggleModal: () => void;
+  children: React.ReactElement | string | React.ReactElement[];
+  className?: string;
+  hasExitIcon?: boolean;
+  closeIconClassName?: string;
+  style?: CSSProperties;
+}
+const BaseModal = (props: Props) => {
+  const {
+    isOpen,
+    toggleModal,
+    children,
+    hasExitIcon = false,
+    className,
+    style,
+    closeIconClassName,
+  } = props;
+  return (
+    <Dialog open={isOpen} onOpenChange={toggleModal}>
+      <DialogOverlay className="bg-opacity-60" />
+      <DialogContent
+        className={cn(
+          "max-h-[70%] w-[95%] gap-0 rounded-md border-neutral-8 bg-white/10 text-neutral-8 p-0 backdrop-blur-lg",
+          !!className && className
+        )}
+        style={style}
+      >
+        {hasExitIcon && (
+          <button
+            onClick={toggleModal}
+            className="sticky right-0 top-0 z-50 ml-auto w-fit scale-75 focus:outline-none lg:scale-100"
+          >
+            <div
+              className={cn(
+                "rounded-3xl border border-neutral-8 bg-white/5 p-2 backdrop-blur text-white",
+                !!closeIconClassName && closeIconClassName
+              )}
+            >
+              <X  />
+            </div>
+          </button>
+        )}
+        <div className="z-10 p-3">{children}</div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default BaseModal;

package/src/components/LandingPage/common/ui-kit/atomics/BaseButton.tsx

@@ -0,0 +1,25 @@
+import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface BaseButtonProps
+  extends DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {}
+
+const BaseButton = (props: BaseButtonProps) => {
+  const { children, className, ...rest } = props;
+
+  return (
+    <button
+      className={twMerge(
+        "bg-white rounded-xl text-black p-2 px-4 text-md",
+        className
+      )}
+      {...rest}>
+      {children}
+    </button>
+  );
+};
+
+export default BaseButton;

package/src/components/LandingPage/common/ui-kit/atomics/BaseIcon.tsx

@@ -0,0 +1,18 @@
+export interface IconProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+interface BaseIconProps extends IconProps {
+  as: React.ComponentType<IconProps>;
+}
+
+const BaseIcon = (props: BaseIconProps) => {
+  const { as: Icon, color, ...rest } = props;
+  return <Icon color={color} {...rest} />;
+};
+
+export default BaseIcon;

package/src/components/LandingPage/common/ui-kit/atomics/BaseInput.tsx

@@ -0,0 +1,58 @@
+import { twMerge } from "tailwind-merge";
+import { InputMask } from "primereact/inputmask";
+import { ChangeEvent } from "react";
+import IconCalendar from "../../icons/IconCalendar";
+
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const INPUT_MASK_ID = "input-mask";
+
+const BaseInput = (props: Props) => {
+  const { className, type, value, onChange, ...rest } = props;
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const el: any = document.querySelector(`#${INPUT_MASK_ID}`)!;
+      el.blur();
+    }
+  };
+
+  if (type === "date")
+    return (
+      <div className="relative w-full">
+        <InputMask
+          id={INPUT_MASK_ID}
+          className={twMerge(
+            "bg-white rounded-md p-2 px-4 text-black placeholder:text-sm text-sm",
+            className
+          )}
+          mask="99/99/9999"
+          placeholder="dd/mm/yyyy"
+          slotChar="dd/mm/yyyy"
+          onKeyUp={handleKeyPress}
+          onChange={(e) =>
+            onChange && onChange(e as unknown as ChangeEvent<HTMLInputElement>)
+          }
+          {...rest}
+        />
+        <div className="pointer-events-none absolute text-black right-2 top-1/2 -translate-y-1/2 text-neutral-50">
+          <IconCalendar />
+        </div>
+      </div>
+    );
+
+  return (
+    <input
+      className={twMerge(
+        "bg-white rounded-md p-2 px-4 text-black placeholder:text-sm text-sm",
+        className
+      )}
+      type="text"
+      value={value}
+      onChange={onChange}
+      {...rest}
+    />
+  );
+};
+
+export default BaseInput;