Merge remote-tracking branch 'origin/upstream'

zhcndoc · Sep 25, 2024 · 4b0081c · 4b0081c
2 parents 7e4c93e + 38f7f90
commit 4b0081c
Show file tree

Hide file tree

Showing 21 changed files with 319 additions and 146 deletions.
diff --git a/public/images/v2/revenue-date.png b/public/images/v2/revenue-date.png
diff --git a/public/images/v2/revenue-event.png b/public/images/v2/revenue-event.png
diff --git a/public/images/v2/revenue-property.png b/public/images/v2/revenue-property.png
diff --git a/public/images/v2/revenue-report.png b/public/images/v2/revenue-report.png
diff --git a/public/images/v2/revenue-user.png b/public/images/v2/revenue-user.png
diff --git a/public/images/v2/revenue-website.png b/public/images/v2/revenue-website.png
diff --git a/src/app/(website)/Features.module.css b/src/app/(website)/Features.module.css
@@ -1,5 +1,9 @@
 .features {
-  padding: 0px 20px;
+  padding: 0 20px;
+}
+
+.block {
+  margin-bottom: 300px;
 }
 
 @media screen and (max-width: 360px) {

diff --git a/src/app/(website)/Features.tsx b/src/app/(website)/Features.tsx
@@ -1,12 +1,12 @@
 'use client';
 import PageHeader from 'components/layout/PageHeader';
-import ScrollBlock from 'components/layout/ScrollBlock';
 import { Blocks } from 'lib/constants';
 import LinkButton from 'components/common/LinkButton';
 import { Flexbox, Icon, Icons, Text } from 'react-basics';
 import styles from './Features.module.css';
+import ScrollBlock from 'components/layout/ScrollBlock';
 
-const items = [
+const items: any = [
   Blocks.simpleAnalytics,
   Blocks.visitorInsights,
   Blocks.customEvents,

diff --git a/src/app/(website)/page.tsx b/src/app/(website)/page.tsx
@@ -5,7 +5,6 @@ import Statements from './Statements';
 import QuickStart from './QuickStart';
 import Quotes from './Quotes';
 import Features from './Features';
-import Personas from 'app/(website)/Personas';
 import OpenSource from 'app/(website)/OpenSource';
 import Companies from 'app/(website)/Companies';
 import styles from './page.module.css';
@@ -14,11 +13,10 @@ export default function () {
   return (
     <article className={styles.container}>
       <Hero />
-      <Statements />
       <Companies />
+      <Statements />
       <Features />
       <QuickStart />
-      <Personas />
       <OpenSource />
       <Quotes />
       <GetStartedBanner />

diff --git a/src/app/(website)/pricing/Features.module.css b/src/app/(website)/pricing/Features.module.css
@@ -6,7 +6,7 @@
 .features tr {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--base400);
+  border-bottom: 1px solid var(--base300);
 }
 
 .features th,
@@ -25,6 +25,9 @@
 }
 
 .features .header {
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
   height: 100px;
   border: 0;
 }

diff --git a/src/app/(website)/pricing/Features.tsx b/src/app/(website)/pricing/Features.tsx
@@ -6,35 +6,63 @@ import styles from './Features.module.css';
 
 const features = [
   {
-    label: '数据',
-    items: [['摄取（包括）', '10K', '100K to 20M', 'Custom']],
+    label: 'Data',
+    items: [
+      ['Events (included)', '100K', '1 million', 'Custom'],
+      ['Additional events', false, '$0.00002 per event', 'Custom'],
+      ['Data import', true, true, true],
+      ['Data export', true, true, true],
+    ],
   },
   {
     label: '分析',
     items: [
-      ['网站', '最多 3 个', '无限制', '无限制'],
-      ['团队', false, true, true],
-      ['自定义事件', true, true, true],
-      ['自定义数据', true, true, true],
-      ['API 访问', false, true, true],
+      ['Websites', 'Up to 3', 'Unlimited', 'Unlimited'],
+      ['Teams', false, true, true],
+      ['Team members', false, 'Unlimited', 'Unlimited'],
+      ['Custom events', true, true, true],
+      ['Event properties', true, true, true],
+      ['Session properties', true, true, true],
+      ['API access', 'Limited', true, true],
+    ],
+  },
+  {
+    label: 'Reports',
+    items: [
+      ['Insights', true, true, true],
+      ['Funnel Analysis', true, true, true],
+      ['User Retention', true, true, true],
+      ['UTM parameters', true, true, true],
+      ['Goals', true, true, true],
+      ['User Journey', true, true, true],
     ],
   },
   {
     label: '监视',
     items: [
-      ['实时事件', true, true, true],
-      ['自定义仪表板', true, true, true],
-      ['电子邮件提醒', false, false, true],
+      ['Realtime events', true, true, true],
+      ['Custom dashboards', true, true, true],
+      ['Email reports', false, true, true],
+    ],
+  },
+  {
+    label: 'Privacy',
+    items: [
+      ['GDPR compliant', true, true, true],
+      ['CCPR compliant', true, true, true],
+      ['No cookie banners required', true, true, true],
     ],
   },
   {
     label: '支持',
     items: [
-      ['社区支持', true, true, true],
-      ['电子邮件支持', false, true, true],
-      ['正常运行时间 SLA', false, false, true],
-      ['顾客引导支持', false, false, true],
-      ['指定支持工程师', false, false, true],
+      ['Community support', true, true, true],
+      ['Email support', false, true, true],
+      ['Enterprise support', false, false, true],
+      ['Uptime SLA', false, false, true],
+      ['Invoice billing', false, false, true],
+      ['Onboarding assistance', false, false, true],
+      ['Designated support engineer', false, false, true],
     ],
   },
 ];
@@ -56,9 +84,7 @@ export default function Features() {
             return (
               <Fragment key={label}>
                 <tr>
-                  <td className={styles.header}>
-                    <h2>{label}</h2>
-                  </td>
+                  <td className={styles.header}>{label}</td>
                 </tr>
                 {items.map((item, index) => {
                   return (

diff --git a/src/app/(website)/pricing/Plans.module.css b/src/app/(website)/pricing/Plans.module.css
@@ -5,86 +5,57 @@
   justify-content: center;
 }
 
-.plans ul {
-  margin: 0;
-  padding: 0;
-}
-
 .plans li {
   display: flex;
   align-items: center;
   list-style: none;
 }
 
-.plans strong {
-  font-size: 42px;
-  font-weight: 700;
+.interval {
+  font-size: 16px;
+  color: var(--base700);
+  margin-left: 10px;
 }
 
 .plan {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 30px;
-  border-radius: 10px;
-  background: var(--base75);
+  border-radius: 5px;
   margin: 0 auto;
-  border: 2px solid var(--primary400);
+  border: 1px solid var(--base400);
   width: 100%;
 }
 
-.plan:first-child {
-  border: 0;
-}
-
-.plan:last-child {
-  color: var(--base50);
-  background: var(--blue800);
-}
-
-.plan:last-child svg {
-  fill: var(--base50);
+.plan:nth-child(2) {
+  border-color: var(--base700);
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
 .title {
   display: flex;
   align-items: center;
   gap: 20px;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: 600;
 }
 
-.title svg {
-  opacity: 0.5;
-}
-
-.description {
-  font-weight: 400;
-  margin-bottom: 10px;
-}
-
 .price {
+  font-size: 42px;
+  font-weight: 700;
   line-height: 4rem;
 }
 
-.beta {
-  padding: 30px;
-  margin: 40px auto;
-  border-radius: 10px;
-  background: #eaf4ff;
-}
-
 .button {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 40px;
 }
 
-.button button {
-  font-weight: 700;
-}
-
 .signup {
   margin: 30px auto;
   border: 1px solid var(--base300);

diff --git a/src/app/(website)/pricing/Plans.tsx b/src/app/(website)/pricing/Plans.tsx
@@ -2,48 +2,55 @@
 import { Button } from 'react-basics';
 import Checkmark from 'assets/checkmark.svg';
 import Link from 'next/link';
-import styles from './Plans.module.css';
 import { CLOUD_URL } from 'lib/constants';
 import useQueryString from 'components/hooks/useQueryString';
+import styles from './Plans.module.css';
 
 export default function Plans() {
   const query = useQueryString({ ref: 'umami-pricing' });
 
   const plans = [
     {
-      name: '爱好',
-      price: (
-        <>
-          <strong>$0</strong> / 月
-        </>
-      ),
-      description: '每月高达 10,000 个活动',
-      features: ['多达 3 个网站', '1 年数据保留', '社区支持'],
+      name: 'Hobby',
+      price: '$0',
+      interval: '/ month',
+      description: 'Get started:',
+      features: [
+        '100K events per month',
+        'Up to 3 websites',
+        '6 month data retention',
+        'Community support',
+      ],
       url: `${CLOUD_URL}/signup${query}&plan=hobby`,
       button: '开始',
     },
     {
-      name: '专业',
-      price: (
-        <>
-          <strong>$9</strong> / 月起
-        </>
-      ),
-      description: '基于使用量的简单定价',
-      features: ['无限的网站', '无限的团队成员', '5 年数据保留', '电子邮件支持'],
+      name: 'Pro',
+      price: '$20',
+      interval: '/ month',
+      description: 'Everything in Hobby, plus:',
+      features: [
+        '1 million events per month',
+        '$0.00002 per additional event',
+        'Unlimited websites',
+        'Unlimited team members',
+        '5 year data retention',
+        'Email support',
+      ],
       url: `${CLOUD_URL}/signup${query}&plan=pro`,
-      button: '尝试 14 天免费试用',
+      button: 'Try 14-day free trial',
+      variant: 'primary',
     },
     {
-      name: '企业',
-      price: <strong>自定义</strong>,
-      description: '为你的业务量身定制',
+      name: 'Enterprise',
+      price: 'Contact us',
+      description: 'Everything in Pro, plus:',
       features: [
-        '无限的网站',
-        '无限的团队成员',
-        '自定义数据保留',
-        '顾客引导支持',
-        '指定支持工程师',
+        'Custom pricing',
+        'Custom data retention',
+        'Uptime SLA',
+        'Invoice billing',
+        'Enterprise support',
       ],
       url: 'mailto:sales@umami.is?subject=Umami Cloud enterprise pricing',
       button: '联系我们',
@@ -52,31 +59,36 @@ export default function Plans() {
 
   return (
     <div className={styles.plans}>
-      {plans.map(({ name, price, description, features, url, button }) => {
-        return (
-          <div key={name} className={styles.plan}>
-            <div>
-              <div className={styles.title}>{name}</div>
-              <div className={styles.price}>{price}</div>
-              <div className={styles.description}>{description}</div>
-              <ul>
-                {features.map((feat, index) => {
-                  return (
-                    <li key={index}>
-                      <Checkmark /> {feat}
-                    </li>
-                  );
-                })}
-              </ul>
-            </div>
-            <div className={styles.button}>
-              <Link href={url}>
-                <Button variant="secondary">{button}</Button>
-              </Link>
+      {plans.map(
+        ({ name, price, interval, description, features, url, button, variant = 'secondary' }) => {
+          return (
+            <div key={name} className={styles.plan}>
+              <div>
+                <div className={styles.title}>{name}</div>
+                <div className={styles.price}>
+                  {price}
+                  <span className={styles.interval}>{interval}</span>
+                </div>
+                <div className={styles.description}>{description}</div>
+                <ul>
+                  {features.map((feat, index) => {
+                    return (
+                      <li key={index}>
+                        <Checkmark /> {feat}
+                      </li>
+                    );
+                  })}
+                </ul>
+              </div>
+              <div className={styles.button}>
+                <Link href={url}>
+                  <Button variant={variant as any}>{button}</Button>
+                </Link>
+              </div>
             </div>
-          </div>
-        );
-      })}
+          );
+        },
+      )}
     </div>
   );
 }