From b68c9d7da67077fe7df06a88965ee21d008f3c6b Mon Sep 17 00:00:00 2001 From: youngancient Date: Sun, 23 Feb 2025 06:54:30 +0100 Subject: [PATCH 01/10] mod: working on multipayment options feat --- src/components/MultiPaymentOptions.tsx | 7 +++++++ src/pages/home.tsx | 11 ++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 src/components/MultiPaymentOptions.tsx diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx new file mode 100644 index 0000000..9959be9 --- /dev/null +++ b/src/components/MultiPaymentOptions.tsx @@ -0,0 +1,7 @@ +export const MultiPaymentOptions = () => { + return ( +
+

Working on this section

+
+ ); +}; diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 21ae1d7..9c5d91f 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -1,8 +1,9 @@ - const Home = () => { return ( -
Home
- ) -} + <> +
Home
+ + ); +}; -export default Home \ No newline at end of file +export default Home; From eb3842a71ce1757c4fc85224db6ae111236c6dec Mon Sep 17 00:00:00 2001 From: youngancient Date: Sun, 23 Feb 2025 13:45:29 +0100 Subject: [PATCH 02/10] mod: fixed index.css bug --- src/components/MultiPaymentOptions.tsx | 2 +- src/index.css | 4 ++-- src/pages/home.tsx | 3 +++ 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx index 9959be9..036e6a2 100644 --- a/src/components/MultiPaymentOptions.tsx +++ b/src/components/MultiPaymentOptions.tsx @@ -1,7 +1,7 @@ export const MultiPaymentOptions = () => { return (
-

Working on this section

+

Working on this section

); }; diff --git a/src/index.css b/src/index.css index 5e19681..47c0b00 100644 --- a/src/index.css +++ b/src/index.css @@ -20,9 +20,9 @@ body { @apply text-3xl font-bold sm:text-5xl; } - .h2 { + /* .h2 { @apply text-2xl font-black sm:text-3xl md:text-5xl; - } + } */ .h3 { @apply text-xl sm:text-3xl font-semibold tracking-[-2%]; } diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 9c5d91f..c538ac3 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -1,7 +1,10 @@ +import { MultiPaymentOptions } from "../components/MultiPaymentOptions"; + const Home = () => { return ( <>
Home
+ ); }; From 08828b1de727ae2e92e190ac51d5c99df57da6ec Mon Sep 17 00:00:00 2001 From: youngancient Date: Sun, 23 Feb 2025 14:12:43 +0100 Subject: [PATCH 03/10] mod: test pass for index.css bug fix --- src/components/MultiPaymentOptions.tsx | 2 +- src/index.css | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx index 036e6a2..9959be9 100644 --- a/src/components/MultiPaymentOptions.tsx +++ b/src/components/MultiPaymentOptions.tsx @@ -1,7 +1,7 @@ export const MultiPaymentOptions = () => { return (
-

Working on this section

+

Working on this section

); }; diff --git a/src/index.css b/src/index.css index 47c0b00..885d0a0 100644 --- a/src/index.css +++ b/src/index.css @@ -20,9 +20,9 @@ body { @apply text-3xl font-bold sm:text-5xl; } - /* .h2 { - @apply text-2xl font-black sm:text-3xl md:text-5xl; - } */ + .h2 { + @apply text-2xl font-bold sm:text-3xl md:text-5xl; + } .h3 { @apply text-xl sm:text-3xl font-semibold tracking-[-2%]; } From 78e23173cfedf66285f59f09ae4f53f3cadd28dc Mon Sep 17 00:00:00 2001 From: youngancient Date: Sun, 23 Feb 2025 14:33:17 +0100 Subject: [PATCH 04/10] mod: worked on section layout --- src/components/MultiPaymentOptions.tsx | 48 ++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx index 9959be9..084fbfc 100644 --- a/src/components/MultiPaymentOptions.tsx +++ b/src/components/MultiPaymentOptions.tsx @@ -1,7 +1,51 @@ + export const MultiPaymentOptions = () => { return ( -
-

Working on this section

+
+
div
+
+

+ Enjoy Secure Payments with
Smart + Contracts +

+

+ Leverage blockchain-powered smart contracts to guarantee salary + payments without intermediaries. Funds are locked and automatically + released, reducing errors and ensuring transparency. +

+
+
+
+ save +
+
+

Tamperproof Payments

+

+ Smart contracts execute payments automatically, eliminating the + risk of fraud or unauthorized changes. +

+
+
+
+
+ +
+
+

Instant Payment Verification

+

+ Every transaction is recorded on the blockchain, providing a + transparent and verifiable payment trail. +

+
+
+
+
); }; From 166906ffd509e5e8ccfb2bec0af79cccce90fa67 Mon Sep 17 00:00:00 2001 From: youngancient Date: Sun, 23 Feb 2025 15:38:49 +0100 Subject: [PATCH 05/10] mod: styled section --- src/components/MultiPaymentOptions.tsx | 58 ++++----- src/components/icons/payments.tsx | 58 +++++++++ src/index.css | 161 ++++++++++++++----------- 3 files changed, 177 insertions(+), 100 deletions(-) create mode 100644 src/components/icons/payments.tsx diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx index 084fbfc..0faa6b1 100644 --- a/src/components/MultiPaymentOptions.tsx +++ b/src/components/MultiPaymentOptions.tsx @@ -1,46 +1,50 @@ +import { CreditCardIcon, SettingsIcon, WavyLines } from "./icons/payments"; export const MultiPaymentOptions = () => { return ( -
-
div
-
-

- Enjoy Secure Payments with
Smart - Contracts -

-

- Leverage blockchain-powered smart contracts to guarantee salary - payments without intermediaries. Funds are locked and automatically - released, reducing errors and ensuring transparency. +

+
+
+ +
+
+ +
+
+ +
+
+
+

+ Pay employees in crypto,
{" "} + stablecoins, or traditional fiat. +

+

+ Give employees the freedom to choose their preferred payment method. + Pay salaries in USDC, SOL, ETH, fiat, or a mix of both—seamlessly.

-
- save +
+
-

Tamperproof Payments

+

Multi-Currency Support

- Smart contracts execute payments automatically, eliminating the - risk of fraud or unauthorized changes. + Pay employees in cryptocurrencies like USDC, SOL, ETH, or + traditional fiat, all within the same platform.

-
- +
+
-

Instant Payment Verification

+

Customizable Payouts

- Every transaction is recorded on the blockchain, providing a - transparent and verifiable payment trail. + Split salaries between crypto and fiat, allowing employees to + receive payments in their preferred combination.

diff --git a/src/components/icons/payments.tsx b/src/components/icons/payments.tsx new file mode 100644 index 0000000..8763b35 --- /dev/null +++ b/src/components/icons/payments.tsx @@ -0,0 +1,58 @@ +export const SettingsIcon = () => { + return ( + + + + ); +}; + +export const CreditCardIcon = () => { + return ( + + + + ); +}; + +export const WavyLines = () => { + return ( + + + + ); +}; diff --git a/src/index.css b/src/index.css index 885d0a0..7b9fc5b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,84 +1,99 @@ -@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@100..900&display=swap"); + @tailwind base; @tailwind components; @tailwind utilities; +/* General container setup */ .container { - @apply mx-auto px-gutter !max-w-none 4xl:px-contained; + @apply mx-auto px-gutter !max-w-none 4xl:px-contained; } -body { - font-family: "Hanken Grotesk", serif; -} +/* Base styles */ @layer base { - body { - @apply text-black font-openrunde; - } + body { + @apply text-black font-sans; + font-family: "Hanken Grotesk", sans-serif; + } } + +/* Utilities */ @layer utilities { - .h1 { - @apply text-3xl font-bold sm:text-5xl; - } - - .h2 { - @apply text-2xl font-bold sm:text-3xl md:text-5xl; - } - .h3 { - @apply text-xl sm:text-3xl font-semibold tracking-[-2%]; - } - .h4 { - @apply text-xl sm:text-xl font-semibold tracking-[-2%]; - } - - .button { - @apply inline-flex w-full sm:w-fit rounded-full gap-2 font-medium items-center whitespace-nowrap justify-center px-3.5 py-2 sm:px-6 text-sm tracking-[-2%] xs:text-sm text-center transition cursor-pointer; - } - - .button--primary { - @apply text-white bg-primary-500 border border-primary-500 - hover:bg-primary-600 hover:border-primary-600 - focus:bg-primary-500 focus:border-primary-500; - } - - .button--secondary { - @apply text-white bg-[#181D36] border border-[#181D36] min-h-9 - hover:bg-[hsl(230,38%,20%)] focus:bg-[#181D36]; - } - - .button--tertiary { - @apply bg-white border border-gray-300 - hover:bg-gray-50 focus:bg-white disabled:bg-white - py-[11px] min-w-[12.5rem] px-[18px] disabled:border-gray-200; - } - - .button--tertiary-gray { - @apply text-gray-600 bg-gray-100 border border-gray-200 - hover:bg-gray-200 focus:bg-gray-100; - } - - .button--tertiary-white { - @apply text-primary-600 text-sm tracking-[-2%] rounded-full - hover:text-primary-700 hover:bg-primary-50 - focus:text-primary-600 disabled:text-gray-300; - } - - .input { - @apply px-3.5 py-2.5 rounded-lg bg-white outline-none focus:border-primary-200; - } - - .tag { - @apply flex w-fit rounded-full py-2 px-3.5 gap-2 border font-medium text-sm; - } - .tag-primary { - @apply tag border-purple-100 bg-primary-100 text-primary-600; - } - .tag-secondary { - @apply tag text-purple-600 bg-purple-100 border-purple-300; - } - .tag-tertiary { - @apply tag text-purple-500 bg-purple-50 border-purple-50; - } - .tag-tertiary-white { - @apply tag text-purple-500 bg-white border-white; - } + /* Headings */ + .h1 { + @apply text-3xl font-bold sm:text-5xl; + } + + .h2 { + @apply text-2xl font-bold sm:text-3xl md:text-5xl; + } + + .h3 { + @apply text-xl sm:text-3xl font-semibold tracking-tight; + } + + .h4 { + @apply text-xl sm:text-xl font-semibold tracking-tight; + } + + /* Buttons */ + .button { + @apply inline-flex w-full sm:w-fit rounded-full gap-2 font-medium + items-center whitespace-nowrap justify-center px-3.5 py-2 + sm:px-6 text-sm text-center transition cursor-pointer; + } + + .button--primary { + @apply text-white bg-primary-500 border border-primary-500 + hover:bg-primary-600 hover:border-primary-600 + focus:bg-primary-500 focus:border-primary-500; + } + + .button--secondary { + @apply text-white bg-[#181D36] border border-[#181D36] min-h-9 + hover:bg-[hsl(230,38%,20%)] focus:bg-[#181D36]; + } + + .button--tertiary { + @apply bg-white border border-gray-300 + hover:bg-gray-50 focus:bg-white disabled:bg-white + py-[11px] min-w-[12.5rem] px-[18px] disabled:border-gray-200; + } + + .button--tertiary-gray { + @apply text-gray-600 bg-gray-100 border border-gray-200 + hover:bg-gray-200 focus:bg-gray-100; + } + + .button--tertiary-white { + @apply text-primary-600 text-sm rounded-full + hover:text-primary-700 hover:bg-primary-50 + focus:text-primary-600 disabled:text-gray-300; + } + + /* Input Fields */ + .input { + @apply px-3.5 py-2.5 rounded-lg bg-white outline-none focus:border-primary-200; + } + + /* Tags */ + .tag { + @apply flex w-fit rounded-full py-2 px-3.5 gap-2 border font-medium text-sm; + } + + .tag-primary { + @apply tag border-primary-100 bg-primary-100 text-primary-600; + } + + .tag-secondary { + @apply tag text-purple-600 bg-purple-100 border-purple-300; + } + + .tag-tertiary { + @apply tag text-purple-500 bg-purple-50 border-purple-50; + } + + .tag-tertiary-white { + @apply tag text-purple-500 bg-white border-white; + } } From 59f8c0ab0fe20df38883d561401f227d0fc37dfd Mon Sep 17 00:00:00 2001 From: youngancient Date: Sun, 23 Feb 2025 17:04:13 +0100 Subject: [PATCH 06/10] mod: installed framer motion, position icons --- package-lock.json | 77 ++++++++++++++ package.json | 1 + public/img/busd.svg | 9 ++ public/img/eth.svg | 9 ++ public/img/euro.svg | 9 ++ public/img/naira.svg | 9 ++ public/img/usd.svg | 9 ++ public/img/usdc.svg | 9 ++ public/img/usdt.svg | 9 ++ src/components/MultiPaymentOptions.tsx | 136 ++++++++++++++++++++++++- src/components/icons/payments.tsx | 2 +- 11 files changed, 273 insertions(+), 6 deletions(-) create mode 100644 public/img/busd.svg create mode 100644 public/img/eth.svg create mode 100644 public/img/euro.svg create mode 100644 public/img/naira.svg create mode 100644 public/img/usd.svg create mode 100644 public/img/usdc.svg create mode 100644 public/img/usdt.svg diff --git a/package-lock.json b/package-lock.json index 85b0540..c516732 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "defifundr-landing", "version": "0.0.0", "dependencies": { + "framer-motion": "^12.4.7", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^7.1.3" @@ -2373,6 +2374,33 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "12.4.7", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz", + "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.4.5", + "motion-utils": "^12.0.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2813,6 +2841,21 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/motion-dom": { + "version": "12.4.5", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz", + "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.0.0" + } + }, + "node_modules/motion-utils": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz", + "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -3721,6 +3764,12 @@ "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", "dev": true }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/turbo-stream": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", @@ -5532,6 +5581,16 @@ "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", "dev": true }, + "framer-motion": { + "version": "12.4.7", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz", + "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==", + "requires": { + "motion-dom": "^12.4.5", + "motion-utils": "^12.0.0", + "tslib": "^2.4.0" + } + }, "fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -5848,6 +5907,19 @@ "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", "dev": true }, + "motion-dom": { + "version": "12.4.5", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz", + "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==", + "requires": { + "motion-utils": "^12.0.0" + } + }, + "motion-utils": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz", + "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==" + }, "ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -6442,6 +6514,11 @@ "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", "dev": true }, + "tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, "turbo-stream": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", diff --git a/package.json b/package.json index 2145747..c61ffcb 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "framer-motion": "^12.4.7", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^7.1.3" diff --git a/public/img/busd.svg b/public/img/busd.svg new file mode 100644 index 0000000..f206237 --- /dev/null +++ b/public/img/busd.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/eth.svg b/public/img/eth.svg new file mode 100644 index 0000000..9c45e31 --- /dev/null +++ b/public/img/eth.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/euro.svg b/public/img/euro.svg new file mode 100644 index 0000000..eeff6ab --- /dev/null +++ b/public/img/euro.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/naira.svg b/public/img/naira.svg new file mode 100644 index 0000000..60a1d97 --- /dev/null +++ b/public/img/naira.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/usd.svg b/public/img/usd.svg new file mode 100644 index 0000000..e4d600a --- /dev/null +++ b/public/img/usd.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/usdc.svg b/public/img/usdc.svg new file mode 100644 index 0000000..a4fbb40 --- /dev/null +++ b/public/img/usdc.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/img/usdt.svg b/public/img/usdt.svg new file mode 100644 index 0000000..6f76c51 --- /dev/null +++ b/public/img/usdt.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx index 0faa6b1..cd143d8 100644 --- a/src/components/MultiPaymentOptions.tsx +++ b/src/components/MultiPaymentOptions.tsx @@ -2,16 +2,142 @@ import { CreditCardIcon, SettingsIcon, WavyLines } from "./icons/payments"; export const MultiPaymentOptions = () => { return ( -
-
-
+
+
+
+
+ usdt +
+
+ usd +
+
+ eth +
+
+ euro +
+
+ busd +
+
+ usdc +
-
+
+
+ busd +
+
+ usdt +
+
+ eth +
+
+ usdt +
+
+ busd +
+
+ usdc +
-
+
+
+ usdt +
+
+ usd +
+
+ eth +
+
+ euro +
+
+ busd +
+
+ usdc +
diff --git a/src/components/icons/payments.tsx b/src/components/icons/payments.tsx index 8763b35..4d76a93 100644 --- a/src/components/icons/payments.tsx +++ b/src/components/icons/payments.tsx @@ -46,7 +46,7 @@ export const WavyLines = () => { viewBox="0 0 528 133" fill="none" xmlns="http://www.w3.org/2000/svg" - className="w-full" + className="w-full translate-x-8" > Date: Sun, 23 Feb 2025 17:09:28 +0100 Subject: [PATCH 07/10] mod: readjust icon alignments --- src/components/MultiPaymentOptions.tsx | 14 +++++++------- src/components/icons/payments.tsx | 7 +++++-- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx index cd143d8..b7dc973 100644 --- a/src/components/MultiPaymentOptions.tsx +++ b/src/components/MultiPaymentOptions.tsx @@ -50,46 +50,46 @@ export const MultiPaymentOptions = () => {
- +
busd
usdt
eth
usdt
busd
usdc
diff --git a/src/components/icons/payments.tsx b/src/components/icons/payments.tsx index 4d76a93..5fad424 100644 --- a/src/components/icons/payments.tsx +++ b/src/components/icons/payments.tsx @@ -38,7 +38,10 @@ export const CreditCardIcon = () => { ); }; -export const WavyLines = () => { +interface IWavy{ + classStyles ?: string; +} +export const WavyLines:React.FC = ({classStyles}) => { return ( { viewBox="0 0 528 133" fill="none" xmlns="http://www.w3.org/2000/svg" - className="w-full translate-x-8" + className={`w-full translate-x-8 ${classStyles}`} > Date: Sun, 23 Feb 2025 17:40:12 +0100 Subject: [PATCH 08/10] mod: used framer motion to animate section elements --- src/animations/payments.tsx | 65 ++++++++++++++++++++++++++ src/components/MultiPaymentOptions.tsx | 47 +++++++++++++++---- 2 files changed, 102 insertions(+), 10 deletions(-) create mode 100644 src/animations/payments.tsx diff --git a/src/animations/payments.tsx b/src/animations/payments.tsx new file mode 100644 index 0000000..c6b3d8e --- /dev/null +++ b/src/animations/payments.tsx @@ -0,0 +1,65 @@ +export const sectionVariant = { + initial: { opacity: 0 }, + final: { + opacity: 1, + transition: { + duration: 0.4, + ease: "easeInOut", + staggerChildren: 0.1, + }, + }, + }; + + + export const moodVariant = { + initial: { + opacity: 0, + y: -20, + }, + final: { + opacity: 1, + y: 0, + transition: { + delay: 0.25, + duration: 0.6, + }, + }, + exit: { + opacity: 1, + y: -20, + transition: { + delay: 0.25, + duration: 0.25, + }, + }, + }; + + export const textVariant = { + initial: { + opacity: 0, + y: -20, + }, + final: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + }, + }, + final2: { + opacity: 1, + y: 0, + transition: { + delay: 0.25, + duration: 0.6, + }, + }, + final3: { + opacity: 1, + y: 0, + transition: { + delay: 0.5, + duration: 0.6, + }, + }, + }; \ No newline at end of file diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx index b7dc973..829b89a 100644 --- a/src/components/MultiPaymentOptions.tsx +++ b/src/components/MultiPaymentOptions.tsx @@ -1,9 +1,21 @@ +import { moodVariant, sectionVariant, textVariant } from "../animations/payments"; import { CreditCardIcon, SettingsIcon, WavyLines } from "./icons/payments"; +import { motion } from "framer-motion"; export const MultiPaymentOptions = () => { return ( -
-
+ +
{ usdc
-
-
-

+ + + Pay employees in crypto,
{" "} stablecoins, or traditional fiat. -

-

+ + Give employees the freedom to choose their preferred payment method. Pay salaries in USDC, SOL, ETH, fiat, or a mix of both—seamlessly. -

+
@@ -175,7 +202,7 @@ export const MultiPaymentOptions = () => {
-
-
+ + ); }; From d462d89369a98531ac7151f558857a057d0c1587 Mon Sep 17 00:00:00 2001 From: youngancient Date: Sun, 23 Feb 2025 19:00:26 +0100 Subject: [PATCH 09/10] mod: completed animations of icons using framer motion --- src/animations/payments.tsx | 142 ++++++++++------ src/components/MultiPaymentOptions.tsx | 223 ++++++++++++++++--------- 2 files changed, 231 insertions(+), 134 deletions(-) diff --git a/src/animations/payments.tsx b/src/animations/payments.tsx index c6b3d8e..e1f9643 100644 --- a/src/animations/payments.tsx +++ b/src/animations/payments.tsx @@ -1,65 +1,97 @@ export const sectionVariant = { - initial: { opacity: 0 }, - final: { - opacity: 1, - transition: { - duration: 0.4, - ease: "easeInOut", - staggerChildren: 0.1, - }, + initial: { opacity: 0 }, + final: { + opacity: 1, + transition: { + duration: 0.4, + ease: "easeInOut", + staggerChildren: 0.2, }, - }; - + }, +}; - export const moodVariant = { - initial: { - opacity: 0, - y: -20, +export const moodVariant = { + initial: { + opacity: 0, + y: -20, + }, + final: { + opacity: 1, + y: 0, + transition: { + delay: 0.25, + duration: 0.6, }, - final: { - opacity: 1, - y: 0, - transition: { - delay: 0.25, - duration: 0.6, - }, + }, + exit: { + opacity: 1, + y: -20, + transition: { + delay: 0.25, + duration: 0.25, + staggerChildren: 0.2, }, - exit: { - opacity: 1, - y: -20, - transition: { - delay: 0.25, - duration: 0.25, - }, - }, - }; + }, +}; - export const textVariant = { - initial: { - opacity: 0, - y: -20, +export const textVariant = { + initial: { + opacity: 0, + y: -20, + }, + final: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + }, + }, + final2: { + opacity: 1, + y: 0, + transition: { + delay: 0.25, + duration: 0.6, }, - final: { - opacity: 1, - y: 0, - transition: { - duration: 0.6, - }, + }, + final3: { + opacity: 1, + y: 0, + transition: { + delay: 0.5, + duration: 0.6, }, - final2: { - opacity: 1, - y: 0, - transition: { - delay: 0.25, - duration: 0.6, - }, + }, +}; + +export const oscillateVariant = { + animate: { + x: [2, -2, 2, -2, 2], + y: [2, -2, 2, -2, 2], + transition: { + duration: 2, + repeat: Infinity, + ease: "easeInOut", }, - final3: { - opacity: 1, - y: 0, - transition: { - delay: 0.5, - duration: 0.6, - }, + }, + hover: { + x: 0, + y: 0, + transition: { duration: 0.1 }, + }, +}; + +export const rotateVariant = { + animate: { + rotate: [0, 360], + transition: { + duration: 4, + repeat: Infinity, + ease: "linear", }, - }; \ No newline at end of file + }, + hover: { + rotate: 0, + transition: { duration: 0.3 }, + }, +}; diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx index 829b89a..e6454b0 100644 --- a/src/components/MultiPaymentOptions.tsx +++ b/src/components/MultiPaymentOptions.tsx @@ -1,177 +1,242 @@ -import { moodVariant, sectionVariant, textVariant } from "../animations/payments"; +import { + moodVariant, + oscillateVariant, + rotateVariant, + sectionVariant, + textVariant, +} from "../animations/payments"; import { CreditCardIcon, SettingsIcon, WavyLines } from "./icons/payments"; import { motion } from "framer-motion"; export const MultiPaymentOptions = () => { return ( - - +
-
usdt -
-
+ usd -
-
+ eth -
-
+ euro -
-
+ busd -
-
+ usdc -
+
-
busd -
-
+ usdt -
-
+ eth -
-
+ usdt -
-
+ busd -
-
+ usdc -
+
-
usdt -
-
+ usd -
-
+ eth -
-
+ euro -
-
+ busd -
-
+ usdc -
+
- - + Pay employees in crypto,
{" "} stablecoins, or traditional fiat. - Give employees the freedom to choose their preferred payment method. Pay salaries in USDC, SOL, ETH, fiat, or a mix of both—seamlessly. @@ -183,7 +248,7 @@ export const MultiPaymentOptions = () => {

Multi-Currency Support

-

+

Pay employees in cryptocurrencies like USDC, SOL, ETH, or traditional fiat, all within the same platform.

@@ -195,7 +260,7 @@ export const MultiPaymentOptions = () => {

Customizable Payouts

-

+

Split salaries between crypto and fiat, allowing employees to receive payments in their preferred combination.

From ea287e9e64bb5230792e1ea1236d6c3048bbb4a8 Mon Sep 17 00:00:00 2001 From: youngancient Date: Sun, 23 Feb 2025 19:11:27 +0100 Subject: [PATCH 10/10] mod: fixed animation time and style --- src/animations/payments.tsx | 4 ++-- src/components/MultiPaymentOptions.tsx | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/animations/payments.tsx b/src/animations/payments.tsx index e1f9643..5bb2276 100644 --- a/src/animations/payments.tsx +++ b/src/animations/payments.tsx @@ -69,7 +69,7 @@ export const oscillateVariant = { x: [2, -2, 2, -2, 2], y: [2, -2, 2, -2, 2], transition: { - duration: 2, + duration: 6, repeat: Infinity, ease: "easeInOut", }, @@ -85,7 +85,7 @@ export const rotateVariant = { animate: { rotate: [0, 360], transition: { - duration: 4, + duration: 6, repeat: Infinity, ease: "linear", }, diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx index e6454b0..b4d69b9 100644 --- a/src/components/MultiPaymentOptions.tsx +++ b/src/components/MultiPaymentOptions.tsx @@ -39,7 +39,7 @@ export const MultiPaymentOptions = () => { { { { { { {