import {FloatingDelayGroup} from '@floating-ui/react';
import cn from 'classnames';
import Head from 'next/head';
import Link from 'next/link';
import {useEffect, useRef, useState} from 'react';
import {
  ArrowRight,
  BarChart,
  Edit,
  GitHub,
  Heart,
  Share,
} from 'react-feather';

import Text from '../assets/text.svg';
import {MINI_SPONSORS, SPONSORS} from '../data';
import {Button} from '../lib/components/Button';
import {Cards} from '../lib/components/Cards';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeading,
  DialogTrigger,
} from '../lib/components/Dialog';
import {ComboboxDemo} from '../lib/components/Home/Combobox';
import {
  Menu,
  MenuItem,
} from '../lib/components/Home/DropdownMenu';
import {PopoverDemo} from '../lib/components/Home/Popover';
import {
  Arrow,
  Flip,
  Placement,
  Shift,
  Size,
  Virtual,
} from '../lib/components/Home/PositioningDemos';
import {SelectDemo} from '../lib/components/Home/Select';
import {Logos} from '../lib/components/Logos';
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '../lib/components/Tooltip';

const b64banner =
  'data:image/png;base64, ';

function HomePage() {
  const bannerRef = useRef();
  const logoRef = useRef();

  const [animate, setAnimate] = useState(true);
  const [hideBanner, setHideBanner] = useState(true);

  useEffect(() => {
    bannerRef.current.src = '/floating-ui.jpg';
  }, []);

  useEffect(() => {
    const logo = logoRef.current;
    const io = new IntersectionObserver(([entry]) => {
      setAnimate(entry.isIntersecting);
    });
    io.observe(logo);
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Head>
        <link rel="preload" as="image" href="/floating-ui.jpg" />
        <link
          rel="preload"
          href="/balloon-pool.jpg"
          as="image"
        />
        <title>
          Floating UI - Create tooltips, popovers, dropdowns, and
          more
        </title>
      </Head>
      <header className="font-satoshi relative overflow-hidden bg-gray-900 pb-16">
        <div className="container mx-auto max-w-screen-xl bg-[#202028] pt-16 text-center">
          <svg
            ref={logoRef}
            width="140"
            height="230"
            viewBox="0 0 300 467"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            className={cn('relative z-10 mx-auto', {
              'animate-float': animate,
            })}
            aria-label="Floating UI logo (a cute smiling red balloon)"
          >
            <path
              d="M142 348.5C141 361.167 141.6 390.3 152 405.5C165 424.5 178 456.5 181 464.5"
              stroke="black"
              strokeWidth="5"
              strokeLinecap="round"
              className={cn({
                'animate-string': animate,
              })}
              style={{transformOrigin: '40% 92%'}}
            />
            <path
              d="M140.844 339.077C142.001 337.094 144.867 337.094 146.025 339.077L151.297 348.107C152.465 350.107 151.022 352.62 148.706 352.62H138.162C135.846 352.62 134.404 350.107 135.572 348.107L140.844 339.077Z"
              fill="#AD3A56"
            />
            <path
              d="M300 161.326C300 251.5 220.707 328.146 143.939 343.13C66.6667 329.145 4.0404 244.736 -1.52588e-05 158.329C1.54128e-07 64.93 76.2185 0 154.04 0C231.862 0 300 63.4316 300 161.326Z"
              fill="url(#paint0_radial_201_2)"
            />
            <ellipse
              cx="76.7677"
              cy="184.801"
              rx="25.2525"
              ry="24.9731"
              fill="#CD0031"
              fillOpacity="0.5"
            />
            <ellipse
              cx="214.141"
              cy="184.801"
              rx="25.2525"
              ry="24.9731"
              fill="#CD0031"
              fillOpacity="0.4"
            />
            <ellipse
              cx="191.919"
              cy="163.823"
              rx="13.1313"
              ry="12.986"
              fill="#222222"
            />
            <ellipse
              cx="98.9899"
              cy="163.823"
              rx="13.1313"
              ry="12.986"
              fill="#222222"
            />
            <mask
              id="mask0_201_2"
              style={{maskType: 'alpha'}}
              maskUnits="userSpaceOnUse"
              x="123"
              y="180"
              width="46"
              height="32"
            >
              <path
                d="M123.232 183.805C123.232 182.148 124.575 180.805 126.232 180.805H165.687C167.344 180.805 168.687 182.148 168.687 183.805V208.772C168.687 210.429 167.344 211.772 165.687 211.772H126.232C124.575 211.772 123.232 210.429 123.232 208.772V183.805Z"
                fill="#C4C4C4"
              />
            </mask>
            <g mask="url(#mask0_201_2)">
              <path
                d="M168.687 182.304C168.687 194.717 158.512 204.779 145.96 204.779C133.408 204.779 123.232 194.717 123.232 182.304C123.232 169.891 133.408 159.828 145.96 159.828C158.512 159.828 168.687 169.891 168.687 182.304Z"
                fill="#222222"
              />
            </g>
            <defs>
              <radialGradient
                id="paint0_radial_201_2"
                cx="0"
                cy="0"
                r="1"
                gradientUnits="userSpaceOnUse"
                gradientTransform="translate(32.3232 221.761) rotate(-30.6138) scale(283.446 246.147)"
              >
                <stop stopColor="#FF3767" />
                <stop offset="0.807292" stopColor="#F36D76" />
                <stop offset="1" stopColor="#FFE1DA" />
              </radialGradient>
            </defs>
          </svg>

          <div
            className="absolute top-[-3rem] w-full overflow-hidden"
            style={{
              left: '50%',
              transform: 'translateX(-50%)',
              width: 'max-content',
            }}
          >
            <img
              role="presentation"
              className="select-none"
              src={b64banner}
              width={1167}
              height={648}
            />
            <img
              role="presentation"
              ref={bannerRef}
              className={`absolute select-none transition-all duration-500 top-0${
                hideBanner ? ' scale-95 opacity-0' : ' scale-100'
              }`}
              width={1167}
              height={648}
              onLoad={() => {
                setHideBanner(false);
              }}
            />
          </div>
          <Text
            className="z-1 relative top-[2rem] mx-auto"
            aria-label="Floating UI text logo"
          />

          <div className="z-1 relative mt-24 flex flex-row justify-center gap-x-4">
            <Link
              href="/docs/getting-started"
              className="hover:saturate-110 flex items-center gap-2 whitespace-nowrap rounded bg-gradient-to-br from-red-300 via-violet-300 to-cyan-400 px-4 py-3 font-bold text-gray-900 shadow-lg transition hover:shadow-xl hover:brightness-110 sm:text-lg"
            >
              Get Started <ArrowRight />
            </Link>
            <a
              href="https://github.com/floating-ui/floating-ui"
              className="flex items-center gap-2 rounded bg-gray-50 px-4 py-3 font-bold text-gray-900 shadow-lg transition hover:shadow-xl sm:text-lg"
              target="_blank"
              rel="noopener noreferrer"
            >
              <GitHub /> GitHub
            </a>
          </div>
          <p className="z-1 relative mx-auto mt-16 px-4 text-center text-xl leading-relaxed text-purple-200 dark:prose-invert lg:text-2xl">
            A JavaScript library to position{' '}
            <Tooltip noRest>
              <TooltipTrigger asChild>
                <strong
                  tabIndex={0}
                  // VoiceOver
                  role="button"
                  className="darkLfrom-blue-500 relative cursor-default font-semibold decoration-purple-300/70"
                  style={{
                    textDecorationLine: 'underline',
                    textUnderlineOffset: 8,
                    textDecorationThickness: 1,
                  }}
                >
                  floating elements
                </strong>
              </TooltipTrigger>
              <TooltipContent>
                <div className="p-2 text-lg">
                  A <strong>floating element</strong> is one that
                  floats on top of the UI without disrupting the
                  flow of content, like this one!
                </div>
              </TooltipContent>
            </Tooltip>{' '}
            and create interactions for them.
          </p>
        </div>
      </header>
      <main className="relative">
        <div className="font-satoshi container mx-auto max-w-screen-xl px-4 md:px-8">
          <h2 className="mb-4 mt-12 inline-block bg-gradient-to-r from-indigo-400 via-blue-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-indigo-400 dark:via-blue-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">
            Smart Anchor Positioning
          </h2>
          <p className="prose text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">
            Anchor a floating element next to another element
            while making sure it stays in view by{' '}
            <strong>avoiding collisions</strong>. This lets you
            position tooltips, popovers, or dropdowns optimally.
          </p>
        </div>
        <div className="container mx-auto grid max-w-screen-xl gap-4 py-10 md:px-4 lg:grid-cols-2">
          <Placement />
          <Shift />
          <Flip />
          <Size />
          <Arrow />
          <Virtual />
        </div>

        <div className="font-satoshi container mx-auto max-w-screen-xl px-4 md:px-8">
          <h2 className="mb-4 mt-12 inline-block bg-gradient-to-r from-indigo-400 via-blue-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-indigo-400 dark:via-blue-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">
            Interactions For React
          </h2>
          <p className="prose text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">
            Build your own floating UI components with React.
            From simple tooltips to select menus, you have full
            control while ensuring{' '}
            <strong>fully accessible</strong> UI experiences.
          </p>
        </div>

        <div className="container mx-auto mb-12 grid max-w-screen-xl gap-4 py-10 dark:text-black sm:grid-cols-2 md:px-4 lg:grid-cols-3">
          <div className="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]">
            <FloatingDelayGroup
              delay={{open: 1000, close: 150}}
              timeoutMs={200}
            >
              <div>
                <h3 className="mb-6 text-3xl font-bold">
                  Tooltips
                </h3>
                <p>
                  Floating elements that display information
                  related to an anchor element on hover or focus.
                </p>
              </div>
              <div className="flex justify-center gap-1">
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      aria-label="Like"
                      className="rounded-full p-3 hover:text-red-500 dark:hover:text-red-300"
                    >
                      <Heart size={26} />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Like</TooltipContent>
                </Tooltip>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      aria-label="Share"
                      className="rounded-full p-3 hover:text-blue-500 dark:hover:text-blue-300"
                    >
                      <Share size={26} />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Share</TooltipContent>
                </Tooltip>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      aria-label="Stats"
                      className="rounded-full p-3 hover:text-orange-500 dark:hover:text-orange-300"
                    >
                      <BarChart size={26} />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Stats</TooltipContent>
                </Tooltip>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button
                      aria-label="Edit"
                      className="rounded-full p-3 hover:text-green-500 dark:hover:text-green-300"
                    >
                      <Edit size={26} />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>Edit</TooltipContent>
                </Tooltip>
              </div>
            </FloatingDelayGroup>
          </div>

          <div className="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]">
            <div>
              <h3 className="mb-6 text-3xl font-bold">
                Popovers
              </h3>
              <p>
                Floating elements that display an anchored
                interactive dialog on click.
              </p>
            </div>
            <div className="flex justify-center gap-1">
              <PopoverDemo />
            </div>
          </div>

          <div className="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]">
            <div>
              <h3 className="mb-6 text-3xl font-bold">
                Select Menus
              </h3>
              <p>
                Floating elements that display a list of options
                to choose from on click.
              </p>
            </div>
            <div className="flex justify-center gap-1">
              <SelectDemo />
            </div>
          </div>

          <div className="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]">
            <div>
              <h3 className="mb-6 text-3xl font-bold">
                Comboboxes
              </h3>
              <p>
                Floating elements that combine an input and a
                list of searchable options to choose from.
              </p>
            </div>
            <div className="flex justify-center gap-1">
              <ComboboxDemo />
            </div>
          </div>

          <div className="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]">
            <div>
              <h3 className="mb-6 text-3xl font-bold">
                Dropdown Menus
              </h3>
              <p>
                Floating elements that display a list of buttons
                that perform an action.
              </p>
            </div>
            <div className="flex justify-center gap-1">
              <Menu label="Edit balloon">
                <MenuItem label="Inflate" />
                <MenuItem label="Deflate" />
                <MenuItem label="Tie" disabled />
                <Menu label="Pop with">
                  <MenuItem label="Knife" />
                  <MenuItem label="Pin" />
                  <MenuItem label="Fork" />
                  <MenuItem label="Sword" />
                </Menu>
                <Menu label="Change color to">
                  <MenuItem label="Blue" />
                  <MenuItem label="Red" />
                  <MenuItem label="Green" />
                </Menu>
                <Menu label="Transform">
                  <MenuItem label="Move" />
                  <MenuItem label="Rotate" />
                  <MenuItem label="Resize" />
                </Menu>
              </Menu>
            </div>
          </div>

          <div className="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]">
            <div>
              <h3 className="mb-6 text-3xl font-bold">
                Dialogs
              </h3>
              <p>
                Floating windows overlaid on the UI, rendering
                content underneath them inert.
              </p>
            </div>
            <div className="flex justify-center gap-1">
              <Dialog>
                <DialogTrigger asChild>
                  <Button>Delete balloon</Button>
                </DialogTrigger>
                <DialogContent className="rounded-lg bg-white p-6">
                  <DialogHeading className="mb-2 text-2xl font-bold">
                    Delete balloon
                  </DialogHeading>
                  <DialogDescription>
                    Are you sure you want to delete?
                  </DialogDescription>
                  <div className="mt-4 flex gap-2">
                    <DialogClose className="w-full cursor-default rounded-lg bg-red-500 p-2 text-white transition-colors hover:bg-red-600">
                      Confirm
                    </DialogClose>
                    <DialogClose className="w-full cursor-default rounded-lg bg-gray-300 p-2 transition-colors hover:bg-slate-200">
                      Cancel
                    </DialogClose>
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </div>

        <div className="container mx-auto mb-12 max-w-screen-xl px-4 text-center md:px-8 lg:mb-16">
          <Link
            href="/docs/react"
            className="inline-block rounded-md bg-rose-500 p-6 font-bold text-gray-50 transition-colors hover:bg-pink-500 dark:bg-rose-600 sm:text-xl"
          >
            Use Floating UI with React{' '}
            <ArrowRight
              className="relative top-[-1px] inline-block"
              size={20}
            />
          </Link>
        </div>

        <div className="container relative mx-auto max-w-screen-xl px-4 md:px-8">
          <h2 className="mb-4 mt-12 inline-block bg-gradient-to-r from-indigo-400 via-blue-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-indigo-400 dark:via-blue-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">
            Tree-shakeable & Platform-agnostic
          </h2>
          <p className="font-satoshi prose mb-8 text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">
            In addition to official bindings for the web, React
            DOM, React Native, and Vue, Floating UI also supports{' '}
            <code className="p-0">
              <span className="text-cyan-600 dark:text-cyan-300">
                &lt;
              </span>
              <span className="text-red-600 dark:text-red-400">
                canvas
              </span>
              <span className="text-cyan-600 dark:text-cyan-300">
                &gt;
              </span>
            </code>
            , and each module is{' '}
            <a
              href="https://bundlejs.com/?q=%40floating-ui%2Fdom&treeshake=%5B%7B%0A++computePosition%2Cshift%2ClimitShift%2Cflip%2Chide%2Coffset%2Carrow%2CautoPlacement%2Csize%2Cinline%2CautoUpdate%0A%7D%5D&config=%7B%22compression%22%3A%22brotli%22%7D"
              className="font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50"
              target="_blank"
              rel="noopener noreferrer"
            >
              fully tree-shakeable
            </a>{' '}
            by your bundler:
          </p>
          <div className="font-code grid items-center py-8 pb-16">
            <div className="text-md mx-auto flex flex-col pr-4 text-center sm:pr-20 sm:text-lg md:pr-40 md:text-xl">
              <div className="mb-2 flex items-center justify-center gap-2">
                <code className="flex-1 text-right text-blue-600 dark:text-blue-400">
                  computePosition
                  <span className="text-cyan-500 dark:text-cyan-200">
                    ()
                  </span>
                </code>
                <span className="text-md text-left text-gray-600 [font-variant-numeric:tabular-nums] dark:text-gray-400">
                  <span className="invisible">+</span>0.6 kB
                </span>
              </div>
              {[
                {name: 'shift', size: '0.6 kB'},
                {name: 'limitShift', size: '0.2 kB'},
                {name: 'flip', size: '0.8 kB'},
                {name: 'hide', size: '0.2 kB'},
                {name: 'offset', size: '0.1 kB'},
                {name: 'arrow', size: '0.5 kB'},
                {name: 'autoPlacement', size: '0.4 kB'},
                {name: 'size', size: '0.3 kB'},
                {name: 'inline', size: '0.6 kB'},
                {name: 'autoUpdate', size: '0.3 kB'},
              ].map(({name, size}) => (
                <div
                  className="mb-2 flex items-center justify-center gap-2"
                  key={name}
                >
                  <code className="flex-1 text-right text-blue-600 dark:text-blue-400">
                    {name}
                    <span className="text-cyan-500 dark:text-cyan-200">
                      ()
                    </span>
                  </code>
                  <span className="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">
                    +{size}
                  </span>
                </div>
              ))}
              <div className="mb-2 flex items-center justify-center gap-3">
                <code className="flex-1 text-right text-gray-600 dark:text-gray-400">
                  DOM platform
                </code>
                <span className="text-md text-left text-yellow-700 [font-variant-numeric:tabular-nums] dark:text-yellow-400">
                  +2.5 kB
                </span>
              </div>
            </div>
          </div>
        </div>

        <div className="font-satoshi container mx-auto max-w-screen-xl px-4 md:px-8">
          <h2 className="mb-4 mt-12 inline-block bg-gradient-to-r from-indigo-400 via-blue-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-indigo-400 dark:via-blue-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">
            Support Floating UI
          </h2>
          <p className="prose mb-8 text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">
            Floating UI is free and open source, proudly
            sponsored by the following organizations — consider
            joining them on{' '}
            <a
              className="font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50"
              href="https://opencollective.com/floating-ui"
              target="_blank"
              rel="noopener noreferrer"
            >
              Open Collective
            </a>
            .
          </p>
          <Cards items={SPONSORS} />
          <Logos items={MINI_SPONSORS} />
        </div>

        <div className="container relative mx-auto max-w-screen-xl px-4 md:px-8">
          <h2 className="mb-4 mt-12 inline-block bg-gradient-to-r from-indigo-400 via-blue-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-indigo-400 dark:via-blue-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">
            Install
          </h2>
          <p className="font-satoshi prose mb-8 text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">
            Start playing via your package manager or CDN.
          </p>

          <div className="grid gap-4 lg:grid-cols-2">
            <div className="rounded-lg bg-white p-8 shadow dark:bg-gray-700 dark:text-gray-100">
              <h3 className="mb-4 text-2xl font-bold">
                Package Manager
              </h3>
              <p className="text-lg">
                Install with npm, Yarn, or pnpm.
              </p>
              <Link
                href="/docs/getting-started"
                className="mt-4 flex items-center gap-2 text-xl font-bold text-rose-600 dark:text-rose-300"
              >
                Get started <ArrowRight />
              </Link>
            </div>
            <div className="rounded-lg bg-white p-8 shadow dark:bg-gray-700 dark:text-gray-100">
              <h3 className="mb-4 text-2xl font-bold">CDN</h3>
              <p className="text-lg">
                Install with the jsDelivr CDN.
              </p>
              <Link
                href="/docs/getting-started#cdn"
                className="mt-4 flex items-center gap-2 text-xl font-bold text-rose-600 dark:text-rose-300"
              >
                Get started <ArrowRight />
              </Link>
            </div>
          </div>
        </div>
      </main>

      <footer className="mt-16 bg-gray-50 py-8 text-center shadow dark:border-t dark:border-gray-800 dark:bg-transparent dark:text-gray-500">
        <div className="container mx-auto flex max-w-screen-xl flex-col gap-3 px-4">
          <p>
            <strong className="font-semibold">
              © {new Date().getFullYear()} • MIT License
            </strong>
          </p>
          <p className="dark:text-gray-400">
            Floating UI is the evolution of Popper 2, designed to
            bring the project to a new level.
          </p>
          <p className="dark:text-gray-400">
            Floating shapes in the header are licensed under CC
            BY from{' '}
            <a
              className="font-semibold text-rose-600 dark:text-rose-300"
              href="https://www.figma.com/@killnicole"
            >
              Vic
            </a>{' '}
            and{' '}
            <a
              className="font-semibold text-rose-600 dark:text-rose-300"
              href="https://www.figma.com/@Artstar3d"
            >
              Lisa Star
            </a>
            . Partial modifications were made.
          </p>
          <p>
            <a
              href="https://www.netlify.com/"
              target="_blank"
              rel="noopener noreferrer"
              className="font-semibold text-rose-600 dark:text-rose-300"
            >
              This site is powered by Netlify
            </a>
            .
          </p>
        </div>
      </footer>
    </>
  );
}

export default HomePage;
