landing page images

apps/crepe/src/app/components/gradient.tsx

@@ -9,7 +9,7 @@ export function Gradient({
       {...props}
       className={clsx(
         className,
-        "bg-[linear-gradient(115deg,var(--tw-gradient-stops))] from-[#fff1be] from-[28%] via-[#ee87cb] via-[70%] to-[#b060ff] sm:bg-[linear-gradient(145deg,var(--tw-gradient-stops))]"
+        "bg-[linear-gradient(115deg,var(--tw-gradient-stops))] from-[#fff1be] from-[28%] via-[#ee91ad] via-[70%] to-[#f57877] sm:bg-[linear-gradient(145deg,var(--tw-gradient-stops))]"
       )}
     />
   );

apps/crepe/src/app/page.tsx

@@ -54,37 +54,50 @@ function BentoSection() {
           eyebrow=""
           title="Instant cross-chain payments"
           description="Accept payment from 1000+ tokens on multiple chains. Payments complete in less than 5 seconds. We handle the swapping and bridging so that your customers don't have to."
-          graphic={<></>}
+          graphic={
+            <div className="h-80 bg-[url(/landing-page/any-chain.svg)] bg-[size:683px_364px] bg-center bg-no-repeat" />
+          }
           fade={["bottom"]}
           className="max-lg:rounded-t-4xl lg:col-span-3 lg:rounded-tl-4xl"
         />
         <BentoCard
           eyebrow=""
           title="Pay with a single transaction"
           description="No more wallet round-trips to make approval, swap, or bridging transactions. Your customers pay with a single transfer transaction."
-          graphic={<></>}
+          graphic={
+            <div className="h-80 bg-[url(/landing-page/one-transaction.svg)] bg-[size:683px_364px] bg-center bg-no-repeat" />
+          }
           fade={["bottom"]}
           className="lg:col-span-3 lg:rounded-tr-4xl"
         />
         <BentoCard
           eyebrow=""
           title="Fully permissionless"
           description="We never custody your funds and your funds will never be stuck in a contract. Payments can be permissionlessly completed by anyone."
-          graphic={<></>}
+          graphic={
+            <div className="h-80 bg-[url(/landing-page/permisionless.svg)] bg-[size:420px_370px] bg-center bg-no-repeat" />
+          }
+          fade={["bottom"]}
           className="lg:col-span-2 lg:rounded-bl-4xl"
         />
         <BentoCard
           eyebrow=""
           title="Support for all major wallets"
           description="Crepe supports payments from browser wallets like MetaMask and Rabby, WalletConnect, as well as exchanges like Coinbase and Binance."
-          graphic={<></>}
+          graphic={
+            <div className="h-80 bg-[url(/landing-page/support-wallets.svg)] bg-[size:420px_370px] bg-center bg-no-repeat" />
+          }
+          fade={["bottom"]}
           className="lg:col-span-2"
         />
         <BentoCard
           eyebrow=""
           title="Integrate within minutes"
           description="Get up and running with Crepe in as little as 10 minutes with little to no code."
-          graphic={<></>}
+          graphic={
+            <div className="h-80 bg-[url(/landing-page/quick-integration.svg)] bg-[size:420px_370px] bg-center bg-no-repeat" />
+          }
+          fade={["bottom"]}
           className="max-lg:rounded-b-4xl lg:col-span-2 lg:rounded-br-4xl"
         />
       </div>