+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat.
+
+ Information we collect
+
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+ dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+ accusantium doloremque laudantium.
+
+
+ Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+ architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
+ quia voluptas sit aspernatur aut odit aut fugit.
+
+ How we use information
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui
+ blanditiis praesentium voluptatum deleniti atque corrupti quos dolores
+ et quas molestias excepturi sint occaecati cupiditate non provident.
+
+
+ Similique sunt in culpa qui officia deserunt mollitia animi, id est
+ laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita
+ distinctio nam libero tempore, cum soluta nobis est eligendi optio
+ cumque nihil impedit quo minus id quod maxime placeat facere possimus.
+
+ Contact
+
+ Omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem
+ quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet
+ ut et voluptates repudiandae sint et molestiae non recusandae.
+
+
+ );
+}
diff --git a/packages/twenty-website-new/src/app/product/constants/demo.ts b/packages/twenty-website-new/src/app/product/_constants/demo.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/product/constants/demo.ts
rename to packages/twenty-website-new/src/app/product/_constants/demo.ts
diff --git a/packages/twenty-website-new/src/app/product/constants/feature.ts b/packages/twenty-website-new/src/app/product/_constants/feature.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/product/constants/feature.ts
rename to packages/twenty-website-new/src/app/product/_constants/feature.ts
diff --git a/packages/twenty-website-new/src/app/product/constants/hero.ts b/packages/twenty-website-new/src/app/product/_constants/hero.ts
similarity index 63%
rename from packages/twenty-website-new/src/app/product/constants/hero.ts
rename to packages/twenty-website-new/src/app/product/_constants/hero.ts
index 989fed27ca..0bfc0ac929 100644
--- a/packages/twenty-website-new/src/app/product/constants/hero.ts
+++ b/packages/twenty-website-new/src/app/product/_constants/hero.ts
@@ -1,4 +1,4 @@
-import { HeroIllustrationDataType } from '@/sections/Hero/types';
+import type { HeroIllustrationDataType } from '@/sections/Hero/types';
export const HERO_DATA: HeroIllustrationDataType = {
heading: [
@@ -9,7 +9,7 @@ export const HERO_DATA: HeroIllustrationDataType = {
text: 'Modern interface. AI assistance. All the features you need, ready from day one.',
},
illustration: {
- src: 'https://app.endlesstools.io/embed/0bcf3ac2-58cf-4cd5-90bd-e8fada9816a9',
- title: 'Endless Tools Editor',
+ src: '/illustrations/product/hero/hero.glb',
+ title: 'Product hero illustration',
},
};
diff --git a/packages/twenty-website-new/src/app/product/_constants/index.ts b/packages/twenty-website-new/src/app/product/_constants/index.ts
new file mode 100644
index 0000000000..9fef45f826
--- /dev/null
+++ b/packages/twenty-website-new/src/app/product/_constants/index.ts
@@ -0,0 +1,6 @@
+export { DEMO_DATA } from './demo';
+export { FEATURE_DATA } from './feature';
+export { HERO_DATA } from './hero';
+export { STEPPER_DATA } from './stepper';
+export { TABS_DATA } from './tabs';
+export { THREE_CARDS_ILLUSTRATION_DATA } from './three-cards';
diff --git a/packages/twenty-website-new/src/app/product/constants/stepper.ts b/packages/twenty-website-new/src/app/product/_constants/stepper.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/product/constants/stepper.ts
rename to packages/twenty-website-new/src/app/product/_constants/stepper.ts
diff --git a/packages/twenty-website-new/src/app/product/constants/tabs.ts b/packages/twenty-website-new/src/app/product/_constants/tabs.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/product/constants/tabs.ts
rename to packages/twenty-website-new/src/app/product/_constants/tabs.ts
diff --git a/packages/twenty-website-new/src/app/product/constants/three-cards.ts b/packages/twenty-website-new/src/app/product/_constants/three-cards.ts
similarity index 72%
rename from packages/twenty-website-new/src/app/product/constants/three-cards.ts
rename to packages/twenty-website-new/src/app/product/_constants/three-cards.ts
index 563c3ea41b..61a1e6a05f 100644
--- a/packages/twenty-website-new/src/app/product/constants/three-cards.ts
+++ b/packages/twenty-website-new/src/app/product/_constants/three-cards.ts
@@ -1,4 +1,4 @@
-import { ThreeCardsIllustrationDataType } from '@/sections/ThreeCards/types';
+import type { ThreeCardsIllustrationDataType } from '@/sections/ThreeCards/types';
export const THREE_CARDS_ILLUSTRATION_DATA: ThreeCardsIllustrationDataType = {
eyebrow: {
@@ -18,8 +18,8 @@ export const THREE_CARDS_ILLUSTRATION_DATA: ThreeCardsIllustrationDataType = {
benefits: undefined,
attribution: undefined,
illustration: {
- src: 'https://app.endlesstools.io/embed/21767ad6-67f4-4941-a668-6cf772c27621',
- title: 'Endless Tools Editor',
+ src: '/illustrations/product/three-cards-illustration/one.glb',
+ title: 'Built for speed illustration',
},
},
{
@@ -30,8 +30,8 @@ export const THREE_CARDS_ILLUSTRATION_DATA: ThreeCardsIllustrationDataType = {
benefits: undefined,
attribution: undefined,
illustration: {
- src: 'https://app.endlesstools.io/embed/9c504c9c-46f9-423c-98b3-2e840ddb3b1e',
- title: 'Endless Tools Editor',
+ src: '/illustrations/product/three-cards-illustration/two.glb',
+ title: 'Real-time data illustration',
},
},
{
@@ -42,8 +42,8 @@ export const THREE_CARDS_ILLUSTRATION_DATA: ThreeCardsIllustrationDataType = {
benefits: undefined,
attribution: undefined,
illustration: {
- src: 'https://app.endlesstools.io/embed/8d577747-2718-4e7e-87a6-dd9c334f3903',
- title: 'Endless Tools Editor',
+ src: '/illustrations/product/three-cards-illustration/three.glb',
+ title: 'Stay in flow illustration',
},
},
],
diff --git a/packages/twenty-website-new/src/app/product/page.tsx b/packages/twenty-website-new/src/app/product/page.tsx
index c792375fd1..a1e31c8945 100644
--- a/packages/twenty-website-new/src/app/product/page.tsx
+++ b/packages/twenty-website-new/src/app/product/page.tsx
@@ -1,17 +1,20 @@
-import { FAQ_DATA } from '@/app/(home)/constants/faq';
-import { MENU_DATA } from '@/app/(home)/constants/menu';
-import { TRUSTED_BY_DATA } from '@/app/(home)/constants/trusted-by';
-import { DEMO_DATA } from '@/app/product/constants/demo';
-import { FEATURE_DATA } from '@/app/product/constants/feature';
-import { HERO_DATA } from '@/app/product/constants/hero';
-import { STEPPER_DATA } from '@/app/product/constants/stepper';
-import { TABS_DATA } from '@/app/product/constants/tabs';
-import { THREE_CARDS_ILLUSTRATION_DATA } from '@/app/product/constants/three-cards';
+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,
+ HERO_DATA,
+ STEPPER_DATA,
+ TABS_DATA,
+ THREE_CARDS_ILLUSTRATION_DATA,
+} from '@/app/product/_constants';
import { Body, Eyebrow, Heading, LinkButton } from '@/design-system/components';
import { Pages } from '@/enums/pages';
+import { ScrollReveal } from '@/motion/ScrollReveal';
import { Demo } from '@/sections/Demo/components';
-import { Feature } from '@/sections/Feature/components';
import { Faq } from '@/sections/Faq/components';
+import { Feature } from '@/sections/Feature/components';
import { Hero } from '@/sections/Hero/components';
import { Menu } from '@/sections/Menu/components';
import { ProductStepper } from '@/sections/ProductStepper/components';
@@ -19,83 +22,109 @@ import { Tabs } from '@/sections/Tabs/components';
import { ThreeCards } from '@/sections/ThreeCards/components';
import { TrustedBy } from '@/sections/TrustedBy/components';
import { theme } from '@/theme';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+ title: 'Product — Twenty',
+ description:
+ 'Modern interface. AI assistance. All the features you need, ready from day one.',
+};
+
+export default async function ProductPage() {
+ const stats = await fetchCommunityStats();
+ const menuSocialLinks = mergeSocialLinkLabels(
+ MENU_DATA.socialLinks,
+ stats,
+ );
-export default function ProductPage() {
return (
<>
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
+ odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
+ quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
+ mauris.
+
+ Acceptance of terms
+
+ Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum
+ lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent
+ per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in
+ libero. Sed dignissim lacinia nunc.
+
+
+ Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at
+ dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel
+ nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis,
+ luctus non, massa.
+
+ Use of the service
+
+ Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus
+ metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque
+ volutpat condimentum velit. Class aptent taciti sociosqu ad litora
+ torquent per conubia nostra, per inceptos himenaeos.
+
+
+ Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque
+ adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut
+ fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat
+ imperdiet. Vestibulum sapien. Proin quam.
+
+ Limitation of liability
+
+ Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed
+ lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae
+ pharetra auctor, sem massa mattis sem, at interdum magna augue eget
+ diam.
+
+
+ Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+ cubilia curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed
+ non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit
+ amet pede facilisis laoreet.
+
+
+ );
+}
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/editorial-four.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/editorial-four.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/why-twenty/constants/editorial-four.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/editorial-four.ts
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/editorial-one.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/editorial-one.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/why-twenty/constants/editorial-one.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/editorial-one.ts
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/editorial-three.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/editorial-three.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/why-twenty/constants/editorial-three.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/editorial-three.ts
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/editorial-two.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/editorial-two.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/why-twenty/constants/editorial-two.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/editorial-two.ts
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/hero.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/hero.ts
similarity index 73%
rename from packages/twenty-website-new/src/app/why-twenty/constants/hero.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/hero.ts
index 4ce36be1c6..7e8ef03690 100644
--- a/packages/twenty-website-new/src/app/why-twenty/constants/hero.ts
+++ b/packages/twenty-website-new/src/app/why-twenty/_constants/hero.ts
@@ -1,4 +1,4 @@
-import { HeroWhyTwentyDataType } from '@/sections/Hero/types';
+import type { HeroWhyTwentyDataType } from '@/sections/Hero/types';
export const HERO_DATA: HeroWhyTwentyDataType = {
heading: [
@@ -13,7 +13,7 @@ export const HERO_DATA: HeroWhyTwentyDataType = {
alt: '',
},
illustration: {
- src: 'https://app.endlesstools.io/embed/479566da-0f55-44ef-99fe-90350aa88b9c',
- title: 'Endless Tools Editor',
+ src: '/illustrations/why-twenty/hero/logo.glb',
+ title: 'Why Twenty hero illustration',
},
};
diff --git a/packages/twenty-website-new/src/app/why-twenty/_constants/index.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/index.ts
new file mode 100644
index 0000000000..d2ad5a8504
--- /dev/null
+++ b/packages/twenty-website-new/src/app/why-twenty/_constants/index.ts
@@ -0,0 +1,11 @@
+export { EDITORIAL_FOUR } from './editorial-four';
+export { EDITORIAL_ONE } from './editorial-one';
+export { EDITORIAL_THREE } from './editorial-three';
+export { EDITORIAL_TWO } from './editorial-two';
+export { HERO_DATA } from './hero';
+export { MARQUEE_DATA } from './marquee';
+export { QUOTE_DATA } from './quote';
+export { SIGNOFF_DATA } from './signoff';
+export { STATEMENT_ONE } from './statement-one';
+export { STATEMENT_TWO } from './statement-two';
+export { STEPPER_DATA } from './stepper';
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/marquee.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/marquee.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/why-twenty/constants/marquee.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/marquee.ts
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/quote.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/quote.ts
similarity index 70%
rename from packages/twenty-website-new/src/app/why-twenty/constants/quote.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/quote.ts
index de79da3d30..7a22feb73e 100644
--- a/packages/twenty-website-new/src/app/why-twenty/constants/quote.ts
+++ b/packages/twenty-website-new/src/app/why-twenty/_constants/quote.ts
@@ -2,8 +2,8 @@ import type { QuoteDataType } from '@/sections/Quote/types/QuoteData';
export const QUOTE_DATA: QuoteDataType = {
illustration: {
- src: 'https://app.endlesstools.io/embed/48586814-c307-4abd-8eec-0270ef3e91ce',
- title: 'Endless Tools Editor',
+ src: '/illustrations/why-twenty/quote/quote.glb',
+ title: 'Quote illustration',
},
heading: [
{ text: '“In the AI age,\n', fontFamily: 'serif' },
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/signoff.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/signoff.ts
similarity index 80%
rename from packages/twenty-website-new/src/app/why-twenty/constants/signoff.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/signoff.ts
index f55ea37b05..d0a603fe1b 100644
--- a/packages/twenty-website-new/src/app/why-twenty/constants/signoff.ts
+++ b/packages/twenty-website-new/src/app/why-twenty/_constants/signoff.ts
@@ -1,4 +1,4 @@
-import { SignoffDataType } from '@/sections/Signoff/types';
+import type { SignoffDataType } from '@/sections/Signoff/types';
export const SIGNOFF_DATA: SignoffDataType = {
heading: [
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/statement-one.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/statement-one.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/why-twenty/constants/statement-one.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/statement-one.ts
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/statement-two.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/statement-two.ts
similarity index 100%
rename from packages/twenty-website-new/src/app/why-twenty/constants/statement-two.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/statement-two.ts
diff --git a/packages/twenty-website-new/src/app/why-twenty/constants/stepper.ts b/packages/twenty-website-new/src/app/why-twenty/_constants/stepper.ts
similarity index 87%
rename from packages/twenty-website-new/src/app/why-twenty/constants/stepper.ts
rename to packages/twenty-website-new/src/app/why-twenty/_constants/stepper.ts
index 3520af7cdf..5bb3b4e7b6 100644
--- a/packages/twenty-website-new/src/app/why-twenty/constants/stepper.ts
+++ b/packages/twenty-website-new/src/app/why-twenty/_constants/stepper.ts
@@ -14,7 +14,7 @@ export const STEPPER_DATA: WhyTwentyStepperDataType = {
},
],
illustration: {
- src: 'https://app.endlesstools.io/embed/ddc485f9-cc8e-422b-a076-5430eb84e21a',
- title: 'Endless Tools Editor',
+ src: '/illustrations/why-twenty/stepper/logo.glb',
+ title: 'Our vision illustration',
},
};
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 05173b718a..54764f1945 100644
--- a/packages/twenty-website-new/src/app/why-twenty/page.tsx
+++ b/packages/twenty-website-new/src/app/why-twenty/page.tsx
@@ -1,17 +1,22 @@
-import { MENU_DATA } from '@/app/(home)/constants/menu';
-import { EDITORIAL_FOUR } from '@/app/why-twenty/constants/editorial-four';
-import { EDITORIAL_ONE } from '@/app/why-twenty/constants/editorial-one';
-import { EDITORIAL_THREE } from '@/app/why-twenty/constants/editorial-three';
-import { EDITORIAL_TWO } from '@/app/why-twenty/constants/editorial-two';
-import { HERO_DATA } from '@/app/why-twenty/constants/hero';
-import { MARQUEE_DATA } from '@/app/why-twenty/constants/marquee';
-import { QUOTE_DATA } from '@/app/why-twenty/constants/quote';
-import { SIGNOFF_DATA } from '@/app/why-twenty/constants/signoff';
-import { STATEMENT_ONE } from '@/app/why-twenty/constants/statement-one';
-import { STATEMENT_TWO } from '@/app/why-twenty/constants/statement-two';
-import { STEPPER_DATA } from '@/app/why-twenty/constants/stepper';
+import { MENU_DATA } from '@/app/_constants';
+import {
+ EDITORIAL_FOUR,
+ EDITORIAL_ONE,
+ EDITORIAL_THREE,
+ EDITORIAL_TWO,
+ HERO_DATA,
+ MARQUEE_DATA,
+ QUOTE_DATA,
+ SIGNOFF_DATA,
+ STATEMENT_ONE,
+ STATEMENT_TWO,
+ STEPPER_DATA,
+} from '@/app/why-twenty/_constants';
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';
@@ -21,112 +26,140 @@ import { Signoff } from '@/sections/Signoff/components';
import { Statement } from '@/sections/Statement/components';
import { WhyTwentyStepper } from '@/sections/WhyTwentyStepper/components';
import { theme } from '@/theme';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+ title: 'Why Twenty — Twenty',
+ description:
+ 'Most packaged software makes companies more similar. Learn why the future of CRM is built, not bought.',
+};
+
+export default async function WhyTwentyPage() {
+ const stats = await fetchCommunityStats();
+ const menuSocialLinks = mergeSocialLinkLabels(MENU_DATA.socialLinks, stats);
-export default function WhyTwentyPage() {
return (
<>