diff --git a/components/dimmed-more.tsx b/components/dimmed-more.tsx
new file mode 100644
index 000000000..5296b016e
--- /dev/null
+++ b/components/dimmed-more.tsx
@@ -0,0 +1,45 @@
+import { Box, Link, Text } from '@chakra-ui/react';
+
+type DimmedMoreProps = {
+ text: string;
+};
+
+export function DimmedMore(props: DimmedMoreProps) {
+ const { text } = props;
+
+ return (
+
+
+
+
+ {text}
+ →
+
+
+ );
+}
diff --git a/pages/guides/components/guide-list-item.tsx b/pages/guides/components/guide-list-item.tsx
new file mode 100644
index 000000000..4c6e171e5
--- /dev/null
+++ b/pages/guides/components/guide-list-item.tsx
@@ -0,0 +1,38 @@
+import { Badge, Flex, Link, Text } from '@chakra-ui/react';
+
+type GuideListItemProps = {
+ title: string;
+ date: string;
+ isPro?: boolean;
+};
+
+export function GuideListItem(props: GuideListItemProps) {
+ const { title, date, isPro = false } = props;
+
+ return (
+
+
+
+ {title}
+ {isPro && Pro}
+
+ {date}
+
+ );
+}
diff --git a/pages/guides/index.tsx b/pages/guides/index.tsx
new file mode 100644
index 000000000..f6ad8765c
--- /dev/null
+++ b/pages/guides/index.tsx
@@ -0,0 +1,5 @@
+export default function Guides() {
+ return (
+
Hello world
+ );
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index 7fec12719..e056b928d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -19,6 +19,9 @@ import { Header } from '../components/header';
import { Footer } from '../components/footer';
import { UpdatesBanner } from '../components/updates-banner';
import { OpensourceBanner } from '../components/opensource-banner';
+import { GuideListItem } from './guides/components/guide-list-item';
+import { DimmedMore } from '../components/dimmed-more';
+import { VideoListItem } from './watch/components/video-list-item';
export default function Home() {
return (
@@ -89,208 +92,24 @@ export default function Home() {
Visual Guides
-
-
-
- Session based Authentication
-
- June 12, 2021
-
-
-
-
- JSON Web Tokens
-
- June 05, 2021
-
-
-
-
- Token Based Authentication
- Pro
-
- May 15, 2021
-
-
-
-
- Encodings
- March 06, 2021
-
-
-
-
- SSL vs TLS vs HTTPs vs SSH
-
- February 15, 2021
-
-
-
-
- Integration and
- Deployment
- February 15, 2021
-
-
-
-
- Authentication
- February 15, 2021
-
-
-
-
- Character Encodings
- Pro
-
- February 01, 2021
-
-
-
-
- DHCP in One Picture
-
- February 01, 2021
-
-
-
-
- Session Based Authentication
-
- February 01, 2021
-
-
-
-
-
-
- View all guides
- →
-
-
-
+ }
+ spacing={0}
+ align='stretch'
+ >
+
+
+
+
+
+
+
+
+
+
+
+
@@ -301,268 +120,22 @@ export default function Home() {
}
spacing={0}
align='stretch'
>
-
-
-
- Scaling the Unscalable — System Design 101
-
- 15 minutes
-
-
-
-
- Tranpsort Protocols: TCP vs UDP
-
- 15 minutes
-
-
-
-
- OSI Model Explained
-
- 15 minutes
-
-
-
-
- Creating a React App
- Pro
-
- 15 minutes
-
-
-
-
- DOM vs Shadow DOM vs Virtual DOM
-
- 15 minutes
-
-
-
-
- Everything you need to know about HTTP caching
-
- 15 minutes
-
-
-
-
- Content Delivery Networks
-
- 15 minutes
-
-
-
-
- Load Balancers in Depth
-
- 15 minutes
-
-
-
-
- DNS and How does it Work?
-
- 15 minutes
-
-
-
-
- JavaScript Fetch API
-
- 15 minutes
-
-
-
-
-
-
- View all Videos
- →
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/watch/components/video-list-item.tsx b/pages/watch/components/video-list-item.tsx
new file mode 100644
index 000000000..47a305366
--- /dev/null
+++ b/pages/watch/components/video-list-item.tsx
@@ -0,0 +1,38 @@
+import { Badge, Flex, Link, Text } from '@chakra-ui/react';
+import { VideoIcon } from '../../../icons/video-icon';
+
+type VideoListItemProps = {
+ title: string;
+ duration: string;
+ isPro?: boolean;
+};
+
+export function VideoListItem(props: VideoListItemProps) {
+ const { title, duration, isPro = false } = props;
+
+ return (
+
+
+
+ {title}
+ {isPro && Pro}
+
+ {duration}
+
+ );
+}
diff --git a/pages/watch/index.tsx b/pages/watch/index.tsx
new file mode 100644
index 000000000..d77a00e95
--- /dev/null
+++ b/pages/watch/index.tsx
@@ -0,0 +1,5 @@
+export default function Watch() {
+ return (
+ Hello world
+ );
+}