favicons et fonts
This commit is contained in:
m5r
@ -1,43 +1,6 @@
|
||||
import { useState, useRef, useEffect, MouseEventHandler } from "react";
|
||||
import { Link } from "blitz";
|
||||
import { Menu, Transition } from "@headlessui/react";
|
||||
|
||||
function Header() {
|
||||
const [mobileNavOpen, setMobileNavOpen] = useState(false);
|
||||
|
||||
const trigger = useRef<HTMLButtonElement>(null);
|
||||
const mobileNav = useRef<HTMLElement>(null);
|
||||
|
||||
// close the mobile menu on click outside
|
||||
useEffect(() => {
|
||||
const clickHandler = ({ target }: MouseEvent) => {
|
||||
if (!mobileNav.current || !trigger.current) {
|
||||
return;
|
||||
}
|
||||
console.log(mobileNav.current.contains(target as Node));
|
||||
if (
|
||||
!mobileNavOpen ||
|
||||
mobileNav.current.contains(target as Node) ||
|
||||
trigger.current.contains(target as Node)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setMobileNavOpen(false);
|
||||
};
|
||||
document.addEventListener("click", clickHandler);
|
||||
return () => document.removeEventListener("click", clickHandler);
|
||||
});
|
||||
|
||||
// close the mobile menu if the esc key is pressed
|
||||
useEffect(() => {
|
||||
const keyHandler = ({ keyCode }: KeyboardEvent) => {
|
||||
if (!mobileNavOpen || keyCode !== 27) return;
|
||||
setMobileNavOpen(false);
|
||||
};
|
||||
document.addEventListener("keydown", keyHandler);
|
||||
return () => document.removeEventListener("keydown", keyHandler);
|
||||
});
|
||||
|
||||
return (
|
||||
<header className="absolute w-full z-30">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
@ -47,159 +10,10 @@ function Header() {
|
||||
{/* Logo */}
|
||||
<Link href="/">
|
||||
<a className="block">
|
||||
<svg className="w-8 h-8" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="26%" y1="100%" x2="100%" y2="100%" id="logo_a">
|
||||
<stop stopColor="#3ABAB4" offset="0%" />
|
||||
<stop stopColor="#7F9CF5" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="26%" y1="100%" x2="100%" y2="100%" id="logo_b">
|
||||
<stop stopColor="#3ABAB4" offset="0%" />
|
||||
<stop stopColor="#3ABAB4" stopOpacity="0" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M32 16h-8a8 8 0 10-16 0H0C0 7.163 7.163 0 16 0s16 7.163 16 16z"
|
||||
fill="url(#logo_a)"
|
||||
/>
|
||||
<path
|
||||
d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16h8a8 8 0 1016 0h8z"
|
||||
fill="url(#logo_b)"
|
||||
/>
|
||||
</svg>
|
||||
<img className="w-10 h-10" src="/shellphone.png" />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Desktop navigation */}
|
||||
<nav className="hidden md:flex md:flex-grow">
|
||||
{/* Desktop menu links */}
|
||||
<ul className="flex flex-grow flex-wrap items-center font-medium">
|
||||
<li>
|
||||
<Link href="/about">
|
||||
<a className="text-gray-600 hover:text-gray-900 px-5 py-2 flex items-center transition duration-150 ease-in-out">
|
||||
About
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog">
|
||||
<a className="text-gray-600 hover:text-gray-900 px-5 py-2 flex items-center transition duration-150 ease-in-out">
|
||||
Blog
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/testimonials">
|
||||
<a className="text-gray-600 hover:text-gray-900 px-5 py-2 flex items-center transition duration-150 ease-in-out">
|
||||
Testimonials
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Desktop CTA on the right */}
|
||||
<ul className="flex justify-end flex-wrap items-center">
|
||||
<li>
|
||||
<Link href="/contact">
|
||||
<a className="btn-sm text-white bg-teal-500 hover:bg-teal-400 ml-6">Request code</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{/* Mobile menu */}
|
||||
<div className="inline-flex md:hidden">
|
||||
{/* Hamburger button */}
|
||||
<button
|
||||
ref={trigger}
|
||||
className={`hamburger ${mobileNavOpen && "active"}`}
|
||||
aria-controls="mobile-nav"
|
||||
aria-expanded={mobileNavOpen}
|
||||
onClick={() => setMobileNavOpen(!mobileNavOpen)}
|
||||
>
|
||||
<span className="sr-only">Menu</span>
|
||||
<svg
|
||||
className="w-6 h-6 fill-current text-gray-900 hover:text-gray-900 transition duration-150 ease-in-out"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect y="4" width="24" height="2" rx="1" />
|
||||
<rect y="11" width="24" height="2" rx="1" />
|
||||
<rect y="18" width="24" height="2" rx="1" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/*Mobile navigation */}
|
||||
<Transition
|
||||
show={mobileNavOpen}
|
||||
as="ul"
|
||||
className="fixed top-0 h-screen z-20 left-0 w-full max-w-sm -ml-16 overflow-scroll bg-white shadow-lg"
|
||||
enter="transition ease-out duration-200 transform"
|
||||
enterFrom="opacity-0 -translate-x-full"
|
||||
enterTo="opacity-100 translate-x-0"
|
||||
leave="transition ease-out duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<nav
|
||||
id="mobile-nav"
|
||||
ref={mobileNav}
|
||||
className="fixed top-0 h-screen z-20 left-0 w-full max-w-sm -ml-16 overflow-scroll bg-white shadow-lg no-scrollbar"
|
||||
>
|
||||
<div className="py-6 pr-4 pl-20">
|
||||
{/* Logo */}
|
||||
<svg className="w-8 h-8" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient x1="26%" y1="100%" x2="100%" y2="100%" id="menulogo_a">
|
||||
<stop stopColor="#3ABAB4" offset="0%" />
|
||||
<stop stopColor="#7F9CF5" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="26%" y1="100%" x2="100%" y2="100%" id="menulogo_b">
|
||||
<stop stopColor="#3ABAB4" offset="0%" />
|
||||
<stop stopColor="#3ABAB4" stopOpacity="0" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M32 16h-8a8 8 0 10-16 0H0C0 7.163 7.163 0 16 0s16 7.163 16 16z"
|
||||
fill="url(#menulogo_a)"
|
||||
/>
|
||||
<path
|
||||
d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16h8a8 8 0 1016 0h8z"
|
||||
fill="url(#menulogo_b)"
|
||||
/>
|
||||
</svg>
|
||||
{/* Links */}
|
||||
<ul>
|
||||
<li>
|
||||
<Link href="/about">
|
||||
<a className="flex text-gray-600 hover:text-gray-900 py-2">About</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog">
|
||||
<a className="flex text-gray-600 hover:text-gray-900 py-2">Blog</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/testimonials">
|
||||
<a className="flex text-gray-600 hover:text-gray-900 py-2">
|
||||
Testimonials
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact">
|
||||
<a className="font-medium w-full inline-flex items-center justify-center border border-transparent px-4 py-2 my-2 rounded text-white bg-teal-500 hover:bg-teal-400 transition duration-150 ease-in-out">
|
||||
Request code
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
BIN
app/landing-page/images/iphone-mockup.png
Normal file
BIN
app/landing-page/images/iphone-mockup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
app/landing-page/images/mockup-image-01.jpg
Normal file
BIN
app/landing-page/images/mockup-image-01.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@ -7,7 +7,8 @@ import logout from "../../auth/mutations/logout";
|
||||
import useCurrentUser from "../../core/hooks/use-current-user";
|
||||
import Header from "../components/header";
|
||||
|
||||
import "../styles/index.css";
|
||||
import iphoneMockup from "../images/iphone-mockup.png";
|
||||
import mockupImage from "../images/mockup-image-01.jpg";
|
||||
|
||||
const LandingPage: BlitzPage = () => {
|
||||
return (
|
||||
@ -15,7 +16,7 @@ const LandingPage: BlitzPage = () => {
|
||||
<Head>
|
||||
<title>Shellphone: Your Personal Cloud Phone</title>
|
||||
|
||||
<link
|
||||
{/*<link
|
||||
rel="preload"
|
||||
href="/fonts/P22MackinacPro-Book.woff2"
|
||||
as="font"
|
||||
@ -42,10 +43,157 @@ const LandingPage: BlitzPage = () => {
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
/>*/}
|
||||
</Head>
|
||||
<section className="font-inter antialiased bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 tracking-tight">
|
||||
<Header />
|
||||
<section className="font-inter antialiased bg-white text-gray-900 tracking-tight">
|
||||
<section className="flex flex-col min-h-screen overflow-hidden">
|
||||
<Header />
|
||||
|
||||
<main className="flex-grow">
|
||||
<section>
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div className="pt-32 pb-10 md:pt-40 md:pb-16">
|
||||
{/* Hero content */}
|
||||
<div className="md:grid md:grid-cols-12 md:gap-12 lg:gap-20 items-center">
|
||||
{/* Content */}
|
||||
<div className="md:col-span-7 lg:col-span-7 mb-8 md:mb-0 text-center md:text-left">
|
||||
<h1 className="h1 lg:text-5xl mb-4 font-red-hat-display font-extrabold font-mackinac">
|
||||
Take your phone number anywhere you go
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600">
|
||||
Keep your phone number and pay less for your communications, even
|
||||
abroad. No download required.
|
||||
</p>
|
||||
{/* CTA form */}
|
||||
<form className="mt-8">
|
||||
<div className="flex flex-col sm:flex-row justify-center max-w-sm mx-auto sm:max-w-md md:mx-0">
|
||||
<input
|
||||
type="tel"
|
||||
className="form-input w-full mb-2 sm:mb-0 sm:mr-2"
|
||||
placeholder="Phone number"
|
||||
aria-label="Phone number"
|
||||
/>
|
||||
<a
|
||||
className="btn text-white bg-primary-500 hover:bg-primary-400 flex-shrink-0"
|
||||
href="#0"
|
||||
>
|
||||
Request code
|
||||
</a>
|
||||
</div>
|
||||
{/* Success message */}
|
||||
{/* <p className="text-center md:text-left mt-2 opacity-75 text-sm">Thanks for subscribing!</p> */}
|
||||
</form>
|
||||
<ul className="max-w-sm sm:max-w-md mx-auto md:max-w-none text-gray-600 mt-8 -mb-2">
|
||||
<li className="flex items-center mb-2">
|
||||
<svg
|
||||
className="w-3 h-3 fill-current text-primary-400 mr-2 flex-shrink-0"
|
||||
viewBox="0 0 12 12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
|
||||
</svg>
|
||||
<span>Lorem ipsum is placeholder text commonly.</span>
|
||||
</li>
|
||||
<li className="flex items-center mb-2">
|
||||
<svg
|
||||
className="w-3 h-3 fill-current text-primary-400 mr-2 flex-shrink-0"
|
||||
viewBox="0 0 12 12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
|
||||
</svg>
|
||||
<span>Excepteur sint occaecat cupidatat.</span>
|
||||
</li>
|
||||
<li className="flex items-center mb-2">
|
||||
<svg
|
||||
className="w-3 h-3 fill-current text-primary-400 mr-2 flex-shrink-0"
|
||||
viewBox="0 0 12 12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
|
||||
</svg>
|
||||
<span>Lorem ipsum is placeholder text commonly.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Mobile mockup */}
|
||||
<div className="md:col-span-5 lg:col-span-5 text-center md:text-right">
|
||||
<div className="inline-flex relative justify-center items-center">
|
||||
{/* Glow illustration */}
|
||||
<svg
|
||||
className="absolute mr-12 mt-32 pointer-events-none -z-1"
|
||||
aria-hidden="true"
|
||||
width="678"
|
||||
height="634"
|
||||
viewBox="0 0 678 634"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="240"
|
||||
cy="394"
|
||||
r="240"
|
||||
fill="url(#piphoneill_paint0_radial)"
|
||||
fillOpacity=".4"
|
||||
/>
|
||||
<circle
|
||||
cx="438"
|
||||
cy="240"
|
||||
r="240"
|
||||
fill="url(#piphoneill_paint1_radial)"
|
||||
fillOpacity=".6"
|
||||
/>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="piphoneill_paint0_radial"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="rotate(90 -77 317) scale(189.054)"
|
||||
>
|
||||
<stop stopColor="#667EEA" />
|
||||
<stop offset="1" stopColor="#667EEA" stopOpacity=".01" />
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="piphoneill_paint1_radial"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="rotate(90 99 339) scale(189.054)"
|
||||
>
|
||||
<stop stopColor="#9F7AEA" />
|
||||
<stop offset="1" stopColor="#9F7AEA" stopOpacity=".01" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
{/* Image inside mockup size: 290x624px (or 580x1248px for Retina devices) */}
|
||||
<img
|
||||
className="absolute max-w-[84.33%]"
|
||||
src={mockupImage.src}
|
||||
width={290}
|
||||
height={624}
|
||||
alt="Features illustration"
|
||||
/>
|
||||
{/* iPhone mockup */}
|
||||
<img
|
||||
className="relative max-w-full mx-auto md:mr-0 md:max-w-none h-auto pointer-events-none"
|
||||
src={iphoneMockup.src}
|
||||
width={344}
|
||||
height={674}
|
||||
alt="iPhone mockup"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</section>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "P22 Mackinac Pro";
|
||||
src: url("/fonts/P22MackinacPro-Book.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: optional;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "P22 Mackinac Pro";
|
||||
src: url("/fonts/P22MackinacPro-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: optional;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "P22 Mackinac Pro";
|
||||
src: url("/fonts/P22MackinacPro-ExtraBold.woff2") format("woff2");
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: optional;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "P22 Mackinac Pro";
|
||||
src: url("/fonts/P22MackinacPro-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: optional;
|
||||
}
|
||||
Reference in New Issue
Block a user