feat: support web entry

app/blog/[slug]/page.tsx

@@ -104,6 +104,7 @@ async function getData(slug: string) {
   try {
     const post = await getPostData(slug);
     const relatedPosts = await getRelatedPosts(post);
+
     return { post, relatedPosts };
   } catch (error) {
     notFound();

app/globals.scss

@@ -19,7 +19,7 @@
   --popover: 0 0% 100%;
   --popover-foreground: 222.2 84% 4.9%;
   --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
+  --primary-foreground: #fff;
   --secondary: #E7F5FF;
   --secondary-foreground: #333;
   --muted: #F4F5F7;

components/blog/articles.tsx

@@ -22,6 +22,7 @@ function Articles({ posts }: { posts: PostData[] }) {
     if (selectedCategory || searchValue) {
       return [];
     }
+
     return posts.filter((post) => post.pinned).sort((a, b) => a.pinned - b.pinned);
   }, [posts, searchValue, selectedCategory]);
 

components/blog/link.tsx

@@ -13,6 +13,7 @@ function Link({
       onClick={() => {
         if ('href' in props) {
           const href = props.href as string;
+
           window.open(href, '_blank');
         }
       }}

components/blog/outline.tsx

@@ -33,6 +33,7 @@ function Outline({ post }: { post: PostData }) {
 
     if (!sidebar || !container) return;
     const contanerWidth = container.getBoundingClientRect().width;
+
     sidebar.style.width = `${contanerWidth}px`;
     const handleScroll = () => {
       fixSidebarOnScroll({

components/blog/subscriber.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 
 function Subscriber() {
   const { email, setEmail, handleSubscribe } = useSubscriber();
+
   return (
     <div className={'flex flex-col gap-10'}>
       <div className={'flex items-center gap-[10px] max-md:flex-col max-md:gap-5'}>

components/layout/nav/drawer-nav.tsx

@@ -1,3 +1,4 @@
+import { useClient } from '@/lib/hooks/use-client';
 import Accordion from '@mui/material/Accordion';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
@@ -21,6 +22,7 @@ interface DrawerNavbarProps {
 
 export default function DrawerNavbar({ onClose, activePageKey, open }: DrawerNavbarProps) {
   const { downloadOS } = useDownload();
+  const { isMobile } = useClient();
   const [expanded, setExpanded] = useState<string>();
   const container = typeof window !== 'undefined' ? () => window.document.body : undefined;
 
@@ -123,7 +125,11 @@ export default function DrawerNavbar({ onClose, activePageKey, open }: DrawerNav
         <div className={'mb-[68px] w-full px-[20px] pt-[40px]'}>
           <button
             onClick={() => {
-              downloadOS();
+              if (!isMobile) {
+                window.open('https://appflowy.com', '_current');
+              } else {
+                downloadOS();
+              }
             }}
             className={'download-btn w-full'}
           >

components/layout/nav/navbar-popover.tsx

@@ -41,10 +41,18 @@ function NavbarPopover({
                 )}
                 <div className={'item-content'}>
                   <div className={'item-name'}>{item.name}</div>
-                  <div className={'item-desc'}>{item.desc}</div>
+                  {item.desc && <div className={'item-desc'}>{item.desc}</div>}
                 </div>
               </Link>
             ))}
+            {group.name === 'Download' && (
+              <div className={'w-full overflow-hidden whitespace-pre-wrap px-4 text-sm text-gray-400'}>
+                AppFlowy is now in{' '}
+                <Link className={'hover:text-primary underline'} href={'https://appflowy.com'}>
+                  your browser
+                </Link>
+              </div>
+            )}
           </div>
         ))}
       </div>

components/layout/nav/navbar.tsx

@@ -70,7 +70,7 @@ function Navbar() {
                 type: 'click',
               });
             }}
-            href={'/download'}
+            href={'https://appflowy.com'}
           >
             <button className={'download-btn download-free-btn'}>{'Start for free'}</button>
           </Link>

components/product/get-start.tsx

@@ -1,7 +1,10 @@
+'use client';
+import { useClient } from '@/lib/hooks/use-client';
 import Link from 'next/link';
 import React from 'react';
 
 function GetStart() {
+  const { isMobile } = useClient();
   return (
     <div className={'af-container bg-[#2B1A3F]'}>
       <div className={'af-box section-8'}>
@@ -17,9 +20,11 @@ function GetStart() {
           <Link className={'download-btn'} href={'/download'}>
             Download
           </Link>
-          <Link className={'live-demo-btn'} href={'/templates'}>
-            Templates
-          </Link>
+          {!isMobile && (
+            <Link className={'live-demo-btn'} href={'https://appflowy.com'}>
+              Try it free
+            </Link>
+          )}
         </div>
       </div>
     </div>

components/product/main-download.tsx

@@ -1,30 +1,21 @@
 'use client';
 
 import HeroDesc from '@/components/shared/hero-desc';
+import { Button } from '@/components/ui/button';
 import { useClient } from '@/lib/hooks/use-client';
 import { useDownload } from '@/lib/hooks/use-download';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useInView } from 'framer-motion';
 import { collectEvent, EventName } from '@/lib/collect';
 import LinuxBtnGroup from '@/components/shared/linux-btn-group';
 
 function MainDownload({ showDesc = true }: { showDesc?: boolean }) {
   const { downloadOS, getOsDownloadLink } = useDownload();
   const ref = useRef(null);
-  const { os, isClient, isLinux } = useClient();
+  const { isClient, isLinux, isMobile } = useClient();
   const inView = useInView(ref, {
     once: true,
   });
-  const name = useMemo(() => {
-    const name = os?.name?.toLowerCase() || '';
-
-    if (name.includes('mac')) return 'macOS';
-    if (name.includes('windows')) return 'Windows';
-    if (name.includes('android')) return 'Android';
-    if (name.includes('ios')) return 'iOS';
-
-    return 'macOS';
-  }, [os?.name]);
 
   useEffect(() => {
     if (inView && isClient) {
@@ -35,26 +26,46 @@ function MainDownload({ showDesc = true }: { showDesc?: boolean }) {
   }, [isClient, inView]);
   return (
     <div className={'main-download'}>
-      {isLinux ? (
-        <LinuxBtnGroup title={'Download for Linux'} />
-      ) : (
-        <button
-          onClick={() => {
-            const link = getOsDownloadLink();
-
-            if (!link) return;
-
-            collectEvent(EventName.homePageDownloadBtn, {
-              type: 'click',
-            });
-
-            downloadOS();
-          }}
-          className={'col download-btn gap-0 bg-[#8427E0] '}
-        >
-          <div className={'title'}>{`Download for ${name}`}</div>
-        </button>
-      )}
+      <div className={'flex w-full items-center justify-center gap-4 max-sm:flex-col'}>
+        {isLinux ? (
+          <LinuxBtnGroup title={'Download now'} />
+        ) : (
+          <Button
+            className={'flex-1'}
+            size={'2xl'}
+            onClick={() => {
+              const link = getOsDownloadLink();
+
+              if (!link) return;
+
+              collectEvent(EventName.homePageDownloadBtn, {
+                type: 'click',
+              });
+
+              downloadOS();
+            }}
+          >
+            <div className={'title'}>{`Download now`}</div>
+          </Button>
+        )}
+        {!isMobile && (
+          <Button
+            onClick={() => {
+              collectEvent(EventName.homePageTryForFreeBtn, {
+                type: 'click',
+              });
+
+              window.open('https://appflowy.com', '_current');
+            }}
+            className={'flex-1'}
+            size={'2xl'}
+            variant={'accent'}
+          >
+            Try it free
+          </Button>
+        )}
+      </div>
+
       {showDesc && <HeroDesc inView={inView} />}
     </div>
   );

components/shared/dropdown-btn.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/button';
 import React, { useEffect, useRef, useState } from 'react';
 import Popover from '@/components/shared/popover';
 import { List, MenuItem } from '@mui/material';
@@ -35,14 +36,15 @@ function DropdownBtn({
 
   return (
     <div ref={ref} className={`dropdown-btn ${disabled ? 'disabled' : ''}`}>
-      <div
+      <Button
+        size={'2xl'}
         onClick={() => {
           extension && onClick?.(extension);
         }}
         className={`download-btn dropdown-btn__title`}
       >
         {title} .{extension}
-      </div>
+      </Button>
 
       <div
         onClick={() => {

components/shared/hero-desc.tsx

@@ -29,7 +29,7 @@ function HeroDesc({ inView }: { inView?: boolean }) {
   };
 
   return (
-    <div className={'hero-desc text-primary text-[12px]'}>
+    <div className={'hero-desc text-primary text-center text-[12px]'}>
       <Link
         onClick={() => onClick(EventName.homePageWhatIsNewLink)}
         href={'/what-is-new'}

components/ui/button.tsx

@@ -1,59 +1,49 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        accent: 'bg-white text-accent-foreground shadow-sm hover:bg-accent',
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        '2xl': 'px-12 text-base rounded-[16px] py-[16px] px-12',
+        icon: 'h-9 w-9',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   }
-)
+);
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : 'button';
 
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
   }
-)
+);
 
-Button.displayName = "Button"
+Button.displayName = 'Button';
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

cypress/e2e/navigation.cy.ts

@@ -21,7 +21,7 @@ describe('Navigation', () => {
       cy.get('@menu').trigger('mouseover');
       // Ensure that the popover element is visible
       cy.get('.popover-paper').should('be.visible');
-      
+
       cy.get('.popover-paper').trigger('mouseover');
       // Ensure that the popover element is still visible
       cy.wait(300);
@@ -46,12 +46,6 @@ describe('Navigation', () => {
     // Ensure that the notification bar is no longer visible
     cy.get('.banner').not('exist');
   });
-
-  it('clicking the download for free button should navigate to the download page', () => {
-    cy.get('.navbar-btn-download').click();
-    // Wait for the page to navigate to /download
-    cy.url().should('include', '/download');
-  });
 });
 
 // Prevent TypeScript from reading file as legacy script

lib/collect.ts

@@ -1,5 +1,6 @@
 export enum EventName {
   homePageDownloadBtn = 'home_page_download_btn',
+  homePageTryForFreeBtn = 'home_page_try_for_free_btn',
   homePageWhatIsNewLink = 'home_page_what_is_new_link',
   homePageGetTemplatesLink = 'home_page_get_templates_link',
   homePageMorePlatformsLink = 'home_page_more_platforms_link',
@@ -36,6 +37,7 @@ export function collectEvent(
 export function collectEvent(
   eventName:
     | EventName.homePageDownloadBtn
+    | EventName.homePageTryForFreeBtn
     | EventName.navigatorGithubBtn
     | EventName.navigatorStartForFreeBtn
     | EventName.homePageGetStartedBtn

lib/config/footer.tsx

@@ -95,6 +95,10 @@ export const links = [
         name: 'Linux',
         link: '/download#Linux',
       },
+      {
+        name: 'Browser',
+        link: 'https://appflowy.com',
+      },
     ],
   },
   {