Contact 23

<section id="relume" class="px-[5%] py-16 md:py-24 lg:py-28">
  <div class="container">
    <div
      class="rb-12 mx-auto mb-12 flex max-w-lg flex-col justify-center text-center md:mb-18 lg:mb-20"
    >
      <p class="mb-3 font-semibold md:mb-4">Tagline</p>
      <h2 class="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">Contact us</h2>
      <p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div
      class="grid auto-cols-fr gap-x-8 gap-y-12 sm:gap-x-8 md:grid-cols-2 md:gap-y-16 lg:grid-cols-4"
    >
      <div class="flex flex-col items-center justify-start text-center">
        <div class="mb-5 sm:mb-6">
          <svg
            stroke="currentColor"
            fill="currentColor"
            stroke-width="0"
            viewBox="0 0 24 24"
            class="size-12"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 2v.511l-8 6.223-8-6.222V6h16zM4 18V9.044l7.386 5.745a.994.994 0 0 0 1.228 0L20 9.044 20.002 18H4z"
            ></path>
          </svg>
        </div>
        <h3 class="mb-3 text-2xl font-bold leading-[1.4] sm:mb-4 md:text-3xl lg:mb-4 lg:text-4xl">
          Email
        </h3>
        <p class="mb-5 text-center md:mb-6">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.
        </p>
        <a class="underline" href="#">hello@relume.io</a>
      </div>
      <div class="flex flex-col items-center justify-start text-center">
        <div class="mb-5 sm:mb-6">
          <svg
            stroke="currentColor"
            fill="currentColor"
            stroke-width="0"
            viewBox="0 0 24 24"
            class="size-12"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M20 2H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h3v3.767L13.277 18H20c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 14h-7.277L9 18.233V16H4V4h16v12z"
            ></path>
            <path d="M7 7h10v2H7zm0 4h7v2H7z"></path>
          </svg>
        </div>
        <h3 class="mb-3 text-2xl font-bold leading-[1.4] sm:mb-4 md:text-3xl lg:mb-4 lg:text-4xl">
          Live chat
        </h3>
        <p class="mb-5 text-center md:mb-6">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.
        </p>
        <a class="underline" href="#">Start new chat</a>
      </div>
      <div class="flex flex-col items-center justify-start text-center">
        <div class="mb-5 sm:mb-6">
          <svg
            stroke="currentColor"
            fill="currentColor"
            stroke-width="0"
            viewBox="0 0 24 24"
            class="size-12"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M17.707 12.293a.999.999 0 0 0-1.414 0l-1.594 1.594c-.739-.22-2.118-.72-2.992-1.594s-1.374-2.253-1.594-2.992l1.594-1.594a.999.999 0 0 0 0-1.414l-4-4a.999.999 0 0 0-1.414 0L3.581 5.005c-.38.38-.594.902-.586 1.435.023 1.424.4 6.37 4.298 10.268s8.844 4.274 10.269 4.298h.028c.528 0 1.027-.208 1.405-.586l2.712-2.712a.999.999 0 0 0 0-1.414l-4-4.001zm-.127 6.712c-1.248-.021-5.518-.356-8.873-3.712-3.366-3.366-3.692-7.651-3.712-8.874L7 4.414 9.586 7 8.293 8.293a1 1 0 0 0-.272.912c.024.115.611 2.842 2.271 4.502s4.387 2.247 4.502 2.271a.991.991 0 0 0 .912-.271L17 14.414 19.586 17l-2.006 2.005z"
            ></path>
          </svg>
        </div>
        <h3 class="mb-3 text-2xl font-bold leading-[1.4] sm:mb-4 md:text-3xl lg:mb-4 lg:text-4xl">
          Phone
        </h3>
        <p class="mb-5 text-center md:mb-6">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.
        </p>
        <a class="underline" href="#">+1 (555) 000-0000</a>
      </div>
      <div class="flex flex-col items-center justify-start text-center">
        <div class="mb-5 sm:mb-6">
          <svg
            stroke="currentColor"
            fill="currentColor"
            stroke-width="0"
            viewBox="0 0 24 24"
            class="size-12"
            height="1em"
            width="1em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 14c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"
            ></path>
            <path
              d="M11.42 21.814a.998.998 0 0 0 1.16 0C12.884 21.599 20.029 16.44 20 10c0-4.411-3.589-8-8-8S4 5.589 4 9.995c-.029 6.445 7.116 11.604 7.42 11.819zM12 4c3.309 0 6 2.691 6 6.005.021 4.438-4.388 8.423-6 9.73-1.611-1.308-6.021-5.294-6-9.735 0-3.309 2.691-6 6-6z"
            ></path>
          </svg>
        </div>
        <h3 class="mb-3 text-2xl font-bold leading-[1.4] sm:mb-4 md:text-3xl lg:mb-4 lg:text-4xl">
          Office
        </h3>
        <p class="mb-5 text-center md:mb-6">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.
        </p>
        <a class="underline" href="#">123 Sample St, Sydney NSW 2000 AU</a>
      </div>
    </div>
  </div>
</section>

import React from "react";
import { BiEnvelope, BiMessageDetail, BiMap, BiPhone } from "react-icons/bi";

type LinkProps = {
  label: string;
  url: string;
};

type Contact = {
  icon: React.ReactNode;
  title: string;
  description: string;
  link: LinkProps;
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  contacts: Contact[];
};

export type Contact23Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Contact23 = (props: Contact23Props) => {
  const { tagline, heading, description, contacts } = {
    ...Contact23Defaults,
    ...props,
  };
  return (
    <section id="relume" className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="rb-12 mx-auto mb-12 flex max-w-lg flex-col justify-center text-center md:mb-18 lg:mb-20">
          <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
          <h2 className="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">
            {heading}
          </h2>
          <p className="md:text-md">{description}</p>
        </div>
        <div className="grid auto-cols-fr gap-x-8 gap-y-12 sm:gap-x-8 md:grid-cols-2 md:gap-y-16 lg:grid-cols-4">
          {contacts.map((contact, index) => (
            <div key={index} className="flex flex-col items-center justify-start text-center">
              <div className="mb-5 sm:mb-6">{contact.icon}</div>
              <h3 className="mb-3 text-2xl font-bold leading-[1.4] sm:mb-4 md:text-3xl lg:mb-4 lg:text-4xl">
                {contact.title}
              </h3>
              <p className="mb-5 text-center md:mb-6">{contact.description}</p>
              <a className="underline" href={contact.link.url}>
                {contact.link.label}
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export const Contact23Defaults: Props = {
  tagline: "Tagline",
  heading: "Contact us",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  contacts: [
    {
      icon: <BiEnvelope className="size-12" />,
      title: "Email",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.",
      link: {
        label: "hello@relume.io",
        url: "#",
      },
    },
    {
      icon: <BiMessageDetail className="size-12" />,
      title: "Live chat",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.",
      link: {
        label: "Start new chat",
        url: "#",
      },
    },
    {
      icon: <BiPhone className="size-12" />,
      title: "Phone",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.",
      link: {
        label: "+1 (555) 000-0000",
        url: "#",
      },
    },
    {
      icon: <BiMap className="size-12" />,
      title: "Office",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in ero.",
      link: {
        label: "123 Sample St, Sydney NSW 2000 AU",
        url: "#",
      },
    },
  ],
};

You need to be logged in to view the code.

Get the code

Upgrade your plan to view the code.

Upgrade

Details

Introduction to Site Builder

1. Duplicate the Figma Kit

2. Update the Style Guide

3. Build your page

1. Clone the style guide

2. Copy component

3. Paste in to project

Contact 23

Contact 23

私たちの力を体験してください AI サイトビルダー今日

Introduction to Site Builder

1. Duplicate the Figma Kit

2. Update the Style Guide

3. Build your page

1. Clone the style guide

2. Copy component

3. Paste in to project

Contact 23

Contact 23

私たちの力を体験してください AI サイトビルダー 今日

私たちの力を体験してください AI サイトビルダー今日