Skip to content

Commit fc5eb17

Browse files
author
Federico Orlandau
committed
Include image and link components from nexjts
1 parent 1951c00 commit fc5eb17

File tree

5 files changed

+111
-81
lines changed

5 files changed

+111
-81
lines changed

‎next.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
module.exports = {
22
reactStrictMode: true,
3+
images: {
4+
domains: ['tailwindui.com', 'i.ibb.co'],
5+
},
36
}

‎src/components/Footer/Footer.tsx

+73-57
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export default function Footer() {
1+
import Link from 'next/link'
2+
3+
export default function Footer(): JSX.Element {
24
return (
35
<footer className="px-4 bg-coolGray-100 text-coolGray-800 ">
46
<div className="container flex flex-col justify-center py-10 mx-auto space-y-8 lg:flex-row lg:space-y-0">
@@ -9,24 +11,26 @@ export default function Footer() {
911
</h3>
1012
<ul className="space-y-1 ">
1113
<li>
12-
<a href="/" className="text-gray-500 hover:text-gray-900">
13-
Features
14-
</a>
14+
<Link href="/">
15+
<a className="text-gray-500 hover:text-gray-900">Features</a>
16+
</Link>
1517
</li>
1618
<li>
17-
<a href="/" className="text-gray-500 hover:text-gray-900">
18-
Integrations
19-
</a>
19+
<Link href="/">
20+
<a className="text-gray-500 hover:text-gray-900">
21+
Integrations
22+
</a>
23+
</Link>
2024
</li>
2125
<li>
22-
<a href="/" className="text-gray-500 hover:text-gray-900">
23-
Pricing
24-
</a>
26+
<Link href="/">
27+
<a className="text-gray-500 hover:text-gray-900">Pricing</a>
28+
</Link>
2529
</li>
2630
<li>
27-
<a href="/" className="text-gray-500 hover:text-gray-900">
28-
FAQ
29-
</a>
31+
<Link href="/">
32+
<a className="text-gray-500 hover:text-gray-900">FAQ</a>
33+
</Link>
3034
</li>
3135
</ul>
3236
</div>
@@ -36,34 +40,40 @@ export default function Footer() {
3640
</h3>
3741
<ul className="space-y-1">
3842
<li>
39-
<a href="/" className="text-gray-500 hover:text-gray-900">
40-
Privacy
41-
</a>
43+
<Link href="/">
44+
<a className="text-gray-500 hover:text-gray-900">Privacy</a>
45+
</Link>
4246
</li>
4347
<li>
44-
<a href="/" className="text-gray-500 hover:text-gray-900">
45-
Terms of Service
46-
</a>
48+
<Link href="/">
49+
<a className="text-gray-500 hover:text-gray-900">
50+
Terms of Service
51+
</a>
52+
</Link>
4753
</li>
4854
</ul>
4955
</div>
5056
<div className="space-y-3">
5157
<h3 className="uppercase text-gray-500 font-bold">Developers</h3>
5258
<ul className="space-y-1">
5359
<li>
54-
<a href="/" className="text-gray-500 hover:text-gray-900">
55-
Public API
56-
</a>
60+
<Link href="/">
61+
<a className="text-gray-500 hover:text-gray-900">
62+
Public API
63+
</a>
64+
</Link>
5765
</li>
5866
<li>
59-
<a href="/" className="text-gray-500 hover:text-gray-900">
60-
Documentation
61-
</a>
67+
<Link href="/">
68+
<a className="text-gray-500 hover:text-gray-900">
69+
Documentation
70+
</a>
71+
</Link>
6272
</li>
6373
<li>
64-
<a href="/" className="text-gray-500 hover:text-gray-900">
65-
Guides
66-
</a>
74+
<Link href="/">
75+
<a className="text-gray-500 hover:text-gray-900">Guides</a>
76+
</Link>
6777
</li>
6878
</ul>
6979
</div>
@@ -72,35 +82,41 @@ export default function Footer() {
7282
Social media
7383
</div>
7484
<div className="flex justify-start space-x-3">
75-
<a href="/" title="Facebook" className="flex items-center p-1">
76-
<svg
77-
xmlns="http://www.w3.org/2000/svg"
78-
fill="currentColor"
79-
viewBox="0 0 32 32"
80-
className="w-5 h-5 fill-current text-gray-500 hover:text-gray-900"
81-
>
82-
<path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z" />
83-
</svg>
84-
</a>
85-
<a href="/" title="Twitter" className="flex items-center p-1">
86-
<svg
87-
viewBox="0 0 24 24"
88-
xmlns="http://www.w3.org/2000/svg"
89-
className="w-5 h-5 fill-current text-gray-500 hover:text-gray-900"
90-
>
91-
<path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />
92-
</svg>
93-
</a>
94-
<a href="/" title="Instagram" className="flex items-center p-1">
95-
<svg
96-
xmlns="http://www.w3.org/2000/svg"
97-
viewBox="0 0 32 32"
98-
fill="currentColor"
99-
className="w-5 h-5 fill-current text-gray-500 hover:text-gray-900"
100-
>
101-
<path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z" />
102-
</svg>
103-
</a>
85+
<Link href="/">
86+
<a title="Facebook" className="flex items-center p-1">
87+
<svg
88+
xmlns="http://www.w3.org/2000/svg"
89+
fill="currentColor"
90+
viewBox="0 0 32 32"
91+
className="w-5 h-5 fill-current text-gray-500 hover:text-gray-900"
92+
>
93+
<path d="M32 16c0-8.839-7.167-16-16-16-8.839 0-16 7.161-16 16 0 7.984 5.849 14.604 13.5 15.803v-11.177h-4.063v-4.625h4.063v-3.527c0-4.009 2.385-6.223 6.041-6.223 1.751 0 3.584 0.312 3.584 0.312v3.937h-2.021c-1.984 0-2.604 1.235-2.604 2.5v3h4.437l-0.713 4.625h-3.724v11.177c7.645-1.199 13.5-7.819 13.5-15.803z" />
94+
</svg>
95+
</a>
96+
</Link>
97+
<Link href="/">
98+
<a title="Twitter" className="flex items-center p-1">
99+
<svg
100+
viewBox="0 0 24 24"
101+
xmlns="http://www.w3.org/2000/svg"
102+
className="w-5 h-5 fill-current text-gray-500 hover:text-gray-900"
103+
>
104+
<path d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z" />
105+
</svg>
106+
</a>
107+
</Link>
108+
<Link href="/">
109+
<a title="Instagram" className="flex items-center p-1">
110+
<svg
111+
xmlns="http://www.w3.org/2000/svg"
112+
viewBox="0 0 32 32"
113+
fill="currentColor"
114+
className="w-5 h-5 fill-current text-gray-500 hover:text-gray-900"
115+
>
116+
<path d="M16 0c-4.349 0-4.891 0.021-6.593 0.093-1.709 0.084-2.865 0.349-3.885 0.745-1.052 0.412-1.948 0.959-2.833 1.849-0.891 0.885-1.443 1.781-1.849 2.833-0.396 1.020-0.661 2.176-0.745 3.885-0.077 1.703-0.093 2.244-0.093 6.593s0.021 4.891 0.093 6.593c0.084 1.704 0.349 2.865 0.745 3.885 0.412 1.052 0.959 1.948 1.849 2.833 0.885 0.891 1.781 1.443 2.833 1.849 1.020 0.391 2.181 0.661 3.885 0.745 1.703 0.077 2.244 0.093 6.593 0.093s4.891-0.021 6.593-0.093c1.704-0.084 2.865-0.355 3.885-0.745 1.052-0.412 1.948-0.959 2.833-1.849 0.891-0.885 1.443-1.776 1.849-2.833 0.391-1.020 0.661-2.181 0.745-3.885 0.077-1.703 0.093-2.244 0.093-6.593s-0.021-4.891-0.093-6.593c-0.084-1.704-0.355-2.871-0.745-3.885-0.412-1.052-0.959-1.948-1.849-2.833-0.885-0.891-1.776-1.443-2.833-1.849-1.020-0.396-2.181-0.661-3.885-0.745-1.703-0.077-2.244-0.093-6.593-0.093zM16 2.88c4.271 0 4.781 0.021 6.469 0.093 1.557 0.073 2.405 0.333 2.968 0.553 0.751 0.291 1.276 0.635 1.844 1.197 0.557 0.557 0.901 1.088 1.192 1.839 0.22 0.563 0.48 1.411 0.553 2.968 0.072 1.688 0.093 2.199 0.093 6.469s-0.021 4.781-0.099 6.469c-0.084 1.557-0.344 2.405-0.563 2.968-0.303 0.751-0.641 1.276-1.199 1.844-0.563 0.557-1.099 0.901-1.844 1.192-0.556 0.22-1.416 0.48-2.979 0.553-1.697 0.072-2.197 0.093-6.479 0.093s-4.781-0.021-6.48-0.099c-1.557-0.084-2.416-0.344-2.979-0.563-0.76-0.303-1.281-0.641-1.839-1.199-0.563-0.563-0.921-1.099-1.197-1.844-0.224-0.556-0.48-1.416-0.563-2.979-0.057-1.677-0.084-2.197-0.084-6.459 0-4.26 0.027-4.781 0.084-6.479 0.083-1.563 0.339-2.421 0.563-2.979 0.276-0.761 0.635-1.281 1.197-1.844 0.557-0.557 1.079-0.917 1.839-1.199 0.563-0.219 1.401-0.479 2.964-0.557 1.697-0.061 2.197-0.083 6.473-0.083zM16 7.787c-4.541 0-8.213 3.677-8.213 8.213 0 4.541 3.677 8.213 8.213 8.213 4.541 0 8.213-3.677 8.213-8.213 0-4.541-3.677-8.213-8.213-8.213zM16 21.333c-2.948 0-5.333-2.385-5.333-5.333s2.385-5.333 5.333-5.333c2.948 0 5.333 2.385 5.333 5.333s-2.385 5.333-5.333 5.333zM26.464 7.459c0 1.063-0.865 1.921-1.923 1.921-1.063 0-1.921-0.859-1.921-1.921 0-1.057 0.864-1.917 1.921-1.917s1.923 0.86 1.923 1.917z" />
117+
</svg>
118+
</a>
119+
</Link>
104120
</div>
105121
</div>
106122
</div>

‎src/components/Hero/Hero.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react'
22

3+
import Image from 'next/image'
4+
35
export interface HeroProps {
46
title: string
57
description: string
@@ -26,11 +28,13 @@ export default function Hero(props: HeroProps): JSX.Element {
2628
</button>
2729
</a>
2830
</div>
29-
<img
30-
className="w-full mt-8 md:mt-0 object-fill md:w-2/3 md:-ml-4 lg:-ml-4 xl:ml-0"
31+
<Image
3132
src="https://i.ibb.co/9GMTkW3/desktop.png"
33+
className="w-full mt-8 md:mt-0 object-fill md:w-2/3 md:-ml-4 lg:-ml-4 xl:ml-0"
3234
alt="sample page"
3335
role="img"
36+
height="674"
37+
width="901"
3438
/>
3539
</div>
3640
</div>

‎src/components/Navbar/Navbar.tsx

+27-21
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import {
1616
XIcon,
1717
} from '@heroicons/react/outline'
1818
import { ChevronDownIcon } from '@heroicons/react/solid'
19+
import Image from 'next/image'
20+
import Link from 'next/link'
1921

2022
const solutions = [
2123
{
@@ -104,14 +106,18 @@ export default function Navbar(): JSX.Element {
104106
<div className="mx-auto px-4 sm:px-6">
105107
<div className="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
106108
<div className="flex justify-start lg:w-0 lg:flex-1">
107-
<a href="/">
108-
<span className="sr-only">Workflow</span>
109-
<img
110-
className="h-8 w-auto sm:h-10"
111-
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
112-
alt=""
113-
/>
114-
</a>
109+
<Link href="/">
110+
<a>
111+
<span className="sr-only">Workflow</span>
112+
<Image
113+
className="h-8 w-auto sm:h-10"
114+
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
115+
alt=""
116+
width="50"
117+
height="50"
118+
/>
119+
</a>
120+
</Link>
115121
</div>
116122
<div className="-mr-2 -my-2 md:hidden">
117123
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
@@ -195,18 +201,16 @@ export default function Navbar(): JSX.Element {
195201
)}
196202
</Popover>
197203

198-
<a
199-
href="/test"
200-
className="text-base font-medium text-gray-500 hover:text-gray-900"
201-
>
202-
Test
203-
</a>
204-
<a
205-
href="/test"
206-
className="text-base font-medium text-gray-500 hover:text-gray-900"
207-
>
208-
Docs
209-
</a>
204+
<Link href="/test">
205+
<a className="text-base font-medium text-gray-500 hover:text-gray-900">
206+
Test
207+
</a>
208+
</Link>
209+
<Link href="/test">
210+
<a className="text-base font-medium text-gray-500 hover:text-gray-900">
211+
Docs
212+
</a>
213+
</Link>
210214

211215
<Popover className="relative">
212216
{({ open }) => (
@@ -333,10 +337,12 @@ export default function Navbar(): JSX.Element {
333337
<div className="pt-5 pb-6 px-5">
334338
<div className="flex items-center justify-between">
335339
<div>
336-
<img
340+
<Image
337341
className="h-8 w-auto"
338342
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
339343
alt="Workflow"
344+
height="50"
345+
width="50"
340346
/>
341347
</div>
342348
<div className="-mr-2">

‎tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"**/*.ts",
2020
"**/*.tsx",
2121
"tailwind.config.js",
22-
"postcss.config.js"
22+
"postcss.config.js",
23+
"next.config.js"
2324
],
2425
"exclude": ["node_modules"]
2526
}

0 commit comments

Comments
 (0)