mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework header

Browse Source
This commit is contained in:
m5r 2021-09-01 23:44:15 +08:00
parent 8699f587f9
commit c41fea755d
4 changed files with 93 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
app/public-area/components/header.tsx
View File

@ -6,8 +6,56 @@ import { XIcon } from "@heroicons/react/outline";
function Header() {
return (
<header className="absolute w-full z-30">
<div className="max-w-6xl mx-auto px-4 sm:px-6">
<header className="absolute inset-x-0 top-0 z-10 w-full">
<div className="px-4 mx-auto sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16 lg:h-20">
<div className="hidden lg:flex lg:items-center lg:justify-center lg:ml-10 lg:mr-auto lg:space-x-10">
<a
href="#"
title=""
className="text-base text-black transition-all duration-200 hover:text-opacity-80"
>
{" "}
Features{" "}
</a>
<a
href="#"
title=""
className="text-base text-black transition-all duration-200 hover:text-opacity-80"
>
{" "}
Solutions{" "}
</a>
<a
href="#"
title=""
className="text-base text-black transition-all duration-200 hover:text-opacity-80"
>
{" "}
Resources{" "}
</a>
<a
href="#"
title=""
className="text-base text-black transition-all duration-200 hover:text-opacity-80"
>
{" "}
Pricing{" "}
</a>
</div>
</div>
</div>
</header>
);
}
function Headerold() {
return (
<header className="absolute w-full z-30 inset-x-0 top-0">
<div className="px-4 mx-auto sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-20">
<div className="flex-shrink-0 mr-5">
<Link href="/">
@ -18,13 +66,19 @@ function Header() {
</div>
<nav className="hidden md:flex md:flex-grow">
<ul className="flex flex-grow flex-wrap items-center font-medium">
<ul className="flex items-center justify-center ml-10 mr-auto space-x-10">
<li>
<DesktopNavLink href={Routes.Features()} label="Features" />
</li>
<li>
<DesktopNavLink href={Routes.Roadmap()} label="Roadmap" />
</li>
<li>
<DesktopNavLink href={Routes.OpenMetrics()} label="Open Metrics" />
</li>
<li>
<DesktopNavLink href={Routes.Pricing()} label="Pricing" />
</li>
</ul>
</nav>
@ -43,9 +97,7 @@ type NavLinkProps = {
function DesktopNavLink({ href, label }: NavLinkProps) {
return (
<Link href={href}>
<a className="text-gray-600 hover:text-gray-900 px-5 py-2 flex items-center transition duration-150 ease-in-out">
{label}
</a>
<a className="text-base text-gray-600 hover:text-gray-900 transition duration-150 ease-in-out">{label}</a>
</Link>
);
}
@ -132,7 +184,7 @@ function MobileNav() {
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div ref={mobileNav} className="w-screen max-w-xs">
<div ref={mobileNav} className="w-screen max-w-[16rem] sm:max-w-sm">
<div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
<div className="px-4 sm:px-6">
<div className="flex items-start justify-between">
@ -153,7 +205,10 @@ function MobileNav() {
</div>
<div className="mt-6 relative flex-1 px-4 sm:px-6">
<div className="absolute inset-0 px-4 sm:px-6">
<ul>
<ul className="space-y-4">
<li>
<MobileNavLink href={Routes.Features()} label="Features" />
</li>
<li>
<MobileNavLink href={Routes.Roadmap()} label="Roadmap" />
</li>
@ -163,6 +218,9 @@ function MobileNav() {
label="Open Metrics"
/>
</li>
<li>
<MobileNavLink href={Routes.Pricing()} label="Pricing" />
</li>
</ul>
</div>
</div>
@ -179,7 +237,7 @@ function MobileNav() {
function MobileNavLink({ href, label }: NavLinkProps) {
return (
<Link href={href}>
<a onClick={() => setMobileNavOpen(false)} className="flex text-gray-600 hover:text-gray-900 py-2">
<a onClick={() => setMobileNavOpen(false)} className="text-base flex text-gray-600 hover:text-gray-900">
{label}
</a>
</Link>
@ -187,4 +245,4 @@ function MobileNav() {
}
}
export default Header;
export default Headerold;

2
app/public-area/components/hero.tsx
View File

@ -9,7 +9,7 @@ export default function Hero() {
<div className="flex flex-col lg:flex-row lg:items-stretch lg:min-h-screen lg:max-h-[900px]">
<div className="flex items-center justify-center w-full lg:order-2 lg:w-7/12">
<div className="h-full px-4 pt-24 pb-16 sm:px-6 lg:px-24 2xl:px-32 lg:pt-40 lg:pb-14">
<div className="flex flex-col flex-1 h-full space-y-8">
<div className="flex flex-col flex-1 justify-center h-full space-y-8">
<h1 className="font-heading text-4xl leading-tight lg:leading-tight xl:text-5xl xl:leading-tight">
<span className="bg-gradient-to-br from-primary-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
Take your phone number

12
app/public-area/pages/features.tsx Normal file
View File

@ -0,0 +1,12 @@
import type { BlitzPage } from "blitz";
import Layout from "../components/layout";
const Features: BlitzPage = () => {
return <div>Coming soon! Please come back later &#128075;</div>;
};
Features.getLayout = (page) => <Layout title="Features">{page}</Layout>;
Features.suppressFirstRenderFlicker = true;
export default Features;

12
app/public-area/pages/pricing.tsx Normal file
View File

@ -0,0 +1,12 @@
import type { BlitzPage } from "blitz";
import Layout from "../components/layout";
const Pricing: BlitzPage = () => {
return <div>Coming soon! Please come back later &#128075;</div>;
};
Pricing.getLayout = (page) => <Layout title="Pricing">{page}</Layout>;
Pricing.suppressFirstRenderFlicker = true;
export default Pricing;