favicons et fonts
This commit is contained in:
parent
6417f5dbcf
commit
20b6a7a996
@ -19,3 +19,122 @@
|
|||||||
font-named-instance: "Italic";
|
font-named-instance: "Italic";
|
||||||
src: url("/fonts/inter-italic.var.woff2") format("woff2");
|
src: url("/fonts/inter-italic.var.woff2") format("woff2");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h1 {
|
||||||
|
@apply text-4xl font-extrabold tracking-tighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2 {
|
||||||
|
@apply text-3xl font-extrabold tracking-tighter;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h3 {
|
||||||
|
@apply text-3xl font-extrabold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h4 {
|
||||||
|
@apply text-2xl font-extrabold tracking-tight;
|
||||||
|
}
|
||||||
|
|
||||||
|
@screen md {
|
||||||
|
.h1 {
|
||||||
|
@apply text-5xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2 {
|
||||||
|
@apply text-4xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn,
|
||||||
|
.btn-sm {
|
||||||
|
@apply font-medium inline-flex items-center justify-center border border-transparent rounded leading-snug transition duration-150 ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
@apply px-8 py-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm {
|
||||||
|
@apply px-4 py-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input,
|
||||||
|
.form-textarea,
|
||||||
|
.form-multiselect,
|
||||||
|
.form-select,
|
||||||
|
.form-checkbox,
|
||||||
|
.form-radio {
|
||||||
|
@apply bg-white border border-gray-300 focus:border-gray-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input,
|
||||||
|
.form-textarea,
|
||||||
|
.form-multiselect,
|
||||||
|
.form-select,
|
||||||
|
.form-checkbox {
|
||||||
|
@apply rounded;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input,
|
||||||
|
.form-textarea,
|
||||||
|
.form-multiselect,
|
||||||
|
.form-select {
|
||||||
|
@apply leading-snug py-3 px-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input,
|
||||||
|
.form-textarea {
|
||||||
|
@apply placeholder-gray-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-select {
|
||||||
|
@apply pr-10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-checkbox,
|
||||||
|
.form-radio {
|
||||||
|
@apply text-primary-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chrome, Safari and Opera */
|
||||||
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-scrollbar {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|||||||
@ -1,43 +1,6 @@
|
|||||||
import { useState, useRef, useEffect, MouseEventHandler } from "react";
|
|
||||||
import { Link } from "blitz";
|
import { Link } from "blitz";
|
||||||
import { Menu, Transition } from "@headlessui/react";
|
|
||||||
|
|
||||||
function Header() {
|
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 (
|
return (
|
||||||
<header className="absolute w-full z-30">
|
<header className="absolute w-full z-30">
|
||||||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||||||
@ -47,159 +10,10 @@ function Header() {
|
|||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<a className="block">
|
<a className="block">
|
||||||
<svg className="w-8 h-8" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
<img className="w-10 h-10" src="/shellphone.png" />
|
||||||
<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>
|
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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 useCurrentUser from "../../core/hooks/use-current-user";
|
||||||
import Header from "../components/header";
|
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 = () => {
|
const LandingPage: BlitzPage = () => {
|
||||||
return (
|
return (
|
||||||
@ -15,7 +16,7 @@ const LandingPage: BlitzPage = () => {
|
|||||||
<Head>
|
<Head>
|
||||||
<title>Shellphone: Your Personal Cloud Phone</title>
|
<title>Shellphone: Your Personal Cloud Phone</title>
|
||||||
|
|
||||||
<link
|
{/*<link
|
||||||
rel="preload"
|
rel="preload"
|
||||||
href="/fonts/P22MackinacPro-Book.woff2"
|
href="/fonts/P22MackinacPro-Book.woff2"
|
||||||
as="font"
|
as="font"
|
||||||
@ -42,10 +43,157 @@ const LandingPage: BlitzPage = () => {
|
|||||||
as="font"
|
as="font"
|
||||||
type="font/woff2"
|
type="font/woff2"
|
||||||
crossOrigin="anonymous"
|
crossOrigin="anonymous"
|
||||||
/>
|
/>*/}
|
||||||
</Head>
|
</Head>
|
||||||
<section className="font-inter antialiased bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 tracking-tight">
|
<section className="font-inter antialiased bg-white text-gray-900 tracking-tight">
|
||||||
|
<section className="flex flex-col min-h-screen overflow-hidden">
|
||||||
<Header />
|
<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>
|
</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;
|
|
||||||
}
|
|
||||||
@ -24,6 +24,15 @@ class MyDocument extends Document {
|
|||||||
<meta name="msapplication-starturl" content="/" />
|
<meta name="msapplication-starturl" content="/" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||||
|
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||||
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#663399" />
|
||||||
|
<meta name="apple-mobile-web-app-title" content="Shellphone: Your Personal Cloud Phone" />
|
||||||
|
<meta name="application-name" content="Shellphone: Your Personal Cloud Phone" />
|
||||||
|
<meta name="msapplication-TileColor" content="#663399" />
|
||||||
|
<meta name="theme-color" content="#ffffff" />
|
||||||
|
|
||||||
<link
|
<link
|
||||||
rel="preload"
|
rel="preload"
|
||||||
href="/fonts/inter-roman.var.woff2"
|
href="/fonts/inter-roman.var.woff2"
|
||||||
@ -31,13 +40,6 @@ class MyDocument extends Document {
|
|||||||
type="font/woff2"
|
type="font/woff2"
|
||||||
crossOrigin="anonymous"
|
crossOrigin="anonymous"
|
||||||
/>
|
/>
|
||||||
<link
|
|
||||||
rel="preload"
|
|
||||||
href="/fonts/inter-italic.var.woff2"
|
|
||||||
as="font"
|
|
||||||
type="font/woff2"
|
|
||||||
crossOrigin="anonymous"
|
|
||||||
/>
|
|
||||||
</Head>
|
</Head>
|
||||||
<body>
|
<body>
|
||||||
<Main />
|
<Main />
|
||||||
|
|||||||
BIN
public/android-chrome-192x192.png
Normal file
BIN
public/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
public/android-chrome-384x384.png
Normal file
BIN
public/android-chrome-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
public/apple-touch-icon.png
Normal file
BIN
public/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
8
public/browserconfig.xml
Normal file
8
public/browserconfig.xml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<browserconfig>
|
||||||
|
<msapplication>
|
||||||
|
<tile>
|
||||||
|
<TileColor>#663399</TileColor>
|
||||||
|
</tile>
|
||||||
|
</msapplication>
|
||||||
|
</browserconfig>
|
||||||
BIN
public/favicon-16x16.png
Normal file
BIN
public/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/favicon-32x32.png
Normal file
BIN
public/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
public/favicon.ico
Executable file → Normal file
BIN
public/favicon.ico
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 556 B After Width: | Height: | Size: 15 KiB |
@ -16,6 +16,18 @@
|
|||||||
"url": "/calls"
|
"url": "/calls"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/android-chrome-384x384.png",
|
||||||
|
"sizes": "384x384",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"orientation": "portrait",
|
"orientation": "portrait",
|
||||||
"theme_color": "#663399",
|
"theme_color": "#663399",
|
||||||
|
|||||||
55
public/safari-pinned-tab.svg
Normal file
55
public/safari-pinned-tab.svg
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="425.000000pt" height="425.000000pt" viewBox="0 0 425.000000 425.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
<metadata>
|
||||||
|
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
||||||
|
</metadata>
|
||||||
|
<g transform="translate(0.000000,425.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#000000" stroke="none">
|
||||||
|
<path d="M424 4014 c-16 -8 -42 -25 -58 -39 -16 -14 -33 -25 -38 -25 -5 0 -6
|
||||||
|
-4 -3 -10 3 -5 1 -10 -4 -10 -6 0 -11 -7 -11 -15 0 -8 -5 -15 -11 -15 -6 0 -9
|
||||||
|
-7 -5 -15 3 -8 0 -15 -7 -15 -8 0 -6 -4 3 -10 8 -5 10 -10 5 -10 -6 0 -11 -9
|
||||||
|
-11 -20 0 -11 4 -20 8 -20 4 0 8 -6 8 -14 0 -20 41 -27 81 -15 61 18 70 18 89
|
||||||
|
-1 11 -11 20 -22 20 -25 0 -5 25 -37 48 -61 7 -8 10 -14 7 -14 -4 0 6 -13 21
|
||||||
|
-28 16 -15 37 -40 48 -55 10 -15 23 -24 29 -20 6 3 7 1 3 -5 -4 -7 -2 -12 5
|
||||||
|
-12 7 0 9 -3 6 -7 -4 -4 5 -19 20 -35 15 -15 23 -28 19 -28 -5 0 6 -13 24 -30
|
||||||
|
18 -16 29 -30 26 -30 -6 0 7 -16 64 -80 14 -16 30 -35 35 -42 6 -8 19 -25 30
|
||||||
|
-38 12 -14 14 -20 5 -15 -13 7 -13 6 -2 -7 8 -10 9 -19 3 -22 -11 -7 -9 -25 3
|
||||||
|
-45 6 -10 5 -12 -2 -7 -16 9 -15 -7 0 -22 19 -19 19 -191 0 -219 -8 -13 -10
|
||||||
|
-23 -6 -23 5 0 3 -4 -3 -8 -24 -15 -19 -115 8 -166 8 -14 7 -16 -3 -11 -7 4
|
||||||
|
-1 -5 15 -19 43 -42 55 -68 50 -103 -3 -18 -10 -33 -15 -33 -6 0 -5 -6 2 -15
|
||||||
|
7 -8 8 -15 3 -15 -6 0 -9 -10 -9 -22 1 -13 0 -27 -3 -33 -11 -20 -10 -40 2
|
||||||
|
-47 7 -4 7 -8 2 -8 -13 0 -13 -99 -1 -119 7 -10 5 -12 -5 -6 -11 7 -12 6 -3
|
||||||
|
-6 6 -8 11 -25 12 -39 1 -14 6 -26 12 -28 5 -2 8 -8 5 -12 -6 -10 41 -60 55
|
||||||
|
-60 6 0 10 -4 10 -10 0 -5 7 -10 15 -10 8 0 15 -5 15 -11 0 -5 4 -8 9 -4 19
|
||||||
|
11 25 -22 27 -135 1 -63 3 -115 4 -115 1 0 3 -16 4 -35 1 -20 5 -41 10 -48 4
|
||||||
|
-7 5 -16 1 -21 -3 -5 -1 -12 5 -16 6 -4 8 -10 5 -15 -7 -11 59 -172 107 -259
|
||||||
|
23 -41 60 -97 83 -125 23 -28 57 -76 77 -106 42 -66 212 -227 306 -289 210
|
||||||
|
-140 447 -259 602 -302 19 -6 50 -17 67 -25 38 -17 140 -30 319 -40 l128 -7
|
||||||
|
59 -48 c130 -105 308 -155 520 -146 117 4 133 7 190 35 34 17 81 50 105 73 44
|
||||||
|
43 50 64 44 161 -2 33 1 39 30 54 39 19 194 168 213 204 32 61 48 162 42 274
|
||||||
|
-5 123 -13 160 -63 320 -64 203 -236 503 -374 651 -25 28 -55 64 -65 80 -11
|
||||||
|
17 -61 73 -112 124 -51 52 -93 99 -93 103 0 4 -4 8 -10 8 -12 0 -42 24 -90 73
|
||||||
|
-21 20 -43 37 -49 37 -6 0 -11 5 -11 11 0 5 -3 8 -7 6 -10 -6 -34 19 -26 27 4
|
||||||
|
3 0 6 -8 6 -8 0 -29 14 -47 30 -18 17 -37 30 -43 30 -5 0 -9 5 -9 10 0 6 -7
|
||||||
|
10 -15 10 -8 0 -15 5 -15 10 0 6 -5 10 -10 10 -6 0 -16 5 -23 10 -31 26 -86
|
||||||
|
58 -91 52 -3 -3 -6 0 -6 6 0 6 -16 16 -35 22 -19 6 -35 16 -35 21 0 5 -3 8 -7
|
||||||
|
7 -5 -1 -27 8 -49 20 -23 11 -44 18 -48 15 -3 -4 -6 -1 -6 5 0 7 -3 11 -7 10
|
||||||
|
-5 -1 -39 8 -78 20 -84 26 -155 42 -155 35 0 -3 -6 -1 -12 4 -7 5 -41 9 -75 9
|
||||||
|
-35 -1 -63 3 -63 7 0 5 -5 5 -11 1 -16 -9 -139 -10 -139 -1 0 5 -4 6 -9 2 -5
|
||||||
|
-3 -12 4 -16 15 -3 11 -12 20 -18 20 -7 0 -21 11 -31 25 -10 14 -25 25 -33 25
|
||||||
|
-7 0 -16 6 -19 14 -9 24 -91 53 -174 62 -25 3 -51 7 -57 9 -7 2 -13 1 -13 -3
|
||||||
|
0 -4 -32 -6 -70 -6 -58 1 -77 6 -110 28 -22 14 -44 26 -50 26 -5 0 -10 4 -10
|
||||||
|
8 0 4 -8 8 -17 9 -10 0 -29 4 -43 8 -14 4 -63 9 -110 10 -47 2 -87 4 -90 5 -3
|
||||||
|
1 -8 2 -12 1 -5 0 -8 2 -8 7 0 4 -19 8 -42 10 -29 2 -51 11 -69 28 -25 24
|
||||||
|
-109 42 -109 23 0 -5 -11 -3 -25 3 -14 6 -25 15 -25 19 0 7 -38 54 -77 96 -12
|
||||||
|
13 -20 23 -18 23 2 0 -9 14 -25 32 -16 17 -26 36 -23 41 3 6 2 8 -3 5 -5 -3
|
||||||
|
-15 0 -22 8 -7 8 -10 14 -6 14 4 0 -6 13 -22 29 -55 53 -134 142 -134 150 0 4
|
||||||
|
-11 14 -25 21 -13 7 -22 16 -20 20 3 5 -2 10 -10 14 -8 3 -15 10 -15 16 0 6
|
||||||
|
-7 18 -15 26 -20 21 -19 27 10 58 27 29 32 42 13 30 -10 -6 -10 -4 -2 7 13 16
|
||||||
|
15 49 2 49 -4 0 -8 5 -8 11 0 38 -75 57 -126 33z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.6 KiB |
BIN
public/shellphone.png
Normal file
BIN
public/shellphone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
@ -7,7 +7,7 @@ module.exports = {
|
|||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
|
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
|
||||||
inter: ["Inter var", "sans-serif"],
|
inter: ["Inter var", "sans-serif"],
|
||||||
mackinac: [`"P22 Mackinac Pro"`, "sans-serif"],
|
mackinac: ["P22 Mackinac Pro", "sans-serif"],
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
primary: {
|
primary: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user