diff --git a/app/core/styles/index.css b/app/core/styles/index.css index d6b6576..0bdeb6c 100644 --- a/app/core/styles/index.css +++ b/app/core/styles/index.css @@ -19,3 +19,122 @@ font-named-instance: "Italic"; 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 */ +} diff --git a/app/landing-page/components/header.tsx b/app/landing-page/components/header.tsx index c9af055..d06d50f 100644 --- a/app/landing-page/components/header.tsx +++ b/app/landing-page/components/header.tsx @@ -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(null); - const mobileNav = useRef(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 (
@@ -47,159 +10,10 @@ function Header() { {/* Logo */} - - - - - - - - - - - - - - +
- - {/* Desktop navigation */} - - - {/* Mobile menu */} -
- {/* Hamburger button */} - - - {/*Mobile navigation */} - - - -
diff --git a/app/landing-page/images/iphone-mockup.png b/app/landing-page/images/iphone-mockup.png new file mode 100644 index 0000000..a936f45 Binary files /dev/null and b/app/landing-page/images/iphone-mockup.png differ diff --git a/app/landing-page/images/mockup-image-01.jpg b/app/landing-page/images/mockup-image-01.jpg new file mode 100644 index 0000000..7d72f2e Binary files /dev/null and b/app/landing-page/images/mockup-image-01.jpg differ diff --git a/app/landing-page/pages/index.tsx b/app/landing-page/pages/index.tsx index b1229df..df24eb4 100644 --- a/app/landing-page/pages/index.tsx +++ b/app/landing-page/pages/index.tsx @@ -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 = () => { Shellphone: Your Personal Cloud Phone - { as="font" type="font/woff2" crossOrigin="anonymous" - /> + />*/} -
-
+
+
+
+ +
+
+
+
+ {/* Hero content */} +
+ {/* Content */} +
+

+ Take your phone number anywhere you go +

+

+ Keep your phone number and pay less for your communications, even + abroad. No download required. +

+ {/* CTA form */} +
+ + {/* Success message */} + {/*

Thanks for subscribing!

*/} +
+
    +
  • + + + + Lorem ipsum is placeholder text commonly. +
    • +
  • + + + + Excepteur sint occaecat cupidatat. +
    • +
  • + + + + Lorem ipsum is placeholder text commonly. +
    • +
+
+ + {/* Mobile mockup */} +
+
+ {/* Glow illustration */} + + {/* Image inside mockup size: 290x624px (or 580x1248px for Retina devices) */} + Features illustration + {/* iPhone mockup */} + +
+
+
+
+
+
+
+
); diff --git a/app/landing-page/styles/index.css b/app/landing-page/styles/index.css deleted file mode 100644 index e0517e9..0000000 --- a/app/landing-page/styles/index.css +++ /dev/null @@ -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; -} diff --git a/app/pages/_document.tsx b/app/pages/_document.tsx index ab42f64..be4a423 100644 --- a/app/pages/_document.tsx +++ b/app/pages/_document.tsx @@ -24,6 +24,15 @@ class MyDocument extends Document { + + + + + + + + + -
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..63607af Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-384x384.png b/public/android-chrome-384x384.png new file mode 100644 index 0000000..cd231af Binary files /dev/null and b/public/android-chrome-384x384.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..6011962 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/browserconfig.xml b/public/browserconfig.xml new file mode 100644 index 0000000..75a551d --- /dev/null +++ b/public/browserconfig.xml @@ -0,0 +1,8 @@ + + + + + #663399 + + + diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..6d3a6e0 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..32d7436 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico old mode 100755 new mode 100644 index a94b0f7..67d5a57 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest index 99e858f..3739462 100644 --- a/public/manifest.webmanifest +++ b/public/manifest.webmanifest @@ -16,6 +16,18 @@ "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", "orientation": "portrait", "theme_color": "#663399", diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg new file mode 100644 index 0000000..1b3c176 --- /dev/null +++ b/public/safari-pinned-tab.svg @@ -0,0 +1,55 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + diff --git a/public/shellphone.png b/public/shellphone.png new file mode 100644 index 0000000..ad21aed Binary files /dev/null and b/public/shellphone.png differ diff --git a/tailwind.config.js b/tailwind.config.js index 94fe12c..5665ccc 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,7 +7,7 @@ module.exports = { fontFamily: { sans: ["Inter var", ...defaultTheme.fontFamily.sans], inter: ["Inter var", "sans-serif"], - mackinac: [`"P22 Mackinac Pro"`, "sans-serif"], + mackinac: ["P22 Mackinac Pro", "sans-serif"], }, colors: { primary: {