Merge pull request #3952 from signalco-io/next

Next

web/apps/doprocess/app/(rest)/(marketing)/page.tsx

@@ -1,14 +1,19 @@
 import { ListTodo, Play, Share } from '@signalco/ui-icons';
 import { NavigatingButton } from '@signalco/ui/NavigatingButton';
 import { KnownPages } from '../../../src/knownPages';
+import Footer from '../../../components/pages/Footer';
 import { ImagePlaceholder } from '../../../components/images/ImagePlaceholder';
 
 function FeaturesSection() {
     return (
         <section className="w-full py-2 sm:py-8 md:py-12 lg:py-24 xl:py-32">
             <div className="container mx-auto px-2 sm:px-4 md:px-6">
                 <div className="mb-5 text-center md:mb-10 lg:mb-20">
-                    <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Explore</h1>
+                    <h1
+                        id="explore"
+                        className="pt-5 text-3xl font-bold tracking-tighter sm:text-4xl md:pt-10 md:text-5xl lg:pt-20">
+                        Explore
+                    </h1>
                     <p className="mx-auto mt-4 max-w-[700px] text-zinc-500 dark:text-zinc-400 md:text-lg">
                         Explore our features and start your journey with us.
                     </p>
@@ -76,6 +81,7 @@ export default function LandingPage() {
         <main>
             <CoverSection />
             <FeaturesSection />
+            <Footer />
         </main>
     );
 }

web/apps/doprocess/app/global.css

@@ -4,3 +4,7 @@ html, body, #__next {
   height: 100%;
   width: 100%;
 }
+
+:target {
+  scroll-margin-top: 64px;
+}

web/apps/doprocess/components/NavMenu.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { Link } from '@signalco/ui-primitives/Link';
+import { Button } from '@signalco/ui-primitives/Button';
+import { Navigate } from '@signalco/ui-icons';
+import { SignInButton, SignUpButton, SignedIn, SignedOut } from '@clerk/nextjs';
+import { KnownPages } from '../src/knownPages';
+import { UserButton } from './UserButton';
+
+type NavLinkItem = {
+    href: string,
+    text: string
+};
+
+export const navLinks: NavLinkItem[] = [
+    { href: '#explore', text: 'Explore' },
+    // { href: KnownPages.Pricing, text: 'Pricing' }
+];
+
+export function NavMenu({ cta }: { cta?: boolean; }) {
+    return (
+        <>
+            {navLinks.map(nl => (
+                <Link key={nl.href} href={nl.href}>
+                    <Button variant="plain" size="lg">{nl.text}</Button>
+                </Link>
+            ))}
+            <SignedOut>
+                <SignInButton
+                    redirectUrl={KnownPages.Runs}
+                    mode="modal">
+                    <Button variant="plain">Sign in</Button>
+                </SignInButton>
+                <SignUpButton
+                    redirectUrl={KnownPages.Processes}
+                    mode="modal">
+                    <Button
+                        variant="solid"
+                        endDecorator={<Navigate />}>
+                        Start for free
+                    </Button>
+                </SignUpButton>
+            </SignedOut>
+            <SignedIn>
+                {cta && (
+                    <Button
+                        variant="solid"
+                        href={KnownPages.Runs}
+                        endDecorator={<Navigate />}>
+                        Go to app
+                    </Button>
+                )}
+                <UserButton afterSignOutUrl="/" />
+            </SignedIn>
+        </>
+    );
+}

web/apps/doprocess/components/PageNav.tsx

@@ -2,62 +2,10 @@ import { Row } from '@signalco/ui-primitives/Row';
 import { Link } from '@signalco/ui-primitives/Link';
 import { cx } from '@signalco/ui-primitives/cx';
 import { Container } from '@signalco/ui-primitives/Container';
-import { Button } from '@signalco/ui-primitives/Button';
-import { Navigate } from '@signalco/ui-icons';
-import { SignInButton, SignUpButton, SignedIn, SignedOut } from '@clerk/nextjs';
 import { KnownPages } from '../src/knownPages';
-import { UserButton } from './UserButton';
+import { NavMenu } from './NavMenu';
 import DoProcessLogo from './brand/DoProcessLogo';
 
-type NavLinkItem = {
-    href: string,
-    text: string
-};
-
-const navLinks: NavLinkItem[] = [
-    // { href: '/features', text: 'Features' },
-    // { href: KnownPages.Pricing, text: 'Pricing' }
-];
-
-function NavMenu({ cta }: { cta?: boolean }) {
-    return (
-        <>
-            {navLinks.map(nl => (
-                <Link key={nl.href} href={nl.href}>
-                    <Button variant="plain" size="lg">{nl.text}</Button>
-                </Link>
-            ))}
-            <SignedOut>
-                <SignInButton
-                    redirectUrl={KnownPages.Runs}
-                    mode="modal">
-                    <Button variant="plain">Sign in</Button>
-                </SignInButton>
-                <SignUpButton
-                    redirectUrl={KnownPages.Processes}
-                    mode="modal">
-                    <Button
-                        variant="solid"
-                        endDecorator={<Navigate />}>
-                            Start for free
-                    </Button>
-                </SignUpButton>
-            </SignedOut>
-            <SignedIn>
-                {cta && (
-                    <Button
-                        variant="solid"
-                        href={KnownPages.Runs}
-                        endDecorator={<Navigate />}>
-                            Go to app
-                    </Button>
-                )}
-                <UserButton afterSignOutUrl="/" />
-            </SignedIn>
-        </>
-    );
-}
-
 export function PageNav({ fullWidth, cta }: { fullWidth?: boolean, cta?: boolean }) {
     return (
         <nav className={cx(

web/apps/doprocess/components/pages/Footer.tsx

@@ -8,28 +8,33 @@ import { Container } from '@signalco/ui-primitives/Container';
 import { isDeveloper } from '../../src/services/EnvProvider';
 import { now } from '../../src/services/DateTimeProvider';
 
-
 type FooterSectionType = {
     header: string,
     links: { name: string, href: string, developerOnly?: boolean }[]
     developerOnly?: boolean
 }
 
 const footerLinks: FooterSectionType[] = [
-    {
-        header: 'Product',
-        links: [
-        ]
-    },
-    {
-        header: 'Community',
-        links: [
-            { name: 'Discussions on GitHub', href: 'https://github.com/signalco-io/signalco/discussions', developerOnly: true },
-            { name: 'r/signalco', href: 'https://www.reddit.com/r/signalco/' }
-        ]
-    },
+    // {
+    //     header: 'Product',
+    //     links: [
+    //     ]
+    // },
+    // {
+    //     header: 'Community',
+    //     links: [
+    //         // { name: 'Discussions on GitHub', href: 'https://github.com/signalco-io/signalco/discussions', developerOnly: true },
+    //         // { name: 'r/signalco', href: 'https://www.reddit.com/r/signalco/' }
+    //     ]
+    // },
 ];
 
+const socialLinks = [
+    { name: 'GitHub', href: 'https://github.com/signalco-io/signalco', icon: <Typography>gh</Typography> },
+    { name: 'reddit', href: 'https://www.reddit.com/r/signalco/', icon: <Typography>/r</Typography> },
+    { name: 'X formerly known as Twitter', href: 'https://x.com/signalco_io', icon: <Typography>X</Typography> },
+]
+
 export default function Footer() {
     return (
         <footer className="self-stretch px-2">
@@ -49,25 +54,21 @@ export default function Footer() {
                             ))}
                         </div>
                         <Stack>
-                            <Stack alignItems="center" justifyContent="space-between">
-                                <Typography level="body3">Copyright © {now().getFullYear()} signalco. All rights reserved.</Typography>
-                                <Row spacing={1}>
-                                    <IconButton
-                                        aria-label="X formerly known as Twitter"
-                                        href="https://x.com/signalco_io">
-                                        <Typography>X</Typography>
-                                    </IconButton>
-                                    <IconButton
-                                        aria-label="reddit"
-                                        href="https://www.reddit.com/r/signalco/">
-                                        <Typography>/r</Typography>
-                                    </IconButton>
-                                    <IconButton
-                                        aria-label="GitHub"
-                                        href="https://github.com/signalco-io/signalco">
-                                        <Typography>gh</Typography>
-                                    </IconButton>
-                                </Row>
+                            <Stack spacing={1} alignItems="center" justifyContent="space-between">
+                                <Typography level="body3">Copyright © {now().getFullYear()} doprocess. All rights reserved.</Typography>
+                                {socialLinks && (
+                                    <Row spacing={1}>
+                                        {socialLinks.map(socialLink => (
+                                            <IconButton
+                                                key={socialLink.name}
+                                                aria-label={socialLink.name}
+                                                href={socialLink.href}
+                                                variant="link">
+                                                {socialLink.icon}
+                                            </IconButton>
+                                        ))}
+                                    </Row>
+                                )}
                             </Stack>
                         </Stack>
                     </Stack>

web/apps/doprocess/components/shared/InAppCtaSignUp.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Typography } from '@signalco/ui-primitives/Typography';
 import { Row } from '@signalco/ui-primitives/Row';
 import { Button } from '@signalco/ui-primitives/Button';

web/packages/ui-primitives/src/IconButton/IconButton.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, type ComponentProps, PropsWithChildren, useMemo } from 'react';
-import { Link , LoaderSpinner } from '@signalco/ui-icons';
+import { LoaderSpinner } from '@signalco/ui-icons';
 import { Slot } from '@radix-ui/react-slot';
+import { Link } from '../Link';
 import { cx } from '../cx';
 import { Button } from '../Button';