Merge pull request #78 from placetopay-org/feature/redesign-home

feat: update home
placetopay-org · Aug 2, 2024 · 54a55f9 · 54a55f9
2 parents 14deab1 + 08e054c
commit 54a55f9
Show file tree

Hide file tree

Showing 15 changed files with 1,617 additions and 76 deletions.
diff --git a/src/components/BackgroundResourcePattern.jsx b/src/components/BackgroundResourcePattern.jsx
@@ -0,0 +1,25 @@
+import { motion, useMotionTemplate } from 'framer-motion'
+import { BGPatternSmall } from "./BGPatternSmall"
+
+export function BackgroundResourcePattern({ mouseX, mouseY, ...gridProps }) {
+    let maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`
+    let style = { maskImage, WebkitMaskImage: maskImage }
+
+    return (
+      <div className="pointer-events-none">
+        <div className="absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
+          <BGPatternSmall className="group absolute inset-x-0 w-full fill-black/[0.04] stroke-black/[0.05] dark:fill-white/[0.04] dark:stroke-white/[0.05]" />
+        </div>
+        <motion.div
+          className="absolute inset-0 rounded-2xl bg-gradient-to-r from-cyan-100 to-teal-100 opacity-0 transition duration-300 group-hover:opacity-100 dark:from-sky-950 dark:to-teal-950"
+          style={style}
+        />
+        <motion.div
+          className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
+          style={style}
+        >
+          <BGPatternSmall className="absolute inset-x-0 w-full fill-black/50 stroke-black/70 dark:fill-white/[0.04] dark:stroke-white/10" />
+        </motion.div>
+      </div>
+    )
+  }
diff --git a/src/components/Benefits.jsx b/src/components/Benefits.jsx
@@ -8,6 +8,7 @@ import { WalletTwoToneIcon } from '@/components/iconsax/WalletTwoToneIcon'
 import { SecuritySafeTwoToneIcon } from '@/components/iconsax/SecuritySafeTwoToneIcon'
 import { LampChargeTwoToneIcon } from '@/components/iconsax/LampChargeTwoToneIcon'
 import { useLocale } from './LocaleProvider'
+import { useMouseMove } from '@/hooks/useMouseMove'
 
 const resources = [
   {
@@ -140,14 +141,7 @@ function ResourcePattern({ mouseX, mouseY, ...gridProps }) {
 }
 
 function Resource({ resource }) {
-  let mouseX = useMotionValue(0)
-  let mouseY = useMotionValue(0)
-
-  function onMouseMove({ currentTarget, clientX, clientY }) {
-    let { left, top } = currentTarget.getBoundingClientRect()
-    mouseX.set(clientX - left)
-    mouseY.set(clientY - top)
-  }
+  const { mouseX, mouseY, onMouseMove } = useMouseMove()
 
   return (
     <div

diff --git a/src/components/HomeCard.jsx b/src/components/HomeCard.jsx
@@ -0,0 +1,46 @@
+import { useMouseMove } from '@/hooks/useMouseMove'
+import { BackgroundResourcePattern } from './BackgroundResourcePattern'
+import { ArrowRight } from 'iconsax-react'
+
+function Icon({ icon: Icon }) {
+  return (
+    <div className="flex items-center justify-center overflow-hidden pt-6 px-2 md:pt-3">
+      <Icon className="welcome-icons w-72 h-52 md:h-36 md:w-44 transition-colors duration-300" />
+    </div>
+  )
+}
+
+export const HomeCard = ({ title, description, href, icon, action }) => {
+  const { mouseX, mouseY, onMouseMove } = useMouseMove()
+  return (
+    <a
+      href={href}
+      onMouseMove={onMouseMove}
+      className="group relative flex rounded-2xl bg-gray-50 transition-shadow hover:shadow-md hover:shadow-gray-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5 "
+    >
+      <BackgroundResourcePattern mouseX={mouseX} mouseY={mouseY} />
+      <div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/7.5 group-hover:ring-gray-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
+      <div className="flex flex-col relative rounded-2xl">
+        <Icon icon={icon} />
+        <div className="flex flex-1 flex-col justify-between min-h-fit -mt-4 px-3 pb-3">
+          <div>
+            <h3 className="mt-4 text-center text-base font-semibold leading-7 text-gray-900 dark:text-white">
+              {title}
+            </h3>
+            <p className="mt-1 text-center text-[12px] leading-4 text-gray-400">
+              {description}
+            </p>
+          </div>
+
+          <div className="mt-3 flex items-center justify-between">
+            <span className="text-xs font-medium text-primary-400">
+              {action}
+            </span>
+
+            <ArrowRight className="h-4 w-4 text-primary-400" />
+          </div>
+        </div>
+      </div>
+    </a>
+  )
+}
diff --git a/src/components/welcomeIcons/ACSIcon.jsx b/src/components/welcomeIcons/ACSIcon.jsx
@@ -0,0 +1,105 @@
+import { twMerge } from 'tailwind-merge'
+
+export const ACSIcon = ({ className }) => {
+  return (
+    <svg
+      className={twMerge(className, 'acs')}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -10 150 140"
+      width="146"
+      height="113"
+      fill="none"
+    >
+      <path
+        d="m41.467 76.18-.004-.004c-1.454-1.073-2.83-2.858-3.846-4.895C36.602 69.245 36 67.061 36 65.243V24.96c0-2.568.983-5.32 2.62-7.68 1.636-2.36 3.87-4.25 6.28-5.16l.002-.001L72.248 1.877l.002-.001c1.273-.469 3.012-.721 4.8-.721 1.787 0 3.526.252 4.799.72l.002.002 27.343 10.24.003.002c2.384.91 4.607 2.798 6.231 5.158 1.625 2.36 2.594 5.11 2.572 7.674v40.292c0 1.818-.602 3.989-1.617 6.019-1.014 2.029-2.392 3.818-3.852 4.919l-.002.001-27.35 20.438-.003.002c-2.208 1.662-5.17 2.522-8.176 2.522-3.007 0-5.968-.86-8.177-2.522l-.002-.002-27.354-20.44Z"
+        fill="#F3F4F6"
+        stroke="#D1D5DB"
+        strokeWidth="2"
+      />
+      <path
+        d="M90.913 37.224v4.377c-.917-.125-1.96-.187-3.127-.208v-4.169c0-6.565-1.855-10.942-10.943-10.942-9.087 0-10.942 4.377-10.942 10.942v4.169c-1.168.02-2.21.083-3.127.208v-4.377c0-6.044 1.46-14.069 14.07-14.069s14.069 8.025 14.069 14.07Z"
+        fill="#9CA3AF"
+      />
+      <path
+        d="M90.913 41.602c-.917-.126-1.96-.188-3.127-.209H65.901c-1.168.02-2.21.083-3.127.209C57.46 42.248 56 44.852 56 51.815v4.168c0 8.338 2.084 10.422 10.422 10.422h20.843c8.337 0 10.422-2.084 10.422-10.422v-4.168c0-6.962-1.46-9.567-6.774-10.213ZM69.986 55.379a2.192 2.192 0 0 1-1.48.604c-.27 0-.542-.062-.792-.166a2.152 2.152 0 0 1-.688-.438 2.192 2.192 0 0 1-.604-1.48c0-.27.062-.542.166-.792.105-.25.25-.48.438-.688.209-.187.417-.333.688-.438a2.082 2.082 0 0 1 2.272.438c.188.209.333.438.438.688.104.25.166.521.166.792 0 .542-.229 1.084-.604 1.48Zm8.775-.688c-.104.25-.25.48-.438.688a2.192 2.192 0 0 1-1.48.604 2.155 2.155 0 0 1-1.48-.604 2.406 2.406 0 0 1-.437-.688 2.075 2.075 0 0 1-.167-.792c0-.563.23-1.084.605-1.48.77-.771 2.167-.771 2.96 0 .374.396.604.917.604 1.48 0 .271-.063.542-.167.792Zm7.9.688a2.192 2.192 0 0 1-1.48.604 2.192 2.192 0 0 1-1.48-.604 2.153 2.153 0 0 1-.605-1.48c0-.563.23-1.084.605-1.48.792-.771 2.188-.771 2.96 0 .083.104.166.209.25.334.083.104.146.229.187.354.063.125.105.25.125.375.021.146.042.292.042.417 0 .542-.23 1.084-.604 1.48Z"
+        fill="#9CA3AF"
+      />
+      <g clip-path="url(#a)">
+        <mask
+          id="b"
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="46"
+          width="50"
+          height="43"
+          fill="#000"
+        >
+          <path fill="#fff" d="M0 46h50v43H0z" />
+          <path d="M1 55a8 8 0 0 1 8-8h32a8 8 0 0 1 8 8v22a8 8 0 0 1-8 8H9a8 8 0 0 1-8-8V55Z" />
+        </mask>
+        <path fill="#9CA3AF" d="M1 47h48v11H1z" />
+        <path fill="#F3F4F6" d="M1 58h48v27H1z" />
+        <path
+          d="M15.6 77h-4.8c-.984 0-1.8-.816-1.8-1.8 0-.984.816-1.8 1.8-1.8h4.8c.984 0 1.8.816 1.8 1.8 0 .984-.816 1.8-1.8 1.8Zm15.2 0h-9.6c-.984 0-1.8-.816-1.8-1.8 0-.984.816-1.8 1.8-1.8h9.6c.984 0 1.8.816 1.8 1.8 0 .984-.816 1.8-1.8 1.8Z"
+          fill="#9CA3AF"
+        />
+      </g>
+      <path
+        d="M0 55a9 9 0 0 1 9-9h32a9 9 0 0 1 9 9h-2a7 7 0 0 0-7-7H9a7 7 0 0 0-7 7H0Zm50 25a9 9 0 0 1-9 9H9a9 9 0 0 1-9-9l2-3c0 2.21 3.134 4 7 4h32c3.866 0 7-1.79 7-4l2 3ZM9 89a9 9 0 0 1-9-9V55a9 9 0 0 1 9-9v2a7 7 0 0 0-7 7v22c0 2.21 3.134 4 7 4v8Zm32-43a9 9 0 0 1 9 9v25a9 9 0 0 1-9 9v-8c3.866 0 7-1.79 7-4V55a7 7 0 0 0-7-7v-2Z"
+        fill="#D1D5DB"
+        mask="url(#b)"
+      />
+      <g clip-path="url(#c)">
+        <mask
+          id="d"
+          maskUnits="userSpaceOnUse"
+          x="106"
+          y="12.958"
+          width="40"
+          height="35"
+          fill="#000"
+        >
+          <path fill="#fff" d="M106 12.958h40v35h-40z" />
+          <path d="M107 20.292a6.334 6.334 0 0 1 6.333-6.334h25.334A6.334 6.334 0 0 1 145 20.292v17.416a6.334 6.334 0 0 1-6.333 6.334h-25.334A6.334 6.334 0 0 1 107 37.708V20.292Z" />
+        </mask>
+        <path fill="#9CA3AF" d="M107 13.958h38v8.708h-38z" />
+        <path fill="#F3F4F6" d="M107 22.666h38v21.375h-38z" />
+        <path
+          d="M118.558 37.708h-3.8a1.435 1.435 0 0 1-1.425-1.425c0-.779.646-1.425 1.425-1.425h3.8c.779 0 1.425.646 1.425 1.425 0 .78-.646 1.425-1.425 1.425Zm12.034 0h-7.6a1.435 1.435 0 0 1-1.425-1.425c0-.779.646-1.425 1.425-1.425h7.6c.779 0 1.425.646 1.425 1.425 0 .78-.646 1.425-1.425 1.425Z"
+          fill="#9CA3AF"
+        />
+      </g>
+      <path
+        d="M106.208 20.292a7.125 7.125 0 0 1 7.125-7.125h25.334a7.125 7.125 0 0 1 7.125 7.125h-1.584a5.541 5.541 0 0 0-5.541-5.542h-25.334a5.541 5.541 0 0 0-5.541 5.542h-1.584Zm39.584 19.791a7.125 7.125 0 0 1-7.125 7.125h-25.334a7.125 7.125 0 0 1-7.125-7.125l1.584-2.375c0 1.75 2.481 3.167 5.541 3.167h25.334c3.06 0 5.541-1.418 5.541-3.167l1.584 2.375Zm-32.459 7.125a7.125 7.125 0 0 1-7.125-7.125V20.292a7.125 7.125 0 0 1 7.125-7.125v1.583a5.541 5.541 0 0 0-5.541 5.542v17.416c0 1.75 2.481 3.167 5.541 3.167v6.333Zm25.334-34.041a7.125 7.125 0 0 1 7.125 7.125v19.791a7.125 7.125 0 0 1-7.125 7.125v-6.333c3.06 0 5.541-1.418 5.541-3.167V20.292a5.541 5.541 0 0 0-5.541-5.542v-1.583Z"
+        fill="#D1D5DB"
+        mask="url(#d)"
+      />
+      <path
+        d="M23 87.155a8 8 0 0 1 8-8h91.491a8 8 0 0 1 8 8v15.364a8 8 0 0 1-8 8H31a8 8 0 0 1-8-8V87.155Z"
+        fill="#F3F4F6"
+      />
+      <path
+        d="M22 87.155a9 9 0 0 1 9-9h91.491a9 9 0 0 1 9 9h-2a7 7 0 0 0-7-7H31a7 7 0 0 0-7 7h-2Zm109.491 16.364a9 9 0 0 1-9 9H31a9 9 0 0 1-9-9l2-1c0 3.313 3.134 6 7 6h91.491c3.866 0 7-2.687 7-6l2 1Zm-100.491 9a9 9 0 0 1-9-9V87.155a9 9 0 0 1 9-9v2a7 7 0 0 0-7 7v15.364c0 3.313 3.134 6 7 6v4Zm91.491-34.364a9 9 0 0 1 9 9v16.364a9 9 0 0 1-9 9v-4c3.866 0 7-2.687 7-6V87.155a7 7 0 0 0-7-7v-2Z"
+        fill="#D1D5DB"
+      />
+      <path
+        d="m37.768 98.519.16-2.474-2.072 1.387L35 95.924l2.23-1.087L35 93.75l.856-1.508 2.072 1.387-.16-2.474h1.72l-.167 2.474 2.071-1.387.857 1.508-2.225 1.087 2.225 1.087-.857 1.508-2.071-1.387.166 2.474h-1.72Zm15.248 0 .16-2.474-2.07 1.387-.858-1.508 2.231-1.087-2.23-1.087.856-1.508 2.071 1.387-.16-2.474h1.72l-.166 2.474 2.07-1.387.857 1.508-2.224 1.087 2.224 1.087-.856 1.508-2.071-1.387.166 2.474h-1.72Zm15.249 0 .16-2.474-2.071 1.387-.857-1.508 2.23-1.087-2.23-1.087.857-1.508 2.07 1.387-.16-2.474h1.72l-.166 2.474 2.071-1.387.857 1.508-2.225 1.087 2.225 1.087-.857 1.508-2.07-1.387.165 2.474h-1.72Zm15.249 0 .16-2.474-2.072 1.387-.856-1.508 2.23-1.087-2.23-1.087.856-1.508 2.071 1.387-.16-2.474h1.72l-.166 2.474 2.07-1.387.857 1.508-2.224 1.087 2.224 1.087-.856 1.508-2.071-1.387.166 2.474h-1.72Zm15.248 0 .16-2.474-2.071 1.387-.857-1.508 2.231-1.087-2.23-1.087.856-1.508 2.07 1.387-.159-2.474h1.72l-.167 2.474 2.071-1.387.857 1.508-2.224 1.087 2.224 1.087-.857 1.508-2.071-1.387.167 2.474h-1.72Zm15.249 0 .159-2.474-2.071 1.387-.856-1.508 2.231-1.087-2.231-1.087.856-1.508 2.071 1.387-.159-2.474h1.719l-.166 2.474 2.071-1.387.856 1.508-2.224 1.087 2.224 1.087-.856 1.508-2.071-1.387.166 2.474h-1.719Z"
+        fill="#9CA3AF"
+      />
+      <defs>
+        <clipPath id="a">
+          <path
+            d="M1 55a8 8 0 0 1 8-8h32a8 8 0 0 1 8 8v22a8 8 0 0 1-8 8H9a8 8 0 0 1-8-8V55Z"
+            fill="#fff"
+          />
+        </clipPath>
+        <clipPath id="c">
+          <path
+            d="M107 20.292a6.334 6.334 0 0 1 6.333-6.334h25.334A6.334 6.334 0 0 1 145 20.292v17.416a6.334 6.334 0 0 1-6.333 6.334h-25.334A6.334 6.334 0 0 1 107 37.708V20.292Z"
+            fill="#fff"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}