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/animations/payments.tsx b/src/animations/payments.tsx new file mode 100644 index 0000000..5bb2276 --- /dev/null +++ b/src/animations/payments.tsx @@ -0,0 +1,97 @@ +export const sectionVariant = { + initial: { opacity: 0 }, + final: { + opacity: 1, + transition: { + duration: 0.4, + ease: "easeInOut", + staggerChildren: 0.2, + }, + }, +}; + +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, + staggerChildren: 0.2, + }, + }, +}; + +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, + }, + }, +}; + +export const oscillateVariant = { + animate: { + x: [2, -2, 2, -2, 2], + y: [2, -2, 2, -2, 2], + transition: { + duration: 6, + repeat: Infinity, + ease: "easeInOut", + }, + }, + hover: { + x: 0, + y: 0, + transition: { duration: 0.1 }, + }, +}; + +export const rotateVariant = { + animate: { + rotate: [0, 360], + transition: { + duration: 6, + repeat: Infinity, + ease: "linear", + }, + }, + hover: { + rotate: 0, + transition: { duration: 0.3 }, + }, +}; diff --git a/src/components/MultiPaymentOptions.tsx b/src/components/MultiPaymentOptions.tsx new file mode 100644 index 0000000..b4d69b9 --- /dev/null +++ b/src/components/MultiPaymentOptions.tsx @@ -0,0 +1,273 @@ +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. + +
+
+
+ +
+
+

Multi-Currency Support

+

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

+
+
+
+
+ +
+
+

Customizable Payouts

+

+ 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..5fad424 --- /dev/null +++ b/src/components/icons/payments.tsx @@ -0,0 +1,61 @@ +export const SettingsIcon = () => { + return ( + + + + ); +}; + +export const CreditCardIcon = () => { + return ( + + + + ); +}; + +interface IWavy{ + classStyles ?: string; +} +export const WavyLines:React.FC = ({classStyles}) => { + return ( + + + + ); +}; diff --git a/src/index.css b/src/index.css index 5e19681..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-black 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; + } } diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 21ae1d7..c538ac3 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -1,8 +1,12 @@ +import { MultiPaymentOptions } from "../components/MultiPaymentOptions"; const Home = () => { return ( -
Home
- ) -} + <> +
Home
+ + + ); +}; -export default Home \ No newline at end of file +export default Home;