DEV Community

Cover image for Let's build Airbnb Home page with Nextjs and ChakraUI - Part 2
Muhammad  Ahmad
Muhammad Ahmad

Posted on • Edited on

8 7

Let's build Airbnb Home page with Nextjs and ChakraUI - Part 2

In part 1, We created header section. Now in this part We'll create main section.

Github Repo: Chakra-airbnb
Demo: Chakra-airbnb

Booking Section

It is very easy to create booking section by wrapping 3 form fields inside a Flex component.
booking-section

const BookingSection = () => {
  return (
    <>
      <Heading as="h3" size="lg" mb="4" fontWeight="bold" textAlign="left">
        Book unique homes and experiences
      </Heading>
      <Box mb={{ base: "2.5rem", lg: "4rem" }}>
        <form>
          <Flex
            justify="start"
            alignItems="start"
            flexDirection={{ base: "column", lg: "row" }}
          >
            <FormControl
              id="where"
              width={{ base: "100%", lg: 1 / 3 }}
              pr={{ lg: "2" }}
              mb={{ base: "4", lg: "0" }}
            >
              <FormLabel fontSize="0.75rem" fontWeight="bold">
                Where
              </FormLabel>
              <Input placeholder="Anywhere" />
            </FormControl>
            <FormControl
              id="checkIn"
              width={{ base: "100%", lg: 1 / 3 }}
              pr={{ lg: "2" }}
              mb={{ base: "4", lg: "0" }}
            >
              <FormLabel fontSize="0.75rem" fontWeight="bold">
                CHECK-IN - CHECKOUT
              </FormLabel>
              <Input placeholder="mm/dd/yyyy - mm/dd/yyyy" />
            </FormControl>
            <FormControl
              id="guests"
              width={{ base: "100%", lg: 1 / 3 }}
              pr={{ lg: "2" }}
              mb={{ base: "4", lg: "0" }}
            >
              <FormLabel fontSize="0.75rem" fontWeight="bold">
                GUESTS
              </FormLabel>
              <Select>
                <option value="1 guest">1 guest</option>
                <option value="2 guest">2 guests</option>
                <option value="3 guest">3 guests</option>
              </Select>
            </FormControl>
          </Flex>
        </form>
      </Box>
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

Reviews Section

Here we'll create 3 custom components

  • Reviews

    • Card
      • Star

reviews-section

Star Component

const Star = () => {
  return (
    <svg
      style={{
        width: "1rem",
        height: "1rem",
        fill: "#008F94",
        marginRight: "0.25rem"
      }}
      viewBox="0 0 1000 1000"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M972 380c9 28 2 50-20 67L725 619l87 280c11 39-18 75-54 75-12 0-23-4-33-12L499 790 273 962a58 58 0 0 1-78-12 50 50 0 0 1-8-51l86-278L46 447c-21-17-28-39-19-67 8-24 29-40 52-40h280l87-279c7-23 28-39 52-39 25 0 47 17 54 41l87 277h280c24 0 45 16 53 40z" />
    </svg>
  );
};
Enter fullscreen mode Exit fullscreen mode

Card Component

const Card = ({ imageSrc, avatarSrc, review, name, country }) => {
  return (
    <Box
      as="article"
      width={{ base: "100%", lg: 1 / 3 }}
      px={{ lg: "0.5rem" }}
      mb={{ base: "6", lg: "0" }}
    >
      <Image src={imageSrc} objectFit="cover" borderRadius="0.25rem" w="100%" />
      <Flex my={3} alignItems="center" justify="start">
        <Star />
        <Star />
        <Star />
        <Star />
      </Flex>
      <Text
        color={"gray.700"}
        fontSize="0.87rem"
        textAlign="left"
        lineHeight="1.375"
        fontWeight="300"
      >
        {review}
      </Text>

      <Flex my={4} alignItems="center" justify="start">
        <Avatar size="md" name="avatar" src={avatarSrc} />
        <Flex pl="4" fontSize="sm" flexDirection="column" alignItems="start">
          <Text fontWeight="bold">{name}</Text>
          <Text>{country}</Text>
        </Flex>
      </Flex>
    </Box>
  );
};
Enter fullscreen mode Exit fullscreen mode

Reviews Components

const Reviews = () => {
  return (
    <>
      <Heading
        as="h3"
        size="lg"
        fontWeight="bold"
        textAlign="left"
        mb={{ base: "4", lg: "2" }}
      >
        What guests are saying about homes in the United States
      </Heading>
      <Flex alignItems={{ base: "start", lg: "center" }}>
        <svg
          viewBox="0 0 24 24"
          role="presentation"
          aria-hidden="true"
          focusable="false"
          style={{ height: "24px", width: "24px", fill: "#FFB400" }}
        >
          <path
            d="m21.95 9.48a.84.84 0 0 0 -.87-.48h-4.62a.5.5 0 0 0 0 1l4.14.01-4.81 4.17a.5.5 0 0 0 -.14.57l2.65 6.38-6.07-3.72a.5.5 0 0 0 -.52 0l-6.08 3.72 2.65-6.37a.5.5 0 0 0 -.13-.57l-4.75-4.18h5.75a.5.5 0 0 0 .46-.3l2.37-5.37 1.58 3.57a.5.5 0 0 0 .91-.41l-1.72-3.88a.8.8 0 0 0 -1.56-.01l-2.38 5.39h-5.9a.83.83 0 0 0 -.87.48.85.85 0 0 0 .32.96l4.85 4.25-2.78 6.67a.81.81 0 0 0 .16.98.66.66 0 0 0 .43.15 1.1 1.1 0 0 0 .56-.18l6.37-3.91 6.38 3.92a.81.81 0 0 0 .99.03c.15-.12.37-.41.15-1l-2.77-6.66 4.92-4.26a.84.84 0 0 0 .31-.95zm-.78.53h-.01"
            fill="#484848"
          ></path>
          <path d="m11 21.5a.5.5 0 1 1 -.5-.5.5.5 0 0 1 .5.5zm-3.5-15.5a.5.5 0 1 0 .5.5.5.5 0 0 0 -.5-.5zm15 10h-.5v-.5a.5.5 0 0 0 -1 0v .5h-.5a.5.5 0 0 0 0 1h .5v.5a.5.5 0 0 0 1 0v-.5h.5a.5.5 0 0 0 0-1zm-15-13h-.5v-.5a.5.5 0 0 0 -1 0v .5h-.5a.5.5 0 0 0 0 1h .5v.5a.5.5 0 0 0 1 0v-.5h.5a.5.5 0 0 0 0-1zm10.22 7.54a.84.84 0 0 0 -.17-.02q-.28-.01-3.19 0a .6.6 0 0 1 -.55-.35l-1.5-3.23a.42.42 0 0 0 -.75 0l-1.81 4.14a2.92 2.92 0 0 0 4.12 3.72l.46-.26 3.49-2.99.16-.18a.5.5 0 0 0 -.26-.82z"></path>
        </svg>
        <Text pl={2} textAlign="left">
          United States homes were <strong>rated 4.8 out of 5 stars</strong>{" "}
          with <strong>42,500,000+ reviews</strong>
        </Text>
      </Flex>
      <Flex
        as="section"
        alignItems="start"
        justify="between"
        flexDirection={{ base: "column", lg: "row" }}
        my={{ base: "1.5rem", lg: "2.5rem" }}
      >
        <Card
          imageSrc="/images/1.jpg"
          avatarSrc="/images/lesley.jpg"
          review="What a wonderful little cottage! More spacious and adorable than the
            pictures show. We never met our hosts, but we felt welcomed and..."
          name="Lesley"
          country="United Kingdom"
        />
        <Card
          imageSrc="/images/2.jpg"
          avatarSrc="/images/denise.jpg"
          review="What a wonderful little cottage! More spacious and adorable than the
            pictures show. We never met our hosts, but we felt welcomed and..."
          name="Lesley"
          country="United Kingdom"
        />
        <Card
          imageSrc="/images/3.jpg"
          avatarSrc="/images/jeff.jpg"
          review="What a wonderful little cottage! More spacious and adorable than the
            pictures show. We never met our hosts, but we felt welcomed and..."
          name="Lesley"
          country="United Kingdom"
        />
      </Flex>
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

In next part, we'll continue with main section.
main-section

Image of Wix Studio

2025: Your year to build apps that sell

Dive into hands-on resources and actionable strategies designed to help you build and sell apps on the Wix App Market.

Get started

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay