This repository has been archived by the owner on Nov 30, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e0f1004
commit b7a478f
Showing
16 changed files
with
450 additions
and
109 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
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
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 |
|---|---|---|
| @@ -1,76 +1,231 @@ | ||
| import type { BlitzPage } from "blitz"; | ||
| import type { IconType } from "react-icons"; | ||
| import type { FC } from "react"; | ||
|
|
||
| import { Routes } from "blitz"; | ||
| import { Link, Routes } from "blitz"; | ||
| import { Fragment } from "react"; | ||
|
|
||
| import { SimpleGrid, Heading, Text, Link as Anchor } from "@chakra-ui/layout"; | ||
| import { FcList, FcRating, FcSearch, FcTimeline } from "react-icons/fc"; | ||
| import { | ||
| Heading, | ||
| Box, | ||
| Container, | ||
| SimpleGrid, | ||
| Text, | ||
| Stack, | ||
| Link as Anchor, | ||
| } from "@chakra-ui/layout"; | ||
| import { Button } from "@chakra-ui/button"; | ||
| import { Icon } from "@chakra-ui/icon"; | ||
| import { Image } from "@chakra-ui/image"; | ||
| import { useColorModeValue } from "@chakra-ui/react"; | ||
| import { FaArrowRight } from "react-icons/fa"; | ||
| import { | ||
| FcBinoculars, | ||
| FcList, | ||
| FcRating, | ||
| FcSearch, | ||
| FcTimeline, | ||
| } from "react-icons/fc"; | ||
|
|
||
| import SidebarLayout from "app/layouts/sidebar-layout"; | ||
| import PlainLayout from "app/layouts/plain-layout"; | ||
|
|
||
| import IndexCard from "../components/index-card"; | ||
| type IconCardProps = { | ||
| icon: IconType; | ||
| title: string; | ||
| text: string | JSX.Element; | ||
| }; | ||
|
|
||
| const HomePage: BlitzPage = () => { | ||
| const textColor = useColorModeValue("gray.600", "gray.400"); | ||
| const IconCard: FC<IconCardProps> = ({ icon, title, text }) => { | ||
| return ( | ||
| <Stack | ||
| bg={useColorModeValue("white", "gray.800")} | ||
| px={4} | ||
| py={6} | ||
| borderRadius="md" | ||
| align="center" | ||
| spacing={2} | ||
| > | ||
| <Icon as={icon} w={8} h={8} /> | ||
| <Heading size="md">{title}</Heading> | ||
| <Text opacity="0.8">{text}</Text> | ||
| </Stack> | ||
| ); | ||
| }; | ||
|
|
||
| const HomePage: BlitzPage = () => { | ||
| return ( | ||
| <Fragment> | ||
| <Heading mb={4} size="md"> | ||
| Welcome to hikerherd | ||
| </Heading> | ||
|
|
||
| <Text mb={2} color={textColor}> | ||
| <strong>hikerherd</strong> helps you manage your backpacking gear and | ||
| plan your adventures. | ||
| </Text> | ||
|
|
||
| <Text mb={5} color={textColor}> | ||
| hikerherd is still in <strong>beta</strong>, so if you have any feedback | ||
| please{" "} | ||
| <Anchor | ||
| href="https://blog.hikerherd.com/contact" | ||
| textDecoration="underline" | ||
| isExternal | ||
| <Box bg={useColorModeValue("gray.50", "gray.800")}> | ||
| <Container | ||
| as="main" | ||
| maxW="container.sm" | ||
| textAlign="center" | ||
| py={{ base: 12, md: 20 }} | ||
| > | ||
| <Heading size="xl" mb={4}> | ||
| Lighten your pack with hikerherd | ||
| </Heading> | ||
| <Text fontSize="lg" opacity="0.8"> | ||
| The first step towards an ultralight pack is knowing where your | ||
| weight is coming from. <strong>hikerherd</strong> makes it simple. | ||
| </Text> | ||
| <Link href={Routes.SignupPage()} passHref> | ||
| <Button | ||
| mt={8} | ||
| size="lg" | ||
| as="a" | ||
| rightIcon={<FaArrowRight />} | ||
| colorScheme="blue" | ||
| > | ||
| Get started today | ||
| </Button> | ||
| </Link> | ||
| <Text fontSize="sm" opacity="0.6" mt={3}> | ||
| hikerherd is <strong>free</strong> and{" "} | ||
| <Anchor | ||
| textDecoration="underline" | ||
| isExternal | ||
| href="https://github.com/benhoneywill/hikerherd" | ||
| > | ||
| open-source | ||
| </Anchor> | ||
| </Text> | ||
| </Container> | ||
| </Box> | ||
|
|
||
| <Container | ||
| as="main" | ||
| maxW="container.lg" | ||
| pb={{ base: 16, md: 24 }} | ||
| pt={{ base: 12, md: 20 }} | ||
| textAlign="center" | ||
| > | ||
| <Heading size="lg" mb={4}> | ||
| How does it work? | ||
| </Heading> | ||
| <Text fontSize="lg" opacity="0.8"> | ||
| Our gear tools make it simple to organize your gear closet and plan | ||
| your trips. | ||
| </Text> | ||
|
|
||
| <SimpleGrid columns={{ base: 1, md: 3 }} spacing={6} mt={12}> | ||
| <IconCard | ||
| icon={FcList} | ||
| title="Organize your inventory" | ||
| text="hikerherd gives you a central location to manage all of your gear." | ||
| /> | ||
|
|
||
| <IconCard | ||
| icon={FcRating} | ||
| title="Track your wish list" | ||
| text="Keep track of any gear you want to buy complete with links, prices and more." | ||
| /> | ||
|
|
||
| <IconCard | ||
| icon={FcTimeline} | ||
| title="Plan packs" | ||
| text="Bring gear from your inventory and wish list together into packing lists." | ||
| /> | ||
| </SimpleGrid> | ||
| </Container> | ||
|
|
||
| <Box bg="gray.700" color="white"> | ||
| <Container | ||
| as="main" | ||
| maxW="container.lg" | ||
| py={{ base: 16, md: 24 }} | ||
| textAlign="center" | ||
| > | ||
| <Heading size="lg" mb={4}> | ||
| Pack analytics | ||
| </Heading> | ||
| <Text fontSize="lg" opacity="0.8"> | ||
| <strong>hikerherd</strong> gives you the analytics tools you need to | ||
| decide what to take on your trip and what leave at home. | ||
| </Text> | ||
|
|
||
| <Image | ||
| mx="auto" | ||
| mt={12} | ||
| alt="Screenshot of piechart and table" | ||
| borderRadius="md" | ||
| w="750px" | ||
| maxW="100%" | ||
| src="/pack-analytics.png" | ||
| boxShadow="lg" | ||
| /> | ||
| </Container> | ||
| </Box> | ||
|
|
||
| <Container | ||
| as="main" | ||
| maxW="container.lg" | ||
| py={{ base: 16, md: 24 }} | ||
| textAlign="center" | ||
| > | ||
| <Heading size="lg" mb={4}> | ||
| Discovery tools | ||
| </Heading> | ||
| <Text fontSize="lg" opacity="0.8"> | ||
| Search for gear or packs created by other hikers and easily add their | ||
| gear to your own inventory or wish list. | ||
| </Text> | ||
|
|
||
| <SimpleGrid columns={{ base: 1, md: 2 }} spacing={6} mt={12}> | ||
| <IconCard | ||
| icon={FcBinoculars} | ||
| title="Gear search" | ||
| text={ | ||
| <> | ||
| The hikerherd gear search is crowd-sourced by{" "} | ||
| <strong>you</strong>, so the more gear you add the better it | ||
| gets. | ||
| </> | ||
| } | ||
| /> | ||
|
|
||
| <IconCard | ||
| icon={FcSearch} | ||
| title="Pack search" | ||
| text="Search for packs made by other hikers to see what they are taking on the trails you want to hike next." | ||
| /> | ||
| </SimpleGrid> | ||
| </Container> | ||
|
|
||
| <Box bg={useColorModeValue("gray.50", "gray.800")}> | ||
| <Container | ||
| as="main" | ||
| maxW="container.lg" | ||
| py={{ base: 16, md: 24 }} | ||
| textAlign="center" | ||
| > | ||
| get in touch | ||
| </Anchor> | ||
| . | ||
| </Text> | ||
|
|
||
| <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={4}> | ||
| <IndexCard | ||
| icon={FcList} | ||
| href={Routes.InventoryPage()} | ||
| title="Inventory" | ||
| text="Organize the backpacking gear you own" | ||
| /> | ||
|
|
||
| <IndexCard | ||
| icon={FcRating} | ||
| href={Routes.WishListPage()} | ||
| title="Wish list" | ||
| text="Plan the backpacking gear of your dreams." | ||
| /> | ||
|
|
||
| <IndexCard | ||
| icon={FcTimeline} | ||
| href={Routes.PacksPage()} | ||
| title="Packs" | ||
| text="Plan for a trip by organizing gear into packs." | ||
| /> | ||
|
|
||
| <IndexCard | ||
| icon={FcSearch} | ||
| href={Routes.DiscoverGearPage()} | ||
| title="Discover" | ||
| text="Search the hikerherd database for gear." | ||
| /> | ||
| </SimpleGrid> | ||
| <Heading size="lg" mb={4}> | ||
| Ready to get started? | ||
| </Heading> | ||
| <Text fontSize="lg" opacity="0.8"> | ||
| Signing up is <strong>free</strong>, quick and easy. You'll | ||
| have an ultralight pack in no time! | ||
| </Text> | ||
|
|
||
| <Link href={Routes.SignupPage()} passHref> | ||
| <Button | ||
| mt={8} | ||
| size="lg" | ||
| as="a" | ||
| rightIcon={<FaArrowRight />} | ||
| colorScheme="blue" | ||
| > | ||
| Sign up to hikerherd | ||
| </Button> | ||
| </Link> | ||
| </Container> | ||
| </Box> | ||
| </Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| HomePage.getLayout = (page) => <SidebarLayout>{page}</SidebarLayout>; | ||
| HomePage.redirectAuthenticatedTo = Routes.StartPage(); | ||
|
|
||
| HomePage.getLayout = (page) => <PlainLayout>{page}</PlainLayout>; | ||
|
|
||
| export default HomePage; |
Oops, something went wrong.