Skip to content

Commit f3a45ed

Browse files
vojtaholikvojtaholik
committed
home: header banner & refactor
1 parent 77a70e7 commit f3a45ed

File tree

3 files changed

+394
-322
lines changed

3 files changed

+394
-322
lines changed

‎src/components/pages/home/components/header.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import * as React from 'react'
2+
import {FunctionComponent} from 'react'
3+
import Image from 'next/image'
4+
import Link from 'next/link'
5+
6+
type HeaderProps = {
7+
heading?: string
8+
subheading?: string
9+
primaryCta?: {
10+
label?: string
11+
url?: string
12+
}
13+
secondaryCta?: {
14+
label?: string
15+
url?: string
16+
}
17+
}
18+
19+
const Header: FunctionComponent<HeaderProps> = ({
20+
heading = `Learn the best JavaScript tools and frameworks from industry pros`,
21+
subheading = `egghead is a boutique label curating high-quality in-depth web
22+
screencasts and resources for professional web developers`,
23+
primaryCta = {label: 'Create an account', url: '/login'},
24+
secondaryCta = {label: 'Learn more', url: '/about'},
25+
}) => {
26+
return (
27+
<header className="md:px-16 px-8 md:py-24 py-16 md:-mt-5 md:rounded-b-lg md:rounded-t-none rounded-lg bg-gray-900 text-white relative overflow-hidden">
28+
<div className="relative z-10">
29+
<div className="text-center space-y-5 max-w-2xl mx-auto">
30+
<h1 className="md:text-3xl text-2xl font-extrabold leading-tighter tracking-tight">
31+
{heading}
32+
</h1>
33+
<h2 className="md:text-xl text-lg font-light leading-tight">
34+
{subheading}
35+
</h2>
36+
</div>
37+
{primaryCta || secondaryCta ? (
38+
<div className="pt-10 flex md:flex-row flex-col md:space-y-0 space-y-4 items-center justify-center space-x-2">
39+
{primaryCta.url && (
40+
<Link href={primaryCta.url}>
41+
<a className="md:w-auto w-full px-5 py-3 text-center rounded-md bg-blue-600 text-white font-semibold shadow-lg hover:bg-indigo-600 transform hover:scale-105 transition-all duration-150 ease-in-out">
42+
{primaryCta.label}
43+
</a>
44+
</Link>
45+
)}
46+
{secondaryCta.url && (
47+
<Link href={secondaryCta.url}>
48+
<a className="md:w-auto w-full px-5 py-3 text-center rounded-md bg-white text-black bg-opacity-100 hover:bg-opacity-100 font-semibold shadow-lg hover:bg-blue-50 transform hover:scale-105 transition-all duration-150 ease-in-out">
49+
{secondaryCta.label}
50+
</a>
51+
</Link>
52+
)}
53+
</div>
54+
) : null}
55+
</div>
56+
<Image
57+
src="https://res.cloudinary.com/dg3gyk0gu/image/upload/v1608137337/next.egghead.io/pages/home/header_2x.png"
58+
layout="fill"
59+
quality={100}
60+
objectFit="cover"
61+
className="absolute left-0 top-0 z-0"
62+
alt=""
63+
/>
64+
</header>
65+
)
66+
}
67+
68+
export default Header

‎src/components/pages/home/data.ts‎

Lines changed: 320 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,320 @@
1+
const data = [
2+
{
3+
id: 'video',
4+
name: 'Work Smarter',
5+
title: 'Rethinking How to Use a Keyboard',
6+
description:
7+
'A keyboard is the gateway to code. Your hands are the tools that manage the keyboard. Many people develop pain in their hands from repetitive stress injuries that can seriously damage their ability to code. This talk is about making your keyboard experience as gentle as possible on your hands so your hands are happier and you work more effeciently.',
8+
instructor: 'John Lindquist',
9+
instructor_path: '/q/resources-by-john-lindquist',
10+
path:
11+
'talks/egghead-save-your-hands-and-save-your-time-rethinking-how-to-use-a-keyboard',
12+
poster:
13+
'https://res.cloudinary.com/dg3gyk0gu/image/upload/v1606471489/next.egghead.io/posters/egghead-save-your-hands-and-save-your-time-rethinking-how-to-use-a-keyboard_2x_shrink.png',
14+
hls_url:
15+
'https://d2c5owlt6rorc3.cloudfront.net/egghead-save-your-hands-and-save-your-time-rethinking-how-to-use-a-keyboard-McpE69LtI/hls/egghead-save-your-hands-and-save-your-time-rethinking-how-to-use-a-keyboard-McpE69LtI.m3u8',
16+
17+
dash_url:
18+
'https://d2c5owlt6rorc3.cloudfront.net/egghead-save-your-hands-and-save-your-time-rethinking-how-to-use-a-keyboard-McpE69LtI/dash/egghead-save-your-hands-and-save-your-time-rethinking-how-to-use-a-keyboard-McpE69LtI.mpd',
19+
20+
subtitlesUrl:
21+
'https://egghead.io/api/v1/lessons/egghead-save-your-hands-and-save-your-time-rethinking-how-to-use-a-keyboard/subtitles',
22+
},
23+
{
24+
id: 'featured',
25+
title: 'Featured',
26+
resources: [
27+
{
28+
name: 'Newest Course',
29+
title: 'React Real-Time Messaging with GraphQL using urql and OneGraph',
30+
byline: 'Ian Jones',
31+
image:
32+
'https://d2eip9sf3oo6c2.cloudfront.net/playlists/square_covers/000/409/013/square_280/EGH_RealtimeGraphqL.png',
33+
path:
34+
'playlists/react-real-time-messaging-with-graphql-using-urql-and-onegraph-be5a',
35+
},
36+
{
37+
name: 'Featured Playlist',
38+
title: 'Scale React Development with NX',
39+
byline: 'Juri Strumpflohner',
40+
image:
41+
'https://d2eip9sf3oo6c2.cloudfront.net/playlists/square_covers/000/405/344/full/EGH_ScalingReactNx.png',
42+
path: 'playlists/scale-react-development-with-nx-4038',
43+
},
44+
{
45+
name: 'Level Up',
46+
title: 'Advanced JavaScript Foundations',
47+
byline: 'Tyler Clark',
48+
image:
49+
'https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/353/full/foundation.png',
50+
path: 'courses/advanced-javascript-foundations',
51+
},
52+
],
53+
},
54+
{
55+
id: 'devEssentials',
56+
name: 'Practice Makes Perfect',
57+
title: 'Web Development Essentials',
58+
description: '',
59+
resources: [
60+
{
61+
title: 'Web Security Essentials: MITM, CSRF, and XSS',
62+
byline: 'Mike Sherov・50m・Course',
63+
image:
64+
'https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/413/square_280/EGH_WebSecurity.png',
65+
path: 'courses/web-security-essentials-mitm-csrf-and-xss',
66+
},
67+
{
68+
title: "The Beginner's Guide to React",
69+
byline: 'Kent C. Dodds・2h 27m・Course',
70+
image:
71+
'https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/160/full/EGH_BeginnersReact2.png',
72+
path: 'courses/the-beginner-s-guide-to-react',
73+
},
74+
{
75+
title: 'Fix Common Git Mistakes',
76+
byline: 'Chris Achard・44m・Course',
77+
image:
78+
'https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/401/full/GitMistakes_1000.png',
79+
path: 'courses/fix-common-git-mistakes',
80+
},
81+
{
82+
title: 'GraphQL Query Language',
83+
byline: 'Eve Porcello・30m・Course',
84+
image:
85+
'https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/236/full/EGH_GraphQLQuery_Final.png',
86+
path: 'courses/graphql-query-language',
87+
},
88+
{
89+
title: 'Develop Accessible Web Apps with React',
90+
byline: 'Erin Doyle・1h 28m・Course',
91+
image:
92+
'https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/412/full/AccessibleReact_1000.png',
93+
path: 'courses/develop-accessible-web-apps-with-react',
94+
},
95+
{
96+
title: 'Debug the DOM in Chrome with the Devtools Elements panel',
97+
byline: 'Mykola Bilokonsky・25m・Course',
98+
image:
99+
'https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/060/full/EGH_Chrome_Elements.png',
100+
path: 'courses/using-chrome-developer-tools-elements',
101+
},
102+
],
103+
},
104+
{
105+
id: 'stateManagement',
106+
name: 'Research Panel',
107+
title: 'React State Management in 2020',
108+
description: '',
109+
resources: [
110+
{
111+
title: 'Using Redux in Modern React Apps with Mark Erikson',
112+
byline: 'Mark Erikson & Joel Hooks・90m・Chat',
113+
image:
114+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/386/thumb/redux.png',
115+
path:
116+
'lessons/react-using-redux-in-modern-react-apps-with-mark-erikson?pl=react-state-management-2020-6bec',
117+
},
118+
{
119+
title: 'XState for State Management in React Apps with David Khourshid',
120+
byline: 'David Khourshid & Joel Hooks・55m・Chat',
121+
image:
122+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/001/282/thumb/xstate.png',
123+
path:
124+
'lessons/react-xstate-for-state-management-in-react-apps-with-david-khourshid?pl=react-state-management-2020-6bec',
125+
},
126+
{
127+
title: 'State Management in React with Chance Strickland',
128+
byline: 'Chance Strickland & Joel Hooks・46m・Chat',
129+
image:
130+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/026/thumb/react.png',
131+
path:
132+
'lessons/react-state-management-in-react-with-chance-strickland?pl=react-state-management-2020-6bec',
133+
},
134+
{
135+
title:
136+
'Using Recoil to Manage Orthogonal State in React Apps with David McCabe',
137+
byline: 'David McCabe & Joel Hooks・34m・Chat',
138+
image:
139+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/026/thumb/react.png',
140+
path:
141+
'lessons/react-using-recoil-to-manage-orthogonal-state-in-react-apps-with-david-mccabe?pl=react-state-management-2020-6bec',
142+
},
143+
{
144+
title: 'Managing Complex State in React with Jared Palmer',
145+
byline: 'Jared Palmer & Joel Hooks・1h 28m・Chat',
146+
image:
147+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/026/thumb/react.png',
148+
path:
149+
'lessons/egghead-managing-complex-state-in-react-with-jared-palmer?pl=react-state-management-2020-6bec',
150+
},
151+
],
152+
},
153+
{
154+
id: 'sideProject',
155+
name: 'Weekend Side Project',
156+
title: 'Build a Video Chat App with Twilio and Gatsby',
157+
path: 'courses/build-a-video-chat-app-with-twilio-and-gatsby',
158+
image:
159+
'https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/395/full/TwilioGatsby_Final.png',
160+
byline: 'Jason Lengstorf',
161+
description:
162+
'In this workshop, Jason Lengstorf will take you from an empty project folder all the way through deployment of a Twilio-powered video chat app built on Gatsby.',
163+
},
164+
{
165+
id: 'mdxConf',
166+
name: 'Future of Markdown',
167+
title: 'MDX Conf 2020',
168+
path: 'playlists/mdx-conf-3fc2',
169+
byline: 'Chris Biscardi',
170+
image:
171+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/001/289/full/mdx.png',
172+
description:
173+
'MDX has grown rapidly since the first commit two and a half years ago. Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.',
174+
resources: [
175+
{
176+
title: 'Demystifying MDX',
177+
byline: 'Cole Bremis',
178+
path: 'talks/mdx-demystifying-mdx',
179+
},
180+
{
181+
title: 'MDX v2 Syntax',
182+
byline: 'Laurie Barth',
183+
path: 'talks/egghead-mdx-v2-syntax',
184+
},
185+
{
186+
title: 'MDX and VueJS/NuxtJS',
187+
byline: 'Cole Bremis',
188+
path: 'talks/mdx-mdx-and-vuejs-nuxtjs',
189+
},
190+
{
191+
title: 'Migrating to MDX',
192+
byline: 'Monica Powell',
193+
path: 'talks/mdx-migrating-to-mdx',
194+
},
195+
{
196+
title: 'Personal Site Playground with MDX',
197+
byline: 'Prince Wilson',
198+
path: 'talks/mdx-personal-site-playgrounds-with-mdx',
199+
},
200+
{
201+
title: 'The X in MDX',
202+
byline: 'Rodrigo Pombo',
203+
path: 'talks/mdx-the-x-in-mdx',
204+
},
205+
{
206+
title: 'Digital Gardening with MDX Magic',
207+
byline: 'Kathleen McMahon',
208+
path: 'talks/mdx-digital-gardening-with-mdx-magic',
209+
},
210+
],
211+
},
212+
{
213+
id: 'schedule',
214+
name: 'Schedule',
215+
title: 'Upcoming Events',
216+
resources: [
217+
{
218+
title: 'egghead talk with James Quick and Jason Lengstorf',
219+
byline: 'Dec 2nd @ 12PM PST',
220+
path:
221+
'https://egghead.zoom.us/webinar/register/5416061508899/WN_cvmQMHRzRj6aad9pkBWoFg',
222+
calendar: '',
223+
},
224+
],
225+
},
226+
{
227+
id: 'topics',
228+
name: 'Popular Topics',
229+
resources: [
230+
{
231+
title: 'React',
232+
path: 's/react',
233+
image:
234+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/026/thumb/react.png',
235+
},
236+
{
237+
title: 'JavaScript',
238+
path: 's/javascript',
239+
image:
240+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/205/thumb/javascriptlang.png',
241+
},
242+
{
243+
title: 'Angular',
244+
path: 's/angular',
245+
image:
246+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/300/thumb/angular2.png',
247+
},
248+
{
249+
title: 'Node',
250+
path: 's/node',
251+
image:
252+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/256/thumb/nodejslogo.png',
253+
},
254+
{
255+
title: 'Gatsby',
256+
path: 's/gatsby',
257+
image:
258+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/001/211/thumb/gatsby.png',
259+
},
260+
{
261+
title: 'GraphQL',
262+
path: 's/graphql',
263+
image:
264+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/001/034/thumb/graphqllogo.png',
265+
},
266+
{
267+
title: 'AWS',
268+
path: 's/aws',
269+
image:
270+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/001/090/thumb/aws.png',
271+
},
272+
{
273+
title: 'RxJS',
274+
path: 's/rxjs',
275+
image:
276+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/375/thumb/rxlogo.png',
277+
},
278+
{
279+
title: 'Redux',
280+
path: 's/redux',
281+
image:
282+
'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/386/thumb/redux.png',
283+
},
284+
],
285+
},
286+
{
287+
id: 'swag',
288+
name: 'swag',
289+
title: '',
290+
path: 'https://store.egghead.io',
291+
resources: [
292+
{
293+
title: 'GraphQL Query Language Poster',
294+
path: 'https://store.egghead.io/product/poster-graphql-query-language',
295+
image:
296+
'https://res.cloudinary.com/dg3gyk0gu/image/upload/v1606472163/next.egghead.io/store/poster-graphql-query-language.png',
297+
},
298+
{
299+
title: 'egghead Crewneck',
300+
path: 'https://store.egghead.io/product/egghead-crewneck',
301+
image:
302+
'https://res.cloudinary.com/dg3gyk0gu/image/upload/v1606474619/next.egghead.io/store/egghead-crewneck.png',
303+
},
304+
// {
305+
// title: 'Shirt',
306+
// path: 'https://store.egghead.io/product/egghead-shirt',
307+
// image:
308+
// 'https://res.cloudinary.com/dg3gyk0gu/image/upload/v1606473230/next.egghead.io/store/egghead-shirt.jpg',
309+
// },
310+
// {
311+
// title: 'Beanie',
312+
// path: 'https://store.egghead.io/product/knit-beanie',
313+
// image:
314+
// 'https://res.cloudinary.com/dg3gyk0gu/image/upload/v1606472232/next.egghead.io/store/knit-beanie.jpg',
315+
// },
316+
],
317+
},
318+
]
319+
320+
export default data

0 commit comments

Comments
 (0)