diff --git a/client/client-landing/components/documentation/YoutubeSideBarLinks.tsx b/client/client-landing/components/documentation/YoutubeSideBarLinks.tsx
new file mode 100644
index 00000000..eb7539ab
--- /dev/null
+++ b/client/client-landing/components/documentation/YoutubeSideBarLinks.tsx
@@ -0,0 +1,58 @@
+interface LinkProps {
+ fnc: Function;
+ sources: {
+ href: string;
+ title: string;
+ subTitle: string;
+ content: string;
+ }[];
+ current: string;
+ icon: JSX.Element;
+}
+/* Video Selection Side bar to select the required video to display.
+ This saves space and only required information is displayed.
+ Array of Objects are passed and iterated to create buttons for each object.
+*/
+const YoutubeSideBarLink = ({ fnc, sources, current, icon }: LinkProps) => {
+ return (
+ <>
+
+ ))}
+
+ );
+};
+
+export default YoutubeSideBarLink;
diff --git a/client/client-landing/components/documentation/documentation.tsx b/client/client-landing/components/documentation/documentation.tsx
new file mode 100644
index 00000000..e60b4110
--- /dev/null
+++ b/client/client-landing/components/documentation/documentation.tsx
@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { ArrowIcon } from "../../utils/icons";
+import PdfDisplay from "./pdfDisplay";
+import PdfSideBarLink from "./pdfSideBarLink";
+import YoutubeDisplay from "./youtubeDisplay";
+import YoutubeSideBarLink from "./YoutubeSideBarLinks";
+
+/*
+ pdfSources (array of Objects) to store name and url of the PDF.
+*/
+const Documentation = () => {
+ const pdfSources: {
+ name: string;
+ href: string;
+ }[] = [
+ {
+ name: "Sample PDF",
+ href: "https://drive.google.com/file/d/1kPcD_GpBODXD6pUgfLaqPhEHwpB-lpk3/preview",
+ },
+ {
+ name: "Lab PDF",
+ href: "https://drive.google.com/file/d/1LZzQP5RPTMI4RKzTpnwfA3ufnc60Z2zA/preview",
+ },
+ {
+ name: "Paralinguistic PDF",
+ href: "https://drive.google.com/file/d/1-Ktm3gE9WWDxnT_wvUON1VudSRb6dM8i/preview",
+ },
+ ];
+
+ /*
+ youtubeSources (array of Objects) to store name and url of the Youtube Videos/Local Videos address..
+ */
+ const youtubeSources: {
+ title: string;
+ subTitle: string;
+ content: string;
+ href: string;
+ }[] = [
+ {
+ title: "C++ in 100 Seconds",
+ subTitle: "Fireship",
+ content:
+ "C++ or C-plus-plus or Cpp is an extremely popular object-oriented programming language. Created in 1979, today it powers game engines, databases, compilers, embedded systems, desktop software, and much of our software infrastructure. ",
+ href: "https://www.youtube.com/embed/MNeX4EGtR5Y",
+ },
+ {
+ title: "Firebase in 100 Seconds",
+ subTitle: "Fireship",
+ content:
+ "Firebase is a suite of tools for building apps on top of Google Cloud Platform. It's most famous for its realtime database, but also includes services for user authentication, serverless computing, push messaging, file storage, and more.",
+ href: "https://www.youtube.com/embed/vAoB4VbhRzM",
+ },
+ {
+ title: "GraphQL Explained in 100 Seconds",
+ subTitle: "Fireship",
+ content:
+ "What is GraphQL? Learn how it compares to REST and why developers love this query language for reading and mutating data in APIs",
+ href: "https://www.youtube.com/embed/eIQh02xuVw4",
+ },
+ ];
+
+ const [display, setDisplay] = useState({
+ source: pdfSources[1],
+ type: "PDF",
+ });
+
+ return (
+
+
+ Documentation
+
+
+
+
+
+
+
+ {/* Pdf Navigation Bar */}
+ }
+ sources={pdfSources}
+ current={display.source.href}
+ />
+ {/* Video Navigation Bar */}
+ }
+ fnc={setDisplay}
+ sources={youtubeSources}
+ current={display.source.href}
+ />
+
+
+
+ {/* Content elements which displayes according to the selection in Side Bar */}
+ {display.type === "PDF" ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default Documentation;
diff --git a/client/client-landing/components/documentation/index.tsx b/client/client-landing/components/documentation/index.tsx
new file mode 100644
index 00000000..8cf21c71
--- /dev/null
+++ b/client/client-landing/components/documentation/index.tsx
@@ -0,0 +1 @@
+export { default as Documentation } from "./documentation";
diff --git a/client/client-landing/components/documentation/pdfDisplay.tsx b/client/client-landing/components/documentation/pdfDisplay.tsx
new file mode 100644
index 00000000..c4f25755
--- /dev/null
+++ b/client/client-landing/components/documentation/pdfDisplay.tsx
@@ -0,0 +1,22 @@
+import { LinkProps } from "../../utils/interfaces";
+{
+ /* Function takes the object as parameters and displays the video using Object.href inside an iframe. */
+}
+const PdfDisplay = ({ source }: LinkProps) => {
+ return (
+ <>
+
+
+
+
+
+
+ );
+};
+
+export default PdfDisplay;
diff --git a/client/client-landing/components/documentation/pdfSideBarLink.tsx b/client/client-landing/components/documentation/pdfSideBarLink.tsx
new file mode 100644
index 00000000..faeb0004
--- /dev/null
+++ b/client/client-landing/components/documentation/pdfSideBarLink.tsx
@@ -0,0 +1,55 @@
+interface LinkProps {
+ fnc: Function;
+ sources: {
+ href: string;
+ name: string;
+ }[];
+ current: string;
+ icon: JSX.Element;
+}
+/* The component takes array of Objects in parameters, iterates over it using map function
+ and calls the display function with Object as parameter.
+*/
+const PdfSideBarLink = ({ fnc, sources, current, icon }: LinkProps) => {
+ return (
+ <>
+