diff --git a/cspell.json b/cspell.json index 7801855..66a6401 100644 --- a/cspell.json +++ b/cspell.json @@ -4,6 +4,7 @@ "files": ["**/*.{ts,js,astro,html,css,json,yml,yaml,md}"], "words": [ "adam", + "animejs", "AMOLED", "Apóyanos", "Astronav", diff --git a/package.json b/package.json index e268922..bdbcee0 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@types/react": "^19.1.6", "@types/react-dom": "^19.1.5", "arktype": "^2.1.20", + "animejs": "^4.0.2", "astro": "5.7.10", "astro-navbar": "2.3.7", "autoprefixer": "10.4.14", @@ -46,7 +47,6 @@ "free-astro-components": "1.2.0", "jiti": "^2.4.2", "lefthook": "^1.11.13", - "motion": "^12.15.0", "postcss": "8.5.1", "react": "^19.1.0", "react-dom": "^19.1.0", @@ -72,6 +72,7 @@ "@playwright/test": "1.52.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/user-event": "14.6.1", + "@types/animejs": "^3.1.13", "@types/eslint-plugin-jsx-a11y": "6.10.0", "@types/jsdom": "21.1.7", "@types/node": "22.15.18", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7b3c645..2486fdf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: '@types/react-dom': specifier: ^19.1.5 version: 19.1.6(@types/react@19.1.6) + animejs: + specifier: ^4.0.2 + version: 4.0.2 arktype: specifier: ^2.1.20 version: 2.1.20 @@ -71,9 +74,6 @@ importers: lefthook: specifier: ^1.11.13 version: 1.11.13 - motion: - specifier: ^12.15.0 - version: 12.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0) postcss: specifier: 8.5.1 version: 8.5.1 @@ -144,6 +144,9 @@ importers: '@testing-library/user-event': specifier: 14.6.1 version: 14.6.1(@testing-library/dom@10.4.0) + '@types/animejs': + specifier: ^3.1.13 + version: 3.1.13 '@types/eslint-plugin-jsx-a11y': specifier: 6.10.0 version: 6.10.0 @@ -1514,6 +1517,9 @@ packages: '@tybys/wasm-util@0.9.0': resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==} + '@types/animejs@3.1.13': + resolution: {integrity: sha512-yWg9l1z7CAv/TKpty4/vupEh24jDGUZXv4r26StRkpUPQm04ztJaftgpto8vwdFs8SiTq6XfaPKCSI+wjzNMvQ==} + '@types/aria-query@5.0.4': resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==} @@ -1850,6 +1856,9 @@ packages: ajv@8.17.1: resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==} + animejs@4.0.2: + resolution: {integrity: sha512-f0L/kSya2RF23iMSF/VO01pMmLwlAFoiQeNAvBXhEyLzIPd2/QTBRatwGUqkVCC6seaAJYzAkGir55N4SL+h3A==} + ansi-align@3.0.1: resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==} @@ -2774,20 +2783,6 @@ packages: fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} - framer-motion@12.16.0: - resolution: {integrity: sha512-xryrmD4jSBQrS2IkMdcTmiS4aSKckbS7kLDCuhUn9110SQKG1w3zlq1RTqCblewg+ZYe+m3sdtzQA6cRwo5g8Q==} - 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 - free-astro-components@1.2.0: resolution: {integrity: sha512-bsT9dWsNlRGDNjqcoIlz6w8NcSCgOpx6oxiwZgYwq9RVbi3JqUImPc6c4Kico2wRJSIXc7HHyr71QgmgXv7nfg==} @@ -3602,26 +3597,6 @@ packages: resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} engines: {node: '>=16 || 14 >=14.17'} - motion-dom@12.16.0: - resolution: {integrity: sha512-Z2nGwWrrdH4egLEtgYMCEN4V2qQt1qxlKy/uV7w691ztyA41Q5Rbn0KNGbsNVDZr9E8PD2IOQ3hSccRnB6xWzw==} - - motion-utils@12.12.1: - resolution: {integrity: sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w==} - - motion@12.16.0: - resolution: {integrity: sha512-P3HA83fnPMEGBLfKdD5vDdjH1Aa3wM3jT3+HX3fCVpy/4/lJiqvABajLgZenBu+rzkFzmeaPkvT7ouf9Tq5tVQ==} - 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 - mrmime@2.0.1: resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==} engines: {node: '>=10'} @@ -6353,6 +6328,8 @@ snapshots: tslib: 2.8.1 optional: true + '@types/animejs@3.1.13': {} + '@types/aria-query@5.0.4': {} '@types/babel__core@7.20.5': @@ -6755,6 +6732,8 @@ snapshots: json-schema-traverse: 1.0.0 require-from-string: 2.0.2 + animejs@4.0.2: {} + ansi-align@3.0.1: dependencies: string-width: 4.2.3 @@ -8008,15 +7987,6 @@ snapshots: fraction.js@4.3.7: {} - framer-motion@12.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0): - dependencies: - motion-dom: 12.16.0 - motion-utils: 12.12.1 - tslib: 2.8.1 - optionalDependencies: - react: 19.1.0 - react-dom: 19.1.0(react@19.1.0) - free-astro-components@1.2.0(@types/node@22.15.18)(jiti@2.4.2)(prettier-plugin-astro@0.14.1)(prettier@3.5.3)(rollup@4.42.0)(yaml@2.8.0): dependencies: '@astrojs/check': 0.9.4(prettier-plugin-astro@0.14.1)(prettier@3.5.3)(typescript@5.6.3) @@ -9096,20 +9066,6 @@ snapshots: minipass@7.1.2: {} - motion-dom@12.16.0: - dependencies: - motion-utils: 12.12.1 - - motion-utils@12.12.1: {} - - motion@12.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0): - dependencies: - framer-motion: 12.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - tslib: 2.8.1 - optionalDependencies: - react: 19.1.0 - react-dom: 19.1.0(react@19.1.0) - mrmime@2.0.1: {} ms@2.1.3: {} diff --git a/src/components/Community.astro b/src/components/Community.astro index 10f9571..9c9277a 100644 --- a/src/components/Community.astro +++ b/src/components/Community.astro @@ -1,10 +1,7 @@ --- import Image from 'astro/components/Image.astro' -import { motion } from 'motion/react' -import { getTitleAnimation } from '~/animations' import ComImage from '~/assets/ComImage.png' import Button from '~/components/Button.astro' -import Description from '~/components/Description.astro' import CheckIcon from '~/icons/CheckIcon.astro' import GitHubIcon from '~/icons/GitHubIcon.astro' import { getLocale, getUI } from '~/utils/i18n' @@ -19,50 +16,85 @@ const { ---
- +

{ - community.title.map((title, index) => + community.title.map(title => title !== '\n' ? ( - + {title} - + ) : ( ) ) } - - - {community.description} - +

+

+ {community.description} +

- +
- - +
+
{community.lists.simpleYetPowerful.title} - - +
+
{community.lists.privateAndAlwaysUpToDate.title} - +
- + {community.images.community.alt} - +
+ + diff --git a/src/components/Features.astro b/src/components/Features.astro index 76efc5b..1f3fb5f 100644 --- a/src/components/Features.astro +++ b/src/components/Features.astro @@ -1,9 +1,5 @@ --- -import { motion } from 'motion/react' -import { getTitleAnimation } from '~/animations' import { getLocale, getUI } from '~/utils/i18n' -import Description from './Description.astro' - import Video from './Video.astro' const locale = getLocale(Astro) @@ -20,290 +16,137 @@ interface Props { const { titles } = Astro.props -const descriptions = Object.values(features.featureTabs).map(tab => tab.description) +const featureList = [ + { + key: 'workspaces', + title: features.featureTabs.workspaces.title, + description: features.featureTabs.workspaces.description, + video: 'workspaces', + }, + { + key: 'compact-mode', + title: features.featureTabs.compactMode.title, + description: features.featureTabs.compactMode.description, + video: 'compact-mode', + }, + { + key: 'glance', + title: features.featureTabs.glance.title, + description: features.featureTabs.glance.description, + video: 'glance', + }, + { + key: 'split-view', + title: features.featureTabs.splitView.title, + description: features.featureTabs.splitView.description, + video: 'split-views', + }, +] --- -
- +
+ +
+

+ { + (titles || features.titles).map(title => { + switch (title) { + case '\n': + return + default: + return ( + + {title} + + ) + } + }) + } +

+

+ {features.description} +

+
+ + +
{ - (titles || features.titles).map((title, index) => - title !== '\n' ? ( - - {title} - - ) : ( - - ) - ) - } - - - {features.description} - -
-
- -
- - {features.featureTabs.workspaces.title} - - - {features.featureTabs.compactMode.title} - - - {features.featureTabs.glance.title} - - - {features.featureTabs.splitView.title} - -
- - - - - -
-
-
- -
-
-
+ featureList.map((feature, index) => ( +
+
+

+ {feature.title} +

+

+ {feature.description} +

+
-
-
+ )) + }
- - diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 6bb3b21..da2a619 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -1,24 +1,11 @@ --- -import { motion } from 'motion/react' -import { getTitleAnimation } from '~/animations' import Button from '~/components/Button.astro' -import Description from '~/components/Description.astro' import Title from '~/components/Title.astro' import ArrowRightIcon from '~/icons/ArrowRightIcon.astro' import { getLocale, getPath, getUI } from '~/utils/i18n' import SocialMediaStrip from './SocialMediaStrip.astro' import Video from './Video.astro' -let titleAnimationCounter = 0 -function getNewAnimationDelay() { - titleAnimationCounter++ - return titleAnimationCounter * 0.15 -} - -function getHeroTitleAnimation() { - return getTitleAnimation(getNewAnimationDelay()) -} - const locale = getLocale(Astro) const getLocalePath = getPath(locale) @@ -32,58 +19,54 @@ const {
-
- - { - hero.title.map(title => - title.text !== '\n' ? ( - <motion.span - client:load - {...getHeroTitleAnimation()} - className={title.highlight ? 'italic text-coral' : ''} - > - {title.text} - </motion.span> - ) : ( - <br class="hidden md:block" /> - ) - ) - } - - - - {hero.description[0]} - - {hero.description[1]} +
+
+ + { + hero.title.map(title => + title.text !== '\n' ? ( + <b + class:list={['font-normal', title.highlight && 'italic text-coral']} + style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)" + > + {title.text} + </b> + ) : ( + <br class="hidden md:block" /> + ) + ) + } + +

+ {hero.description[0]} + + {hero.description[1]} +

+
+
- -
- - - - - - +
+ +
+
+ +
+
- - - +
-
- + + + diff --git a/src/components/SocialMediaStrip.astro b/src/components/SocialMediaStrip.astro index ed22a5b..cbcf012 100644 --- a/src/components/SocialMediaStrip.astro +++ b/src/components/SocialMediaStrip.astro @@ -1,5 +1,5 @@ --- -const { gap = 4 } = Astro.props +const { class: className, ...props } = Astro.props import { icon, library } from '@fortawesome/fontawesome-svg-core' import { @@ -9,6 +9,7 @@ import { faReddit, faXTwitter, } from '@fortawesome/free-brands-svg-icons' +import { cn } from '~/utils/merge' library.add(faMastodon, faBluesky, faGithub, faXTwitter, faReddit) const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' }) @@ -18,7 +19,7 @@ const XTwitter = icon({ prefix: 'fab', iconName: 'x-twitter' }) const Reddit = icon({ prefix: 'fab', iconName: 'reddit' }) --- -
+ +