Skip to content

Commit

Permalink
fix: add hover/active states and update mobile/design choices
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmunns
cmunns committed May 18, 2022
1 parent 03e924d commit b7abf5f
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 58 deletions.
41 changes: 22 additions & 19 deletions packages/website/components/gateway.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@ export default function Gateway() {
}

return (
<div id="try-it" className="bg-white relative overflow-hidden text-center">
<div id="try-it" className="bg-white relative overflow-hidden">
<div className="mx-auto max-w-7xl w-full pt-16 pb-20 lg:py-32 px-6">
<div className="relative px-4 sm:px-8">
<div className="relative">
<h1 className="font-open-sans text-3xl font-bold text-black lg:text-4xl">
<span className="block">The NFT.Storage Gateway</span>
</h1>
<p className="mt-3 mx-auto text-lg text-gray-900 sm:text-xl md:mt-5 md:max-w-4xl">
<p className="mt-3 text-lg text-gray-900 sm:text-xl md:mt-5 md:max-w-4xl">
The NFT.Storage gateway is optimized for NFT content stored on IPFS,
and is especially fast if that content is stored on NFT.Storage.
Plug your NFT&apos;s content ID (CID) below to try it out.
</p>
</div>
<form>
<div className="sm:flex rounded-md max-w-3xl mx-auto mt-12 space-y-2 sm:space-y-0">
<span className="sm:inline-flex items-center px-3 sm:rounded-l-md sm:border-2 sm:border-r-0 sm:border-black sm:bg-gray-100 text-gray-500 sm:text-sm md:text-lg">
<div className="sm:flex rounded-md max-w-3xl mt-12 space-y-2 sm:space-y-0">
<span className="sm:inline-flex items-center sm:px-3 sm:rounded-l-md sm:border-2 sm:border-r-0 sm:border-black sm:bg-gray-100 text-gray-500 md:text-lg">
https://nftstorage.link/ipfs/
</span>
<input
Expand All @@ -34,42 +34,45 @@ export default function Gateway() {
id="cid"
onChange={(e) => setCid(e.target.value)}
value={cid}
className="truncate flex-1 min-w-0 block w-full px-3 py-3 rounded sm:rounded-none sm:rounded-r-md sm:text-sm md:text-lg border-2 border-black text-black placeholder:text-gray-500 focus:ring-indigo-500 focus:border-indigo-500"
className="truncate flex-1 min-w-0 block w-full px-3 py-3 rounded sm:rounded-none sm:rounded-r-md md:text-lg border-2 border-black text-black placeholder:text-gray-500 focus:ring-blue focus:border-blue"
placeholder="cid..."
/>
<button
type="submit"
onClick={(e) => handleCIDLink(e)}
className="inline-flex items-center px-5 py-2 rounded-lg border-2 border-red sm:ml-4 bg-orange text-white sm:text-sm md:text-lg font-semibold"
className="btn inline-flex items-center px-5 py-2 rounded-lg sm:ml-4 bg-orange text-white sm:text-sm md:text-lg font-semibold hover:bg-blue transition-colors"
>
GO
</button>
</div>
</form>

<div className="max-w-6xl mx-auto mt-6 sm:mt-24">
<dl className="rounded-lg bg-white md:grid grid-cols-3 text-center">
<div className="flex flex-col p-6 text-center">
<dt className="mt-2 text-6xl xl:text-7xl leading-tight font-goldman font-bold text-forest">
<div className="max-w-6xl mt-6 sm:mt-12">
<p className="mt-3 mb-4 text-lg text-gray-900 sm:text-xl md:mt-12 md:max-w-4xl">
Gateway at a Glance
</p>
<dl className="rounded-lg bg-white md:grid grid-cols-3 space-y-4 md:space-y-0 gap-2 md:gap-8 xl:gap-12">
<div className="flex flex-col pt-2 pb-6 px-6 rounded-lg bg-forest/[.06]">
<dt className="mt-2 text-6xl xl:text-7xl leading-1 font-goldman font-bold text-forest">
2-3x
</dt>
<dd className="text-lg xl:text-xl leading-tight font-semibold">
Faster than other public IPFS Gateways for avg. NFT reads
<dd className="text-sm md:text-base uppercase font-semibold">
Faster than other public IPFS Gateways for average NFT reads
</dd>
</div>
<div className="flex flex-col p-6 text-center">
<dt className="mt-2 text-6xl xl:text-7xl leading-tight font-goldman font-bold text-blue">
<div className="flex flex-col pt-2 pb-6 px-6 rounded-lg bg-blue/[.06]">
<dt className="mt-2 text-6xl xl:text-7xl leading-1 font-goldman font-bold text-blue">
1PiB+
</dt>
<dd className="text-lg xl:text-xl leading-tight font-semibold">
<dd className="text-sm md:text-base uppercase font-semibold">
Served per month
</dd>
</div>
<div className="flex flex-col p-6 text-center">
<dt className="mt-2 text-6xl xl:text-7xl leading-tight font-goldman font-bold text-orange">
<div className="flex flex-col pt-2 pb-6 px-6 rounded-lg bg-orange/[.06]">
<dt className="mt-2 text-6xl xl:text-7xl leading-1 font-goldman font-bold text-orange">
270+
</dt>
<dd className="text-lg xl:text-xl leading-tight font-semibold">
<dd className="text-sm md:text-base uppercase font-semibold">
Points of Presence
</dd>
</div>
Expand Down
13 changes: 10 additions & 3 deletions packages/website/components/hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import Img from '../components/cloudflareImage'
export default function Hero() {
return (
<div className="bg-peach relative overflow-hidden">
<div className="mx-auto max-w-7xl w-full pt-16 pb-20 lg:pb-36 lg:py-16 px-4">
<div className="relative z-10 px-4 md:w-3/5 sm:px-8 xl:pr-16">
<div className="mx-auto max-w-7xl w-full pt-16 pb-20 lg:pb-36 lg:py-16 px-6">
<div className="relative z-10 md:w-3/5 xl:pr-16">
<Img
src="images/nftstorage.link-logo.svg"
alt="logo"
Expand All @@ -23,10 +23,17 @@ export default function Hero() {
<div className="mt-10 sm:flex justify-start">
<a
href="#try-it"
className="uppercase underline underline-offset-4 text-orangred font-bold"
className="uppercase underline underline-offset-4 text-orangred font-bold hover:text-blue transition-colors"
>
Try it Out
</a>
<a
href="/api-docs"
target="_blank"
className="uppercase underline underline-offset-4 text-orangred font-bold ml-8 hover:text-blue transition-colors"
>
API Docs
</a>
</div>
</div>
</div>
Expand Down
34 changes: 16 additions & 18 deletions packages/website/components/superhot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function Superhot() {
</h1>
</div>

<div className="px-6 max-w-6xl mx-auto mt-12">
<div className="px-6 max-w-5xl mx-auto mt-12">
<div className="relative before:bg-[#F5C32C] before:absolute before:w-full before:h-full before:left-4 before:-top-4">
<div className="relative bg-white p-6 sm:p-10 lg:p-16 border-2 border-black">
<Img
Expand Down Expand Up @@ -69,13 +69,7 @@ export default function Superhot() {
Coming Soon
</small>
API for artists and collectors to perma-cache their
collections.{' '}
<a
href=""
className="text-orange underline underline-offset-4"
>
View API Docs
</a>
collections.
</p>
</li>
</ul>
Expand All @@ -94,15 +88,16 @@ export default function Superhot() {
htmlFor="first-name"
className="block text-sm font-semibold text-black"
>
First name
First name<span className="text-red">*</span>
</label>
<div className="mt-1">
<input
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
rules="required"
className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
/>
</div>
</div>
Expand All @@ -112,15 +107,16 @@ export default function Superhot() {
htmlFor="last-name"
className="block text-sm font-semibold text-black"
>
Last name
Last name<span className="text-red">*</span>
</label>
<div className="mt-1">
<input
type="text"
name="last-name"
id="last-name"
rules="required"
autoComplete="family-name"
className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
/>
</div>
</div>
Expand All @@ -130,7 +126,8 @@ export default function Superhot() {
htmlFor="email"
className="block text-sm font-semibold text-black"
>
Email address
Email address (signed up in nft.storage)
<span className="text-red">*</span>
</label>
<div className="mt-1">
<input
Expand All @@ -139,7 +136,8 @@ export default function Superhot() {
type="email"
autoComplete="email"
placeholder="name@email.com"
className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
rules="required|email"
className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
/>
</div>
</div>
Expand All @@ -156,7 +154,7 @@ export default function Superhot() {
name="size"
type="text"
placeholder="10,000"
className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
/>
</div>
</div>
Expand All @@ -173,7 +171,7 @@ export default function Superhot() {
name="org"
type="text"
placeholder="Acme Corp."
className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
/>
</div>
</div>
Expand All @@ -190,14 +188,14 @@ export default function Superhot() {
name="title"
type="text"
placeholder="Engineer"
className="px-2 py-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full border-black border-2 rounded-md"
className="px-2 py-1 focus:ring-indigo-500 focus:border-blue block w-full border-black border-2 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-6">
<button
type="submit"
className="py-1 uppercase inline-flex items-center px-5 rounded-md border-2 border-red bg-orange text-white sm:text-sm md:text-lg font-semibold"
className="btn py-2 uppercase inline-flex items-center px-5 rounded-md bg-orange text-white text-sm font-semibold"
>
Send
</button>
Expand Down
25 changes: 7 additions & 18 deletions packages/website/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,46 +32,35 @@ export default function Home() {
<div className="mx-auto max-w-6xl w-full pt-16 pb-20 6">
<div className="text-center lg:text-left lg:flex justify-between items-center px-6 space-y-6 lg:space-y-0">
<Img
src="/images/nft.storage-foot-logo.png"
alt="NFT.Storage logo"
width="150"
height="21"
className="mx-auto lg:mx-0"
src="images/nftstorage.link-logo.svg"
alt="logo"
className="mx-auto lg:mx-0 max-w-[220px]"
/>
<div className="space-x-4">
<a
href="#"
href="https://nft.storage"
className=""
target="_blank"
rel="noopener noreferrer"
>
NFT.Storage
</a>
<a
href="#"
href="https://ipfs.io"
className="border-l border-l-black pl-4"
target="_blank"
rel="noopener noreferrer"
>
IPFS
</a>
<a
href="#"
href="/terms"
className="border-l border-l-black pl-4"
target="_blank"
rel="noopener noreferrer"
>
Privacy Policy
Terms of Service
</a>
<a
href="#"
className="border-l border-l-black pl-4"
target="_blank"
rel="noopener noreferrer"
>
Legal
</a>
<span>&copy; 2022 Copyright NFT.STORAGE</span>
</div>
</div>
</div>
Expand Down
19 changes: 19 additions & 0 deletions packages/website/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,3 +93,22 @@ a {
.kwes-form .kw-border-error {
border-width: 2px !important;
}

.kw-field-error-message {
font-size: 12px;
}

.btn {
box-shadow: 0 0px 0 0px #0a854c, 0 0px 0 0px #ee4116, 0 0px 0 0px #e2ba36;
transition: all 0.2s ease-in-out;
}

.btn:hover {
background-color: #47aed7;
box-shadow: 0 3px 0 0px #0a854c, 0 6px 0 0px #ee4116, 0 9px 0 0px #e2ba36;
}

.btn:active {
box-shadow: inset 0 0 0 2px #000, 0 3px 0 0px #0a854c, 0 6px 0 0px #ee4116,
0 9px 0 0px #e2ba36;
}

0 comments on commit b7abf5f

Please sign in to comment.