Skip to content

Commit

Permalink
Merge pull request #84 from shuttle-hq/feat/beta-landing-page
Browse files Browse the repository at this point in the history 
Feat: Beta landing page
  • Loading branch information
@ivancernja
ivancernja committed Jun 28, 2023
2 parents 32661b9 + 187e994 commit 7933566
Show file tree
Hide file tree
Showing 24 changed files with 847 additions and 293 deletions.
37 changes: 20 additions & 17 deletions components/elements/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import clsx from 'clsx'
import Link from 'next/link'
import {FC, ReactElement, ReactNode} from 'react'
import {useUser} from "@auth0/nextjs-auth0/client";
import {CONTACT_US_URI} from "../../lib/constants";
import { FC, ReactNode } from 'react'
import { useUser } from '@auth0/nextjs-auth0/client'
import { CONTACT_US_URI } from '../../lib/constants'

interface CommonButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant: 'primary' | 'secondary'
Expand Down Expand Up @@ -32,33 +32,36 @@ const Button: FC<ButtonProps> = ({ variant = 'none', invertOnDark, className, ch
className
)

children = <button className={classNames}>{children}</button>;
children = <button className={classNames}>{children}</button>

if (href)
if (href.startsWith('/'))
children = (
<Link href={href}>
{children}
</Link>
)
if (href.startsWith('/')) children = <Link href={href}>{children}</Link>
else
children = (
<a href={href} target='_blank' rel="noreferrer">
<a href={href} target='_blank' rel='noreferrer'>
{children}
</a>
)

return children;
return children
}

export const LoginButton: FC<CommonButtonProps> = ({children, ...inner}) => {
export const LoginButton: FC<CommonButtonProps> = ({ children, ...inner }) => {
const { user } = useUser()
const dashboardBaseUrl = user ? "/dashboard" : "/login"
return (<Button href={dashboardBaseUrl} {...inner}>{children}</Button>)
const dashboardBaseUrl = user ? '/dashboard' : 'https://console.shuttle.rs/login'
return (
<Button href={dashboardBaseUrl} {...inner}>
{children}
</Button>
)
}

export const ContactUsButton: FC<CommonButtonProps> = ({children, ...inner}) => {
return (<Button href={CONTACT_US_URI} {...inner}>{children}</Button>)
export const ContactUsButton: FC<CommonButtonProps> = ({ children, ...inner }) => {
return (
<Button href={CONTACT_US_URI} {...inner}>
{children}
</Button>
)
}

export default Button
322 changes: 164 additions & 158 deletions components/sections/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,167 +5,173 @@ import Link from 'next/link'
import { FC } from 'react'

interface FooterProps {
disableMargin?: boolean
disableMargin?: boolean
}

const Footer: FC<FooterProps> = ({ disableMargin }) => {
return (
<footer className={clsx(!disableMargin && 'mt-28', 'border-t border-black/10 dark:border-white/10')}>
<div className='relative mx-auto max-w-[1328px]'>
<div className='absolute left-1/2 h-16 w-16 -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-2xl border border-black/10 dark:border-white/10'>
<Image src='/images/sections/footer/rocket.gif' alt='rocket' fill />
</div>
<div className='divide-y divide-black/10 dark:divide-white/10 lg:grid lg:grid-cols-2 lg:divide-x lg:divide-y-0'>
<div className='grid grid-cols-2 divide-x divide-black/10 text-xl dark:divide-white/10'>
<div className='flex flex-col gap-3 px-8 pb-8 pt-16 lg:p-16'>
<h3 className='font-gradual font-bold text-black dark:text-[#C2C2C2]'>Shuttle</h3>
<Link
href='/#features'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Features
</Link>
<Link
href='/starters'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Starters
</Link>
<Link
href='https://github.com/orgs/shuttle-hq/projects/4'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Roadmap
</Link>
</div>
<div className='flex flex-col gap-3 px-8 pb-8 pt-16 lg:p-16'>
<h3 className='font-gradual font-bold text-black dark:text-[#C2C2C2]'>Company</h3>
<Link
href='/about'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
About
</Link>
<Link
href='/about#careers'
scroll={false}
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Careers
</Link>
<Link
href='/terms'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Terms of Service
</Link>
<Link
href='/privacy'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Privacy Policy
</Link>
<Link
href='/acceptable-use'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Acceptable Use Policy
</Link>
</div>
</div>
<div className='grid grid-cols-2 divide-x divide-black/10 text-xl dark:divide-white/10'>
<div className='flex flex-col gap-3 px-8 pb-8 pt-16 lg:p-16'>
<h3 className='font-gradual font-bold text-black dark:text-[#C2C2C2]'>Developers</h3>
<Link
href='https://docs.shuttle.rs'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Docs
</Link>
<Link
href='https://docs.shuttle.rs/examples/axum'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Guides
</Link>
<Link
href='/shuttle-heroes'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Shuttle Heroes
</Link>
<Link
href='/shuttle-batch'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Shuttle Batch
</Link>
<Link
href='/launchpad'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Launchpad
</Link>
<Link
href='/ai'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Shuttle AI
</Link>
</div>
<div className='flex flex-col gap-3 px-8 pb-8 pt-16 lg:p-16'>
<h3 className='font-gradual font-bold text-black dark:text-[#C2C2C2]'>Community</h3>
<a
href='https://github.com/shuttle-hq/shuttle'
target='_blank'
rel='noreferrer'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
GitHub
</a>
<a
href='https://discord.com/invite/shuttle'
target='_blank'
rel='noreferrer'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Discord
</a>
<a
href='https://twitter.com/shuttle_dev'
target='_blank'
rel='noreferrer'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Twitter
</a>
<a
href='https://www.linkedin.com/company/shuttle-yc'
target='_blank'
rel='noreferrer'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
LinkedIn
</a>
</div>
</div>
</div>
<div className='grid grid-cols-2 divide-x divide-black/10 dark:divide-white/10 lg:col-span-2'>
<div className='lg:grid lg:grid-cols-2 lg:divide-x lg:divide-black/10 dark:lg:divide-white/10'>
<p className='px-8 pb-5 lg:px-16 lg:pb-9'>© 2023 shuttle</p>
<div className='hidden lg:block' />
</div>
<div className='lg:grid lg:grid-cols-2 lg:divide-x lg:divide-black/10 dark:lg:divide-white/10'>
<div className='hidden lg:block' />
<p className='flex flex-wrap items-center gap-4 px-8 pb-5 lg:px-16 lg:pb-9'>
Backed by
<YCombinator />
</p>
</div>
</div>
</div>
</footer>
)
return (
<footer className={clsx(!disableMargin && 'mt-28', 'border-t border-black/10 dark:border-white/10')}>
<div className='relative mx-auto max-w-[1328px]'>
<div className='absolute left-1/2 h-16 w-16 -translate-x-1/2 -translate-y-1/2 transform overflow-hidden rounded-2xl border border-black/10 dark:border-white/10'>
<Image src='/images/sections/footer/rocket.gif' alt='rocket' fill />
</div>
<div className='divide-y divide-black/10 dark:divide-white/10 lg:grid lg:grid-cols-2 lg:divide-x lg:divide-y-0'>
<div className='grid grid-cols-2 divide-x divide-black/10 text-xl dark:divide-white/10'>
<div className='flex flex-col gap-3 px-8 pb-8 pt-16 lg:p-16'>
<h3 className='font-gradual font-bold text-black dark:text-[#C2C2C2]'>Shuttle</h3>
<Link
href='/#features'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Features
</Link>
<Link
href='/starters'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Starters
</Link>
<Link
href='https://github.com/orgs/shuttle-hq/projects/4'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Roadmap
</Link>
<Link
href='https://status.shuttle.rs'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Status
</Link>
</div>
<div className='flex flex-col gap-3 px-8 pb-8 pt-16 lg:p-16'>
<h3 className='font-gradual font-bold text-black dark:text-[#C2C2C2]'>Company</h3>
<Link
href='/about'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
About
</Link>
<Link
href='/about#careers'
scroll={false}
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Careers
</Link>
<Link
href='/terms'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Terms of Service
</Link>
<Link
href='/privacy'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Privacy Policy
</Link>
<Link
href='/acceptable-use'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Acceptable Use Policy
</Link>
</div>
</div>
<div className='grid grid-cols-2 divide-x divide-black/10 text-xl dark:divide-white/10'>
<div className='flex flex-col gap-3 px-8 pb-8 pt-16 lg:p-16'>
<h3 className='font-gradual font-bold text-black dark:text-[#C2C2C2]'>Developers</h3>
<Link
href='https://docs.shuttle.rs'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Docs
</Link>
<Link
href='https://docs.shuttle.rs/examples/axum'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Guides
</Link>
<Link
href='/shuttle-heroes'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Shuttle Heroes
</Link>
<Link
href='/shuttle-batch'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Shuttle Batch
</Link>
<Link
href='/launchpad'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Launchpad
</Link>
<Link
href='/ai'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Shuttle AI
</Link>
</div>
<div className='flex flex-col gap-3 px-8 pb-8 pt-16 lg:p-16'>
<h3 className='font-gradual font-bold text-black dark:text-[#C2C2C2]'>Community</h3>
<a
href='https://github.com/shuttle-hq/shuttle'
target='_blank'
rel='noreferrer'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
GitHub
</a>
<a
href='https://discord.com/invite/shuttle'
target='_blank'
rel='noreferrer'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Discord
</a>
<a
href='https://twitter.com/shuttle_dev'
target='_blank'
rel='noreferrer'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
Twitter
</a>
<a
href='https://www.linkedin.com/company/shuttle-yc'
target='_blank'
rel='noreferrer'
className='text-[#525151] transition duration-300 hover:text-black dark:text-[#FFFFFF8F] dark:hover:text-[#D8D8D8]'
>
LinkedIn
</a>
</div>
</div>
</div>
<div className='grid grid-cols-2 divide-x divide-black/10 dark:divide-white/10 lg:col-span-2'>
<div className='lg:grid lg:grid-cols-2 lg:divide-x lg:divide-black/10 dark:lg:divide-white/10'>
<p className='px-8 pb-5 lg:px-16 lg:pb-9'>© 2023 shuttle</p>
<div className='hidden lg:block' />
</div>
<div className='lg:grid lg:grid-cols-2 lg:divide-x lg:divide-black/10 dark:lg:divide-white/10'>
<div className='hidden lg:block' />
<p className='flex flex-wrap items-center gap-4 px-8 pb-5 lg:px-16 lg:pb-9'>
Backed by
<YCombinator />
</p>
</div>
</div>
</div>
</footer>
)
}

export default Footer
Loading

0 comments on commit 7933566

Please sign in to comment.