-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add base structure for the home page
- Loading branch information
1 parent
63cdaed
commit b3f0453
Showing
45 changed files
with
1,029 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import getBaseUrl from '@dodao/web-core/utils/api/getBaseURL'; | ||
| import { Grid4Cols } from '@dodao/web-core/components/core/grids/Grid4Cols'; | ||
| import React from 'react'; | ||
| import PageWrapper from '@dodao/web-core/components/core/page/PageWrapper'; | ||
| import ProjectSummaryCard from '@/components/projects/ProjectSummaryCard'; | ||
| import AddProjectButton from '@/components/ui/AddProjectButton'; | ||
| import PrivateWrapper from '@/components/auth/PrivateWrapper'; | ||
|
|
||
| export default async function Home() { | ||
| const apiUrl = `${getBaseUrl()}/api/crowd-funding/projects`; | ||
| const res = await fetch(apiUrl, { cache: 'no-cache' }); | ||
| const data = await res.json(); | ||
|
|
||
| return ( | ||
| <PageWrapper> | ||
| <div className="mx-auto"> | ||
| <div className="text-center my-5"> | ||
| <div className="sm:flex-auto"> | ||
| <h1 className="font-semibold leading-6 text-2xl text-color">Crowd Funding Projects</h1> | ||
| <p className="my-2 text-sm text-color">A list of all the projects.</p> | ||
| </div> | ||
| </div> | ||
| <PrivateWrapper> | ||
| <AddProjectButton /> | ||
| </PrivateWrapper> | ||
| <Grid4Cols> | ||
| {data.projectIds!.length > 0 ? ( | ||
| data.projectIds.map((projectId: string) => <ProjectSummaryCard key={projectId} projectId={projectId} />) | ||
| ) : ( | ||
| <div className="text-color text-center">No projects to show</div> | ||
| )} | ||
| </Grid4Cols> | ||
| </div> | ||
| </PageWrapper> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import Link from 'next/link'; | ||
|
|
||
| import { Container } from '@/components/home-page/Container'; | ||
| import { GridPattern } from '@/components/home-page/GridPattern'; | ||
|
|
||
| export default function NotFound() { | ||
| return ( | ||
| <div className="relative flex flex-auto items-center"> | ||
| <div className="absolute inset-0 -z-10 text-slate-900/10 [mask-image:linear-gradient(transparent,white,transparent)]"> | ||
| <GridPattern x="50%" y="50%" patternTransform="translate(0 60)" /> | ||
| </div> | ||
| <Container className="flex flex-col items-center py-16 text-center sm:py-20 lg:py-32"> | ||
| <p className="rounded-full px-4 py-1 text-base font-medium tracking-tight text-slate-900 ring-1 ring-slate-900 ring-inset">404</p> | ||
| <h1 className="mt-6 font-display text-5xl font-extrabold text-slate-900 sm:text-6xl">Page not found</h1> | ||
| <p className="mt-4 text-lg tracking-tight text-slate-700">Sorry, we couldn’t find the page you’re looking for.</p> | ||
| <Link href="/" className="mt-6 text-base font-medium text-blue-600 hover:text-blue-800"> | ||
| Go back home <span aria-hidden="true">→</span> | ||
| </Link> | ||
| </Container> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,31 @@ | ||
| import getBaseUrl from '@dodao/web-core/utils/api/getBaseURL'; | ||
| import { Grid4Cols } from '@dodao/web-core/components/core/grids/Grid4Cols'; | ||
| import React from 'react'; | ||
| import PageWrapper from '@dodao/web-core/components/core/page/PageWrapper'; | ||
| import ProjectSummaryCard from '@/components/projects/ProjectSummaryCard'; | ||
| import AddProjectButton from '@/components/ui/AddProjectButton'; | ||
| import PrivateWrapper from '@/components/auth/PrivateWrapper'; | ||
| import AllInOnePlatform from '@/components/home-page/AllInOnePlatform'; | ||
| import Features from '@/components/home-page/Features'; | ||
| import { Footer } from '@/components/home-page/Footer'; | ||
| import { Hero } from '@/components/home-page/Hero'; | ||
| import Highlights from '@/components/home-page/Highlights'; | ||
| import { CSSProperties } from 'react'; | ||
|
|
||
| export default async function Home() { | ||
| const apiUrl = `${getBaseUrl()}/api/crowd-funding/projects`; | ||
| const res = await fetch(apiUrl, { cache: 'no-cache' }); | ||
| const data = await res.json(); | ||
| const style: CSSProperties = { | ||
| '--primary-color': '#2563eb', | ||
| '--primary-text-color': '#fff', | ||
| '--bg-color': '#fff', | ||
| '--text-color': '#282c6e', | ||
| '--link-color': '#2563eb', | ||
| '--heading-color': '#ffffff', | ||
| '--border-color': '#282c6e', | ||
| '--block-bg': '#fff', | ||
| '--swiper-theme-color': '', | ||
| } as CSSProperties; | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <PageWrapper> | ||
| <div className="mx-auto"> | ||
| <div className="text-center my-5"> | ||
| <div className="sm:flex-auto"> | ||
| <h1 className="font-semibold leading-6 text-2xl text-color">Crowd Funding Projects</h1> | ||
| <p className="my-2 text-sm text-color">A list of all the projects.</p> | ||
| </div> | ||
| </div> | ||
| <PrivateWrapper> | ||
| <AddProjectButton /> | ||
| </PrivateWrapper> | ||
| <Grid4Cols> | ||
| {data.projectIds!.length > 0 ? ( | ||
| data.projectIds.map((projectId: string) => <ProjectSummaryCard key={projectId} projectId={projectId} />) | ||
| ) : ( | ||
| <div className="text-color text-center">No projects to show</div> | ||
| )} | ||
| </Grid4Cols> | ||
| </div> | ||
| </PageWrapper> | ||
| <div style={{ ...style, backgroundColor: 'var(--bg-color)' }}> | ||
| <Hero /> | ||
| <AllInOnePlatform /> | ||
| <Features /> | ||
| <Highlights /> | ||
|
|
||
| <Footer /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| const features = [ | ||
| { | ||
| name: 'Push to deploy', | ||
| description: | ||
| 'Aut illo quae. Ut et harum ea animi natus. Culpa maiores et sed sint et magnam exercitationem quia. Ullam voluptas nihil vitae dicta molestiae et. Aliquid velit porro vero.', | ||
| }, | ||
| { | ||
| name: 'SSL certificates', | ||
| description: | ||
| 'Mollitia delectus a omnis. Quae velit aliquid. Qui nulla maxime adipisci illo id molestiae. Cumque cum ut minus rerum architecto magnam consequatur. Quia quaerat minima.', | ||
| }, | ||
| { | ||
| name: 'Simple queues', | ||
| description: | ||
| 'Aut repellendus et officiis dolor possimus. Deserunt velit quasi sunt fuga error labore quia ipsum. Commodi autem voluptatem nam. Quos voluptatem totam.', | ||
| }, | ||
| { | ||
| name: 'Advanced security', | ||
| description: | ||
| 'Magnam provident veritatis odit. Vitae eligendi repellat non. Eum fugit impedit veritatis ducimus. Non qui aspernatur laudantium modi. Praesentium rerum error deserunt harum.', | ||
| }, | ||
| { | ||
| name: 'Powerful API', | ||
| description: | ||
| 'Sit minus expedita quam in ullam molestiae dignissimos in harum. Tenetur dolorem iure. Non nesciunt dolorem veniam necessitatibus laboriosam voluptas perspiciatis error.', | ||
| }, | ||
| { | ||
| name: 'Database backups', | ||
| description: | ||
| 'Ipsa in earum deserunt aut. Quos minus aut animi et soluta. Ipsum dicta ut quia eius. Possimus reprehenderit iste aspernatur ut est velit consequatur distinctio.', | ||
| }, | ||
| ]; | ||
|
|
||
| export default function AllInOnePlatform() { | ||
| return ( | ||
| <div className="bg-white py-24 sm:py-32"> | ||
| <div className="mx-auto max-w-7xl px-6 lg:px-8"> | ||
| <div className="mx-auto max-w-2xl lg:mx-0"> | ||
| <h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">All-in-one platform</h2> | ||
| <p className="mt-6 text-lg/8 text-gray-600"> | ||
| Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam. | ||
| </p> | ||
| </div> | ||
| <dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"> | ||
| {features.map((feature) => ( | ||
| <div key={feature.name}> | ||
| <dt className="font-semibold text-gray-900">{feature.name}</dt> | ||
| <dd className="mt-1 text-gray-600">{feature.description}</dd> | ||
| </div> | ||
| ))} | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import Link from 'next/link' | ||
| import clsx from 'clsx' | ||
|
|
||
| const baseStyles = { | ||
| solid: | ||
| 'inline-flex justify-center rounded-md py-1 px-4 text-base font-semibold tracking-tight shadow-sm focus:outline-hidden', | ||
| outline: | ||
| 'inline-flex justify-center rounded-md border py-[calc(--spacing(1)-1px)] px-[calc(--spacing(4)-1px)] text-base font-semibold tracking-tight focus:outline-hidden', | ||
| } | ||
|
|
||
| const variantStyles = { | ||
| solid: { | ||
| slate: | ||
| 'bg-slate-900 text-white hover:bg-slate-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 active:bg-slate-700 active:text-white/80 disabled:opacity-30 disabled:hover:bg-slate-900', | ||
| blue: 'bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 active:bg-blue-700 active:text-white/80 disabled:opacity-30 disabled:hover:bg-blue-600', | ||
| white: | ||
| 'bg-white text-blue-600 hover:text-blue-700 focus-visible:text-blue-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white active:bg-blue-50 active:text-blue-900/80 disabled:opacity-40 disabled:hover:text-blue-600', | ||
| }, | ||
| outline: { | ||
| slate: | ||
| 'border-slate-200 text-slate-900 hover:border-slate-300 hover:bg-slate-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-600 active:border-slate-200 active:bg-slate-50 active:text-slate-900/70 disabled:opacity-40 disabled:hover:border-slate-200 disabled:hover:bg-transparent', | ||
| blue: 'border-blue-300 text-blue-600 hover:border-blue-400 hover:bg-blue-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 active:text-blue-600/70 disabled:opacity-40 disabled:hover:border-blue-300 disabled:hover:bg-transparent', | ||
| }, | ||
| } | ||
|
|
||
| type ButtonProps = ( | ||
| | { | ||
| variant?: 'solid' | ||
| color?: keyof typeof variantStyles.solid | ||
| } | ||
| | { | ||
| variant: 'outline' | ||
| color?: keyof typeof variantStyles.outline | ||
| } | ||
| ) & | ||
| ( | ||
| | Omit<React.ComponentPropsWithoutRef<typeof Link>, 'color'> | ||
| | (Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> & { | ||
| href?: undefined | ||
| }) | ||
| ) | ||
|
|
||
| export function Button({ className, ...props }: ButtonProps) { | ||
| props.variant ??= 'solid' | ||
| props.color ??= 'slate' | ||
|
|
||
| className = clsx( | ||
| baseStyles[props.variant], | ||
| props.variant === 'outline' | ||
| ? variantStyles.outline[props.color] | ||
| : props.variant === 'solid' | ||
| ? variantStyles.solid[props.color] | ||
| : undefined, | ||
| className, | ||
| ) | ||
|
|
||
| return typeof props.href === 'undefined' ? ( | ||
| <button className={className} {...props} /> | ||
| ) : ( | ||
| <Link className={className} {...props} /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import clsx from 'clsx' | ||
|
|
||
| const styles = { | ||
| xs: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:px-2', | ||
| sm: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:max-w-4xl lg:px-12', | ||
| md: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:max-w-5xl lg:px-8', | ||
| lg: 'mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4 lg:max-w-7xl lg:px-8', | ||
| } | ||
|
|
||
| export function Container({ | ||
| size = 'sm', | ||
| className, | ||
| ...props | ||
| }: React.ComponentPropsWithoutRef<'div'> & { size?: keyof typeof styles }) { | ||
| return <div className={clsx(styles[size], className)} {...props} /> | ||
| } |
Oops, something went wrong.