diff --git a/packages/twenty-website-new/src/app/(home)/page.tsx b/packages/twenty-website-new/src/app/(home)/page.tsx index 09eb1d5759..17c7f2ac2a 100644 --- a/packages/twenty-website-new/src/app/(home)/page.tsx +++ b/packages/twenty-website-new/src/app/(home)/page.tsx @@ -8,11 +8,10 @@ import { THREE_CARDS_ILLUSTRATION_DATA, } from '@/app/(home)/_constants'; import { FAQ_DATA, MENU_DATA, TRUSTED_BY_DATA } from '@/app/_constants'; -import { fetchCommunityStats } from '@/lib/community/fetch-community-stats'; -import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'; import { Body, Eyebrow, Heading, LinkButton } from '@/design-system/components'; import { Pages } from '@/enums/pages'; -import { ScrollReveal } from '@/motion/ScrollReveal'; +import { fetchCommunityStats } from '@/lib/community/fetch-community-stats'; +import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'; import { Faq } from '@/sections/Faq/components'; import { Helped } from '@/sections/Helped/components'; import { Hero } from '@/sections/Hero/components'; @@ -32,10 +31,7 @@ export const metadata: Metadata = { export default async function HomePage() { const stats = await fetchCommunityStats(); - const menuSocialLinks = mergeSocialLinkLabels( - MENU_DATA.socialLinks, - stats, - ); + const menuSocialLinks = mergeSocialLinkLabels(MENU_DATA.socialLinks, stats); return ( <> @@ -51,136 +47,117 @@ export default async function HomePage() { - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + ); } diff --git a/packages/twenty-website-new/src/app/layout.tsx b/packages/twenty-website-new/src/app/layout.tsx index 88de054bbd..4d45a9ab4c 100644 --- a/packages/twenty-website-new/src/app/layout.tsx +++ b/packages/twenty-website-new/src/app/layout.tsx @@ -9,7 +9,6 @@ import { css } from '@linaria/core'; import { styled } from '@linaria/react'; import type { Metadata } from 'next'; import { Aleo, Azeret_Mono, Host_Grotesk, VT323 } from 'next/font/google'; -import '../../../twenty-ui/dist/theme-light.css'; const hostGrotesk = Host_Grotesk({ subsets: ['latin'], diff --git a/packages/twenty-website-new/src/app/partner/page.tsx b/packages/twenty-website-new/src/app/partner/page.tsx index 3ac72ef6ba..65844e0203 100644 --- a/packages/twenty-website-new/src/app/partner/page.tsx +++ b/packages/twenty-website-new/src/app/partner/page.tsx @@ -1,6 +1,4 @@ import { FAQ_DATA, MENU_DATA, TRUSTED_BY_DATA } from '@/app/_constants'; -import { fetchCommunityStats } from '@/lib/community/fetch-community-stats'; -import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'; import { ENGAGEMENT_BAND_DATA, HERO_DATA, @@ -10,7 +8,8 @@ import { } from '@/app/partner/_constants'; import { Body, Eyebrow, Heading, LinkButton } from '@/design-system/components'; import { Pages } from '@/enums/pages'; -import { ScrollReveal } from '@/motion/ScrollReveal'; +import { fetchCommunityStats } from '@/lib/community/fetch-community-stats'; +import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'; import { EngagementBand } from '@/sections/EngagementBand/components'; import { Faq } from '@/sections/Faq/components'; import { Hero } from '@/sections/Hero/components'; @@ -30,10 +29,7 @@ export const metadata: Metadata = { export default async function PartnerPage() { const stats = await fetchCommunityStats(); - const menuSocialLinks = mergeSocialLinkLabels( - MENU_DATA.socialLinks, - stats, - ); + const menuSocialLinks = mergeSocialLinkLabels(MENU_DATA.socialLinks, stats); return ( <> @@ -49,156 +45,139 @@ export default async function PartnerPage() { - - - - - + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + - - - - - - - - - + + + + - - - - - - - - - - - - - + + + - - - - - - - - + + + + - - - - - - - - + + - - - - - + + + + + - - - - - - - - - - - - - - - - - + + + + ); } diff --git a/packages/twenty-website-new/src/app/pricing/page.tsx b/packages/twenty-website-new/src/app/pricing/page.tsx index b3e0fe652d..687975f00b 100644 --- a/packages/twenty-website-new/src/app/pricing/page.tsx +++ b/packages/twenty-website-new/src/app/pricing/page.tsx @@ -1,6 +1,4 @@ import { FAQ_DATA, MENU_DATA } from '@/app/_constants'; -import { fetchCommunityStats } from '@/lib/community/fetch-community-stats'; -import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'; import { ENGAGEMENT_BAND_DATA, HERO_DATA, @@ -9,7 +7,8 @@ import { } from '@/app/pricing/_constants'; import { Eyebrow, LinkButton } from '@/design-system/components'; import { Pages } from '@/enums/pages'; -import { ScrollReveal } from '@/motion/ScrollReveal'; +import { fetchCommunityStats } from '@/lib/community/fetch-community-stats'; +import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'; import { EngagementBand } from '@/sections/EngagementBand/components'; import { Faq } from '@/sections/Faq/components'; import { Hero } from '@/sections/Hero/components'; @@ -28,10 +27,7 @@ export const metadata: Metadata = { export default async function PricingPage() { const stats = await fetchCommunityStats(); - const menuSocialLinks = mergeSocialLinkLabels( - MENU_DATA.socialLinks, - stats, - ); + const menuSocialLinks = mergeSocialLinkLabels(MENU_DATA.socialLinks, stats); return ( <> @@ -47,51 +43,41 @@ export default async function PricingPage() { - - - - - - + + + + - - - - - + + + - - + - - - - - - - - - - - + + + + + + + + + - - - - - + + + - - - - + + + + + - - - - - - - - - + + + + + ); } diff --git a/packages/twenty-website-new/src/app/product/page.tsx b/packages/twenty-website-new/src/app/product/page.tsx index a1e31c8945..a4da57c269 100644 --- a/packages/twenty-website-new/src/app/product/page.tsx +++ b/packages/twenty-website-new/src/app/product/page.tsx @@ -1,6 +1,4 @@ import { FAQ_DATA, MENU_DATA, TRUSTED_BY_DATA } from '@/app/_constants'; -import { fetchCommunityStats } from '@/lib/community/fetch-community-stats'; -import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'; import { DEMO_DATA, FEATURE_DATA, @@ -11,7 +9,8 @@ import { } from '@/app/product/_constants'; import { Body, Eyebrow, Heading, LinkButton } from '@/design-system/components'; import { Pages } from '@/enums/pages'; -import { ScrollReveal } from '@/motion/ScrollReveal'; +import { fetchCommunityStats } from '@/lib/community/fetch-community-stats'; +import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'; import { Demo } from '@/sections/Demo/components'; import { Faq } from '@/sections/Faq/components'; import { Feature } from '@/sections/Feature/components'; @@ -32,10 +31,7 @@ export const metadata: Metadata = { export default async function ProductPage() { const stats = await fetchCommunityStats(); - const menuSocialLinks = mergeSocialLinkLabels( - MENU_DATA.socialLinks, - stats, - ); + const menuSocialLinks = mergeSocialLinkLabels(MENU_DATA.socialLinks, stats); return ( <> @@ -51,80 +47,67 @@ export default async function ProductPage() { - - - - - - - - + + + + - - + + + - - - - - - + + + + - - + + + + + + + + + - - - - - + + + + - - - - - - - - - - - - - - - - - - + + - - + + + + + - - - - - + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - + + + + ); } diff --git a/packages/twenty-website-new/src/app/release-notes/page.tsx b/packages/twenty-website-new/src/app/release-notes/page.tsx index a4b5b3fc33..2eaabc8398 100644 --- a/packages/twenty-website-new/src/app/release-notes/page.tsx +++ b/packages/twenty-website-new/src/app/release-notes/page.tsx @@ -10,7 +10,6 @@ import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels' import { fetchLatestGithubReleaseTag } from '@/lib/github/fetch-latest-release-tag'; import { getVisibleReleaseNotes } from '@/lib/releases/get-visible-releases'; import { loadLocalReleaseNotes } from '@/lib/releases/load-local-release-notes'; -import { ScrollReveal } from '@/motion/ScrollReveal'; import { Hero } from '@/sections/Hero/components'; import { Menu } from '@/sections/Menu/components'; import { ReleaseNotes } from '@/sections/ReleaseNotes/components'; @@ -50,30 +49,28 @@ export default async function ReleaseNotesPage() { - - - + + + + - - - - - - + + {allNotes.length === 0 ? ( diff --git a/packages/twenty-website-new/src/app/why-twenty/page.tsx b/packages/twenty-website-new/src/app/why-twenty/page.tsx index 54764f1945..c626d7fef2 100644 --- a/packages/twenty-website-new/src/app/why-twenty/page.tsx +++ b/packages/twenty-website-new/src/app/why-twenty/page.tsx @@ -16,7 +16,6 @@ import { LinkButton } from '@/design-system/components'; import { Pages } from '@/enums/pages'; import { fetchCommunityStats } from '@/lib/community/fetch-community-stats'; import { mergeSocialLinkLabels } from '@/lib/community/merge-social-link-labels'; -import { ScrollReveal } from '@/motion/ScrollReveal'; import { Editorial } from '@/sections/Editorial/components'; import { Hero } from '@/sections/Hero/components'; import { Marquee } from '@/sections/Marquee/components'; @@ -52,114 +51,96 @@ export default async function WhyTwentyPage() { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + + + - - - - - - - - - + + + + + + + - - - - - + + + + - - - - - + + + - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - + + + + + + + ); } diff --git a/packages/twenty-website-new/src/design-system/components/Button/BaseButton.tsx b/packages/twenty-website-new/src/design-system/components/Button/BaseButton.tsx index 2685d5eaa3..d21b1627a7 100644 --- a/packages/twenty-website-new/src/design-system/components/Button/BaseButton.tsx +++ b/packages/twenty-website-new/src/design-system/components/Button/BaseButton.tsx @@ -24,16 +24,6 @@ export const buttonBaseStyles = ` outline: 1px solid ${theme.colors.highlight[100]}; outline-offset: 1px; } - - transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); - - &:hover { - transform: scale(1.04); - } - - &:active { - transform: scale(0.96); - } `; const Label = styled.span` diff --git a/packages/twenty-website-new/src/sections/Demo/components/Heading/Heading.tsx b/packages/twenty-website-new/src/sections/Demo/components/Heading/Heading.tsx index 7331f0aa68..2f6047da9b 100644 --- a/packages/twenty-website-new/src/sections/Demo/components/Heading/Heading.tsx +++ b/packages/twenty-website-new/src/sections/Demo/components/Heading/Heading.tsx @@ -5,11 +5,6 @@ import { styled } from '@linaria/react'; const StyledHeading = styled(BaseHeading)` max-width: 360px; - transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); - - &:hover { - transform: translateY(-4px); - } @media (min-width: ${theme.breakpoints.md}px) { max-width: 672px; diff --git a/packages/twenty-website-new/src/sections/Editorial/components/Body/Body.tsx b/packages/twenty-website-new/src/sections/Editorial/components/Body/Body.tsx index 2d097608dd..001a163275 100644 --- a/packages/twenty-website-new/src/sections/Editorial/components/Body/Body.tsx +++ b/packages/twenty-website-new/src/sections/Editorial/components/Body/Body.tsx @@ -6,7 +6,6 @@ import { styled } from '@linaria/react'; const BodyParagraph = styled.div` color: var(--editorial-body-color); min-width: 0; - transition: color 0.4s ease, opacity 0.4s ease; `; const TwoColumnGrid = styled.div` @@ -19,27 +18,16 @@ const TwoColumnGrid = styled.div` row-gap: ${theme.spacing(6)}; width: 100%; - /* When hovering a paragraph, dim the others */ - &:has(${BodyParagraph}:hover) ${BodyParagraph}:not(:hover) { - opacity: 0.4; - } - @media (min-width: ${theme.breakpoints.md}px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } `; -// 1440 artboard: 384 + 556 + 500 — only two-column uses horizontal centering. const SingleColumnBody = styled.div` max-width: 556px; min-width: 0; width: 100%; - /* When hovering a paragraph, dim the others */ - &:has(${BodyParagraph}:hover) ${BodyParagraph}:not(:hover) { - opacity: 0.4; - } - @media (min-width: ${theme.breakpoints.md}px) { margin-left: 384px; margin-right: 500px; diff --git a/packages/twenty-website-new/src/sections/Editorial/components/Heading/Heading.tsx b/packages/twenty-website-new/src/sections/Editorial/components/Heading/Heading.tsx index f1ecd1d473..abc530ee3c 100644 --- a/packages/twenty-website-new/src/sections/Editorial/components/Heading/Heading.tsx +++ b/packages/twenty-website-new/src/sections/Editorial/components/Heading/Heading.tsx @@ -6,11 +6,6 @@ const HeadingWrap = styled.div` max-width: 617px; min-width: 0; width: 100%; - transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); - - &:hover { - transform: translateX(8px); - } `; type EditorialHeadingProps = { diff --git a/packages/twenty-website-new/src/sections/Editorial/components/Root/Root.tsx b/packages/twenty-website-new/src/sections/Editorial/components/Root/Root.tsx index 692d65c57d..98d6eaebc3 100644 --- a/packages/twenty-website-new/src/sections/Editorial/components/Root/Root.tsx +++ b/packages/twenty-website-new/src/sections/Editorial/components/Root/Root.tsx @@ -14,23 +14,6 @@ const Inner = styled.div` flex-direction: column; gap: ${theme.spacing(10)}; width: 100%; - - /* Smooth transition for the children elements */ - & > * { - transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); - } - - /* When hovering over any direct child, aggressively shrink and dim the other */ - &:has(> div:hover) > div:not(:hover) { - opacity: 0.1; - transform: scale(0.95) translateY(12px); - } - - /* Expand the hovered element */ - &:has(> div:hover) > div:hover { - transform: scale(1.02); - z-index: 2; - } `; const StyledContainer = styled(Container)` diff --git a/packages/twenty-website-new/src/sections/EngagementBand/components/Heading/Heading.tsx b/packages/twenty-website-new/src/sections/EngagementBand/components/Heading/Heading.tsx index 4f1ea984f1..79f5d07f93 100644 --- a/packages/twenty-website-new/src/sections/EngagementBand/components/Heading/Heading.tsx +++ b/packages/twenty-website-new/src/sections/EngagementBand/components/Heading/Heading.tsx @@ -5,12 +5,6 @@ import { styled } from '@linaria/react'; const StyledHeading = styled(BaseHeading)` white-space: pre-line; - transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); - - &:hover { - opacity: 0.8; - transform: translateY(-4px); - } @media (min-width: ${theme.breakpoints.md}px) { max-width: 668px; diff --git a/packages/twenty-website-new/src/sections/Faq/components/Heading/Heading.tsx b/packages/twenty-website-new/src/sections/Faq/components/Heading/Heading.tsx index 73c5b03701..79f86ca19e 100644 --- a/packages/twenty-website-new/src/sections/Faq/components/Heading/Heading.tsx +++ b/packages/twenty-website-new/src/sections/Faq/components/Heading/Heading.tsx @@ -2,7 +2,6 @@ import { Heading as BaseHeading } from '@/design-system/components'; import type { HeadingType } from '@/design-system/components/Heading/types/Heading'; import { theme } from '@/theme'; import { css } from '@linaria/core'; -import { styled } from '@linaria/react'; const faqHeadingClassName = css` white-space: pre-line; @@ -12,31 +11,18 @@ const faqHeadingClassName = css` } `; -const HeadingWrapper = styled.div` - transition: - transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), - opacity 0.4s ease; - - &:hover { - transform: translateX(4px); - opacity: 0.8; - } -`; - type HeadingProps = { segments: HeadingType[]; }; export function Heading({ segments }: HeadingProps) { return ( - - - + ); } diff --git a/packages/twenty-website-new/src/sections/Helped/components/Card/Card.tsx b/packages/twenty-website-new/src/sections/Helped/components/Card/Card.tsx index dc61497eaf..3d0bb9ad01 100644 --- a/packages/twenty-website-new/src/sections/Helped/components/Card/Card.tsx +++ b/packages/twenty-website-new/src/sections/Helped/components/Card/Card.tsx @@ -1,4 +1,9 @@ -import { Body, Heading, LazyEmbed, LinkButton } from '@/design-system/components'; +import { + Body, + Heading, + LazyEmbed, + LinkButton, +} from '@/design-system/components'; import { CLIENT_ICONS } from '@/icons'; import { HelpedCardShape } from '@/sections/Helped/HelpedCardShape'; import type { HeadingCardType } from '@/sections/Helped/types/HeadingCard'; @@ -19,32 +24,11 @@ const CardRoot = styled.article` position: relative; row-gap: ${theme.spacing(2.5)}; width: 100%; - transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease; + transition: + transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), + filter 0.6s ease; transform-style: preserve-3d; perspective: 1200px; - - /* Group hover context to dim other cards */ - &:hover { - transform: translateY(-16px) scale(1.02) rotateX(2deg) rotateY(-2deg); - z-index: 10; - } - - /* Complex hover shadow */ - &::before { - content: ''; - position: absolute; - inset: 0; - border-radius: ${theme.radius(4)}; - box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4); - opacity: 0; - transition: opacity 0.6s ease; - z-index: -1; - pointer-events: none; - } - - &:hover::before { - opacity: 1; - } `; const LogoRow = styled.div` @@ -67,12 +51,6 @@ const VisualShell = styled.div` overflow: hidden; position: relative; width: 100%; - transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); - transform-style: preserve-3d; - - ${CardRoot}:hover & { - transform: translateZ(30px) scale(1.02); - } `; const StyledIframe = styled(LazyEmbed)` diff --git a/packages/twenty-website-new/src/sections/Helped/components/Scene/Scene.tsx b/packages/twenty-website-new/src/sections/Helped/components/Scene/Scene.tsx index 8dbfee7535..cacc7b6217 100644 --- a/packages/twenty-website-new/src/sections/Helped/components/Scene/Scene.tsx +++ b/packages/twenty-website-new/src/sections/Helped/components/Scene/Scene.tsx @@ -1,12 +1,12 @@ 'use client'; -import { styled } from '@linaria/react'; -import { useRef } from 'react'; import { Eyebrow, Heading } from '@/design-system/components'; import { HelpedSceneScrollLayoutEffect } from '@/sections/Helped/effect-components/HelpedSceneScrollLayoutEffect'; import type { HelpedDataType } from '@/sections/Helped/types/HelpedData'; import { CARD_WIDTH_DESKTOP } from '@/sections/Helped/utils/helped-scene-layout'; import { theme } from '@/theme'; +import { styled } from '@linaria/react'; +import { useRef } from 'react'; import { Card } from '../Card/Card'; const SCROLL_HEIGHT_VH = 420; @@ -39,16 +39,6 @@ const HeadlineBlock = styled.div` text-align: center; width: 100%; z-index: 1; - - span { - transition: opacity 0.4s ease; - } - - h1:has(span:hover) span:not(:hover), - h2:has(span:hover) span:not(:hover), - h3:has(span:hover) span:not(:hover) { - opacity: 0.2; - } `; const CardsLayer = styled.div` diff --git a/packages/twenty-website-new/src/sections/Hero/components/Body/Body.tsx b/packages/twenty-website-new/src/sections/Hero/components/Body/Body.tsx index f41fb4ef8d..8b4fb2c28a 100644 --- a/packages/twenty-website-new/src/sections/Hero/components/Body/Body.tsx +++ b/packages/twenty-website-new/src/sections/Hero/components/Body/Body.tsx @@ -11,18 +11,9 @@ const BodyContainer = styled.div` margin-top: calc(${theme.spacing(2)} - ${theme.spacing(6)}); max-width: 360px; width: 100%; - transition: color 0.4s ease; - - &:hover { - color: ${theme.colors.primary.text[100]}; - } &[data-page=${Pages.WhyTwenty}] { color: ${theme.colors.secondary.text[60]}; - - &:hover { - color: ${theme.colors.secondary.text[100]}; - } } @media (min-width: ${theme.breakpoints.md}px) { diff --git a/packages/twenty-website-new/src/sections/Hero/components/Heading/Heading.tsx b/packages/twenty-website-new/src/sections/Hero/components/Heading/Heading.tsx index d0b0754699..beaa696183 100644 --- a/packages/twenty-website-new/src/sections/Hero/components/Heading/Heading.tsx +++ b/packages/twenty-website-new/src/sections/Hero/components/Heading/Heading.tsx @@ -11,18 +11,6 @@ const HeadingContainer = styled.div` width: 100%; word-wrap: break-word; - /* Target the spans rendered by BaseHeading */ - span { - transition: opacity 0.4s ease; - } - - /* When hovering over the heading, dim un-hovered spans */ - h1:has(span:hover) span:not(:hover), - h2:has(span:hover) span:not(:hover), - h3:has(span:hover) span:not(:hover) { - opacity: 0.2; - } - &[data-page=${Pages.WhyTwenty}] { color: ${theme.colors.secondary.text[100]}; } diff --git a/packages/twenty-website-new/src/sections/HomeStepper/components/LeftColumn/LeftColumn.tsx b/packages/twenty-website-new/src/sections/HomeStepper/components/LeftColumn/LeftColumn.tsx index fcc641fced..6bc8bcb24c 100644 --- a/packages/twenty-website-new/src/sections/HomeStepper/components/LeftColumn/LeftColumn.tsx +++ b/packages/twenty-website-new/src/sections/HomeStepper/components/LeftColumn/LeftColumn.tsx @@ -35,17 +35,6 @@ const StepBlock = styled.div` min-height: 80vh; opacity: 0.3; row-gap: ${theme.spacing(4)}; - transition: opacity 0.4s ease; - - span { - transition: opacity 0.4s ease; - } - - h1:has(span:hover) span:not(:hover), - h2:has(span:hover) span:not(:hover), - h3:has(span:hover) span:not(:hover) { - opacity: 0.2; - } @media (min-width: ${theme.breakpoints.md}px) { min-height: 100vh; @@ -88,4 +77,4 @@ export function LeftColumn({ ); -} \ No newline at end of file +} diff --git a/packages/twenty-website-new/src/sections/Marquee/components/Phrase/Phrase.tsx b/packages/twenty-website-new/src/sections/Marquee/components/Phrase/Phrase.tsx index cfc2d533f9..df024f05f4 100644 --- a/packages/twenty-website-new/src/sections/Marquee/components/Phrase/Phrase.tsx +++ b/packages/twenty-website-new/src/sections/Marquee/components/Phrase/Phrase.tsx @@ -8,11 +8,6 @@ const PhraseGroup = styled.div` column-gap: ${theme.spacing(3)}; display: flex; flex-shrink: 0; - - &:hover > span { - opacity: 0.2; - transform: scale(0.95); - } `; const Segment = styled.span` @@ -20,16 +15,6 @@ const Segment = styled.span` font-weight: ${theme.font.weight.light}; line-height: 1; white-space: nowrap; - transition: - opacity 0.4s ease, - transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), - color 0.4s ease; - - &:hover { - opacity: 1 !important; - transform: scale(1) !important; - color: ${theme.colors.highlight[100]} !important; - } &[data-segment-index='0'] { color: inherit; diff --git a/packages/twenty-website-new/src/sections/Plans/components/Card/Card.tsx b/packages/twenty-website-new/src/sections/Plans/components/Card/Card.tsx index 5470a71d72..288ffabe3d 100644 --- a/packages/twenty-website-new/src/sections/Plans/components/Card/Card.tsx +++ b/packages/twenty-website-new/src/sections/Plans/components/Card/Card.tsx @@ -1,4 +1,9 @@ -import { Body, Heading, LazyEmbed, LinkButton } from '@/design-system/components'; +import { + Body, + Heading, + LazyEmbed, + LinkButton, +} from '@/design-system/components'; import { CheckIcon } from '@/icons/informative/Check'; import type { PlanCardType } from '@/sections/Plans/types'; import { theme } from '@/theme'; @@ -19,19 +24,8 @@ const StyledCard = styled.div` padding-right: ${theme.spacing(4)}; padding-top: ${theme.spacing(4)}; row-gap: ${theme.spacing(4)}; - transition: - transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), - box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), - border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative; z-index: 1; - - &:hover { - border-color: ${theme.colors.highlight[100]}; - transform: translateY(-12px) scale(1.02); - box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12); - z-index: 10; - } `; const CardHeader = styled.div` @@ -111,12 +105,7 @@ export function Card({ card, highlighted = false, maxBullets }: CardProps) { - + - + - - + ); } diff --git a/packages/twenty-website-new/src/sections/Problem/components/Root/Root.tsx b/packages/twenty-website-new/src/sections/Problem/components/Root/Root.tsx index 16a546037c..5c2761dbc4 100644 --- a/packages/twenty-website-new/src/sections/Problem/components/Root/Root.tsx +++ b/packages/twenty-website-new/src/sections/Problem/components/Root/Root.tsx @@ -16,23 +16,6 @@ const StyledContainer = styled(Container)` padding-right: ${theme.spacing(4)}; padding-top: ${theme.spacing(12)}; - /* Smooth transition for the children elements */ - & > * { - transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); - } - - /* When hovering one column, aggressively push the other one down and fade it out */ - &:has(> div:hover) > div:not(:hover) { - opacity: 0.1; - transform: translateY(24px) scale(0.95); - } - - /* Scale up the hovered column slightly */ - &:has(> div:hover) > div:hover { - transform: scale(1.02); - z-index: 2; - } - @media (min-width: ${theme.breakpoints.md}px) { column-gap: ${theme.spacing(4)}; grid-template-columns: 1fr 1fr; diff --git a/packages/twenty-website-new/src/sections/Signoff/components/Heading.tsx b/packages/twenty-website-new/src/sections/Signoff/components/Heading.tsx index 5be9fb112e..ee222d7cbf 100644 --- a/packages/twenty-website-new/src/sections/Signoff/components/Heading.tsx +++ b/packages/twenty-website-new/src/sections/Signoff/components/Heading.tsx @@ -11,11 +11,6 @@ const HeadingWrap = styled.div` max-width: 921px; min-width: 0; width: 100%; - transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); - - &:hover { - transform: translateY(-8px) scale(1.02); - } `; type HeadingProps = { diff --git a/packages/twenty-website-new/src/sections/Signoff/components/Root.tsx b/packages/twenty-website-new/src/sections/Signoff/components/Root.tsx index 990e304215..51247e46f9 100644 --- a/packages/twenty-website-new/src/sections/Signoff/components/Root.tsx +++ b/packages/twenty-website-new/src/sections/Signoff/components/Root.tsx @@ -27,35 +27,6 @@ const StyledContainer = styled(Container)` text-align: center; position: relative; z-index: 10; - transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); - - /* Whole container pushes forward on hover */ - &:hover { - transform: scale(1.05); - } - - /* Smooth transition for the children elements */ - & > * { - transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); - } - - /* When hovering over the heading, push it up and dim the rest */ - &:has(h2:hover) > div:not(:first-child) { - opacity: 0.2; - transform: translateY(16px); - } - - /* When hovering over the body text, push it left/right and dim the rest */ - &:has(div > p:hover) > div:not(:nth-child(2)) { - opacity: 0.2; - transform: scale(0.95); - } - - /* When hovering over CTA, push it up hugely and dim text */ - &:has(a:hover) > div:not(:last-child) { - opacity: 0.1; - transform: translateY(-24px) scale(0.9); - } @media (min-width: ${theme.breakpoints.md}px) { padding-bottom: ${theme.spacing(28)}; diff --git a/packages/twenty-website-new/src/sections/Statement/components/Decoration/Decoration.tsx b/packages/twenty-website-new/src/sections/Statement/components/Decoration/Decoration.tsx deleted file mode 100644 index 980bbdcfda..0000000000 --- a/packages/twenty-website-new/src/sections/Statement/components/Decoration/Decoration.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { theme } from '@/theme'; -import { styled } from '@linaria/react'; - -const Line = styled.div` - background: repeating-linear-gradient( - to bottom, - var(--statement-line) 0, - var(--statement-line) 4px, - transparent 4px, - transparent 8px - ); - height: 85%; - max-height: 938px; - pointer-events: none; - position: absolute; - right: ${theme.spacing(6)}; - top: 50%; - transform: translateY(-50%); - width: 1px; - - @media (max-width: ${theme.breakpoints.md - 1}px) { - display: none; - } -`; - -export function Decoration() { - return