From aadb7ca836da2de4b2088bce0f761dd984fe93ba Mon Sep 17 00:00:00 2001 From: Vrezh Fedora Date: Thu, 30 Jan 2025 21:23:55 +0100 Subject: [PATCH 1/7] refac(hero, navbar): changed homepage + navbar --- package-lock.json | 80 +++++++++++--- package.json | 2 + src/animations.ts | 6 +- src/components/Hero.astro | 87 ++++++++++------ src/components/Logo.astro | 5 + src/components/NavBar.astro | 201 ++++++++++++++++++------------------ src/components/Title.astro | 4 +- src/layouts/Layout.astro | 29 ++++-- tailwind.config.mjs | 15 +++ 9 files changed, 270 insertions(+), 159 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8d1f81db..130c0e86 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,8 +24,10 @@ "astro-navbar": "^2.3.7", "autoprefixer": "10.4.14", "date-fns": "^4.1.0", + "framer-motion": "^12.0.6", "free-astro-components": "^1.1.1", "lucide-astro": "^0.460.0", + "lucide-react": "^0.474.0", "motion": "^11.13.5", "postcss": "8.4.21", "prettier": "^3.3.3", @@ -5558,12 +5560,13 @@ } }, "node_modules/framer-motion": { - "version": "11.17.0", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.17.0.tgz", - "integrity": "sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==", + "version": "12.0.6", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.0.6.tgz", + "integrity": "sha512-LmrXbXF6Vv5WCNmb+O/zn891VPZrH7XbsZgRLBROw6kFiP+iTK49gxTv2Ur3F0Tbw6+sy9BVtSqnWfMUpH+6nA==", + "license": "MIT", "dependencies": { - "motion-dom": "^11.16.4", - "motion-utils": "^11.16.0", + "motion-dom": "^12.0.0", + "motion-utils": "^12.0.0", "tslib": "^2.4.0" }, "peerDependencies": { @@ -7041,6 +7044,15 @@ "astro": ">=2.7.1" } }, + "node_modules/lucide-react": { + "version": "0.474.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.474.0.tgz", + "integrity": "sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.17", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz", @@ -7957,17 +7969,61 @@ } }, "node_modules/motion-dom": { - "version": "11.16.4", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz", - "integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==", + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz", + "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==", + "license": "MIT", "dependencies": { - "motion-utils": "^11.16.0" + "motion-utils": "^12.0.0" } }, "node_modules/motion-utils": { - "version": "11.16.0", - "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz", - "integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==" + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz", + "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==", + "license": "MIT" + }, + "node_modules/motion/node_modules/framer-motion": { + "version": "11.18.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz", + "integrity": "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==", + "license": "MIT", + "dependencies": { + "motion-dom": "^11.18.1", + "motion-utils": "^11.18.1", + "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/motion/node_modules/motion-dom": { + "version": "11.18.1", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz", + "integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==", + "license": "MIT", + "dependencies": { + "motion-utils": "^11.18.1" + } + }, + "node_modules/motion/node_modules/motion-utils": { + "version": "11.18.1", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz", + "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==", + "license": "MIT" }, "node_modules/mrmime": { "version": "2.0.0", diff --git a/package.json b/package.json index 7337e937..7a8f8cba 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,10 @@ "astro-navbar": "^2.3.7", "autoprefixer": "10.4.14", "date-fns": "^4.1.0", + "framer-motion": "^12.0.6", "free-astro-components": "^1.1.1", "lucide-astro": "^0.460.0", + "lucide-react": "^0.474.0", "motion": "^11.13.5", "postcss": "8.4.21", "prettier": "^3.3.3", diff --git a/src/animations.ts b/src/animations.ts index dc5de1f9..dce498c5 100644 --- a/src/animations.ts +++ b/src/animations.ts @@ -1,13 +1,13 @@ -export function getTitleAnimation(delay = 0) { +export function getTitleAnimation(delay = 0, duration = 0.3, once = true) { return { initial: { opacity: 0, translateY: 20, filter: 'blur(4px)' }, whileInView: { opacity: 1, translateY: 0, filter: 'blur(0px)', - transition: { duration: 0.3, delay }, + transition: { duration, delay }, }, - viewport: { once: true }, + viewport: { once: once }, } } diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 61bd0a34..97c29d36 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -6,25 +6,38 @@ import { Image } from 'astro:assets' import myImage from '../assets/browsers.png' import myImageLight from '../assets/browsers-light.png' import { ArrowRight } from 'lucide-astro' -import { motion } from 'motion/react' +import { motion } from 'framer-motion' import { getTitleAnimation } from '../animations' +export function splitTextIntoWords(text: string) { + return text.split(' ').map((word, wordIndex) => ({ + word, + characters: word.split('').map((char, charIndex) => ({ + char, + key: `${wordIndex}-${charIndex}`, + })), + })) +} + let titleAnimationCounter = 0 -function getNewAnimationDelay() { +function getNewAnimationDelay(customDelay = 0.15) { titleAnimationCounter++ - return titleAnimationCounter * 0.15 + return titleAnimationCounter * customDelay } -function getHeroTitleAnimation() { - return getTitleAnimation(getNewAnimationDelay()) +function getHeroTitleAnimation(customDelay = 0.15, customDuration = 0.3) { + return getTitleAnimation(getNewAnimationDelay(customDelay), customDuration) } + +const titleText = 'Welcome to a calmer internet' +const splitTitleText = splitTextIntoWords(titleText) --- - + diff --git a/src/components/Logo.astro b/src/components/Logo.astro index 7a5be946..d892917a 100644 --- a/src/components/Logo.astro +++ b/src/components/Logo.astro @@ -1,4 +1,9 @@ +--- +const { class: className } = Astro.props +--- + - + -
- - - - - - - - - - - +