83 lines
3.6 KiB
JavaScript
83 lines
3.6 KiB
JavaScript
import React from "react";
|
|
import Nav from "./Nav";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { socialLinks } from "@/data/socials";
|
|
export default function Home31() {
|
|
return (
|
|
<header className="relative wrapper !bg-[#f2f3fb]">
|
|
<div
|
|
className="alert !bg-[#747ed1] !text-white fade show !rounded-none !border-0 !mb-1 !text-center"
|
|
role="alert"
|
|
>
|
|
{/* /.container */}
|
|
</div>
|
|
{/* /.alert */}
|
|
<nav className="navbar navbar-expand-lg center-nav transparent navbar-light">
|
|
<div className="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
|
|
<div className="navbar-brand w-full">
|
|
<Link href={`/`}>
|
|
<Image
|
|
srcSet="/assets/img/logo-purple@2x.png 2x"
|
|
alt="image"
|
|
src="/assets/img/logo-purple.png"
|
|
width={134}
|
|
height={26}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
|
<div className="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
|
|
<h3 className="!text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-0">
|
|
Jsite
|
|
</h3>
|
|
<button
|
|
type="button"
|
|
className="btn-close btn-close-white !mr-[-0.75rem] m-0 p-0 leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:text-white before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(255,255,255,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]"
|
|
data-bs-dismiss="offcanvas"
|
|
aria-label="Close"
|
|
/>
|
|
</div>
|
|
<div className="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
|
|
<Nav color="#605dba" />
|
|
{/* /.navbar-nav */}
|
|
<div className="offcanvas-footer xl:!hidden lg:!hidden">
|
|
<div>
|
|
<a
|
|
href="mailto:first.last@email.com"
|
|
className="link-inverse"
|
|
>
|
|
info@email.com
|
|
</a>
|
|
<br />
|
|
00 (123) 456 78 90 <br />
|
|
<nav className="nav social social-white !mt-4">
|
|
{socialLinks.map((elm, i) => (
|
|
<a
|
|
key={i}
|
|
className="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
|
href={elm.href}
|
|
>
|
|
<i
|
|
className={`uil ${elm.icon} before:content-[${elm.unicode}] !text-white text-[1rem]`}
|
|
/>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
{/* /.social */}
|
|
</div>
|
|
</div>
|
|
{/* /.offcanvas-footer */}
|
|
</div>
|
|
{/* /.offcanvas-body */}
|
|
</div>
|
|
{/* /.navbar-collapse */}
|
|
{/* /.navbar-other */}
|
|
</div>
|
|
{/* /.container */}
|
|
</nav>
|
|
{/* /.navbar */}
|
|
</header>
|
|
);
|
|
}
|