diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index 96bebd7e15..c77d74af39 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -62,7 +62,8 @@ const config: Config = {
title: 'Talawa',
logo: {
alt: 'Talawa Logo',
- src: 'img/icons/favicon_palisadoes.ico',
+ src: 'img/icons/logo.png',
+ href: 'https://docs.talawa.io/',
className: 'LogoAnimation',
},
items: [
@@ -79,10 +80,10 @@ const config: Config = {
target: '_self',
},
{
+ to: '/docs',
+ activeBasePath: 'docs',
label: 'Admin Guide',
position: 'left',
- href: '/docs',
- target: '_self',
},
{
label: 'API Guide',
@@ -110,6 +111,62 @@ const config: Config = {
},
],
},
+ footer: {
+ style: 'dark',
+ links: [
+ {
+ title: 'Community',
+ items: [
+ {
+ label: 'Slack',
+ to: 'https://github.com/PalisadoesFoundation',
+ className: 'footer__icon footer__slack',
+ },
+ {
+ label: 'News',
+ to: 'https://www.palisadoes.org/news/',
+ className: 'footer__icon footer__news',
+ },
+ {
+ label: 'Contact Us',
+ to: 'https://www.palisadoes.org/contact/',
+ className: 'footer__icon footer__contact',
+ },
+ ],
+ },
+ {
+ title: 'Social Media',
+ items: [
+ {
+ label: ' Twitter',
+ to: 'https://twitter.com/palisadoesorg?lang=en',
+ className: 'footer__icon footer__twitter',
+ },
+ {
+ label: ' Facebook',
+ to: 'https://www.facebook.com/palisadoesproject/',
+ className: 'footer__icon footer__facebook',
+ },
+ {
+ label: ' Instagram',
+ to: 'https://www.instagram.com/palisadoes/?hl=en',
+ className: 'footer__icon footer__instagram',
+ },
+ ],
+ },
+ {
+ title: 'Development',
+ items: [
+ {
+ label: ' GitHub',
+ to: 'https://github.com/PalisadoesFoundation',
+ className: 'footer__icon footer__github',
+ },
+ ],
+ },
+ ],
+ copyright: `Copyright © ${new Date().getFullYear()} The Palisadoes Foundation, LLC. Built with Docusaurus.`,
+ },
colorMode: {
defaultMode: 'light',
disableSwitch: false,
diff --git a/docs/src/components/layout/HeaderHero.tsx b/docs/src/components/layout/HeaderHero.tsx
new file mode 100644
index 0000000000..49ab35f73f
--- /dev/null
+++ b/docs/src/components/layout/HeaderHero.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import HomeCallToAction from '../../utils/HomeCallToAction';
+
+function HeaderHero() {
+ return (
+
+
+ Talawa
+
+
+ Admin Docs
+
+
+ Web based administrative dashboard for the Talawa mobile app
+
+
+
+
+
+ );
+}
+
+export default HeaderHero;
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 294a9c7c63..8eedcdf939 100644
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -63,11 +63,9 @@
--next-prev-border-color: #e5e7eb;
--ifm-color-emphasis-100: #f4f8fb;
--ifm-color-emphasis-0: #fff;
- --ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
- Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica,
- Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
- --ifm-font-family-monospace: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco,
- Consolas, 'Liberation Mono', 'Courier New', monospace;
+ --ifm-font-family-base: 'Optimistic Display', system-ui, -apple-system,
+ sans-serif;
+ --ifm-font-size-base: 17px;
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -188,13 +186,6 @@ h1 {
.menu__link--sublist {
text-transform: uppercase;
}
-
-.navbar__brand img {
- max-height: 50px;
- width: auto;
- padding: 5px;
-}
-
.menu {
background-color: var(--sidebar-bg-color);
}
@@ -204,6 +195,7 @@ h1 {
line-height: 1.5;
font-size: 0.7rem;
padding-bottom: 0;
+ padding-left: 0;
font-weight: 800;
background: transparent !important;
}
@@ -220,12 +212,6 @@ h1 {
padding: 0.5rem 0;
}
-/* new */
-/* .menu__list ul {
- margin-left: 5px;
- margin-right: 15px;
-} */
-
/* Target specifically the link text */
.menu__link {
white-space: normal !important;
@@ -233,7 +219,6 @@ h1 {
overflow-wrap: break-word !important;
width: 100% !important;
max-width: 100% !important;
- line-height: 1.2 !important;
padding-right: 1rem !important;
}
@@ -301,7 +286,7 @@ h1 {
}
.navbar__item {
- font-size: 0.99rem;
+ font-size: 0.875rem;
font-weight: 600;
}
@@ -586,10 +571,6 @@ html[data-theme='dark'] .header-youtube-link:before {
.container > div > div:first-child {
padding: 1rem !important;
}
-
- .breadcrumbs__link {
- padding: 0.25rem;
- }
}
@media (min-width: 997px) and (max-width: 1327px) {
@@ -599,16 +580,6 @@ html[data-theme='dark'] .header-youtube-link:before {
}
}
-.Section {
- margin-bottom: 0 !important;
-}
-
-.Heading {
- font-size: 1.5rem;
- font-weight: 700;
- text-align: left !important;
-}
-
h1,
h2,
h3,
@@ -620,8 +591,7 @@ h6 {
}
p,
-textarea,
-.Heading div {
+textarea {
margin-bottom: 1.25rem;
color: var(--primary-neutral-800);
font-size: 0.9375rem;
@@ -641,7 +611,7 @@ a:hover {
.custom-image {
width: 140%;
padding: 10px;
- opacity: 2;
+ opacity: 1;
}
.my-svg-icon path {
@@ -650,100 +620,211 @@ a:hover {
/* Hide external link svg on Navbar */
-.iconExternalLink_nPIU {
- display: none !important;
+.navbar__item > svg,
+.navbar-sidebar svg {
+ position: absolute;
+ width: 0;
+ height: 0;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ overflow: hidden;
}
-.card__container {
+/* Homepage */
+.homepage {
+ width: 100%;
+ max-width: 100%;
+}
+
+/* Header Hero */
+.HeaderHero {
+ height: clamp(500px, 70vh, 800px);
+ padding-top: 20px;
display: flex;
- align-items: center;
flex-direction: column;
- margin: auto;
- gap: 2rem;
+ text-align: center;
+ align-items: center;
+ margin-top: clamp(2rem, 15vh, 8rem);
}
-.card__description {
- font-size: 0.8rem;
- margin: 0;
- padding-bottom: 1rem;
+.HeaderHero .title {
+ font-size: 3rem;
+ line-height: 1;
+ margin-bottom: 0 !important;
+ font-weight: 500;
+ left: -250px;
+ opacity: 1;
}
-.card__general {
- align-items: center;
- background-color: var(--ifm-color-emphasis-100);
- border-radius: 15px;
- box-shadow: var(--ifm-navbar-shadow);
- justify-content: center;
- padding: 1rem;
+.HeaderHero .tagline {
+ font-size: 1.5rem;
+ line-height: 1.3;
+ font-weight: 500;
+ margin-top: -7px;
+ opacity: 1;
+ left: -250px;
+}
+
+.HeaderHero .description {
+ font-size: 1.2rem;
+ line-height: 1.3;
+ color: var(--primary-neutral-800);
+ opacity: 1;
text-align: center;
}
-.card__general p {
- padding-left: 1rem;
+.HeaderHero .buttons {
+ margin-top: 40px;
}
-.card__wide {
- display: flex;
- gap: calc(2rem + 2px);
- padding: 1.5rem 0;
- margin: auto;
+/* Action Button */
+.ActionButton {
+ padding: 0.75rem 1.25rem;
+ text-align: center;
+ font-size: 1.2rem;
+ font-weight: var(--ifm-button-font-weight);
+ text-decoration: none !important;
+ border-bottom: none;
+ transition: all 0.2s ease-out;
+ border-radius: 0.375rem;
+ margin-right: 10px;
+}
+
+.ActionButton.primary {
+ color: var(--base-neutral-0);
+ background-color: var(--ifm-button-background-color);
+ border: var(--ifm-button-border-width) solid var(--ifm-button-border-color);
+ white-space: nowrap;
}
-.card__wide ul {
- list-style: none;
- padding: 0;
- margin: 0;
+.ActionButton.primary:hover {
+ background-color: #1cbb99;
}
-.card__wide ul > li {
- margin: 10px 0;
- position: relative;
- text-align: left;
- padding-left: 25px;
-}
-
-.card__wide ul > li::before {
- content: '✦';
- font-size: 1 rem;
- background: linear-gradient(45deg, #97aaff, #8dbaff, #004c8c, #00bfff);
- background-size: 400% 400%;
- color: transparent;
- -webkit-background-clip: text;
- background-clip: text;
- animation: moveGradient 5s ease infinite;
- position: absolute;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
+.ActionButton.secondary {
+ color: #1c1e21;
+ background-color: #ebedf0;
+}
+
+.ActionButton.secondary:hover {
+ background-color: #c7c7c7;
}
-@keyframes moveGradient {
- 0% {
- background-position: 0% 50%;
+.ActionButton.secondary::after {
+ content: '›';
+ font-size: 24px;
+ margin-left: 5px;
+}
+
+/* Section */
+.Section {
+ width: 100%;
+ padding: 50px 1.25rem 0;
+ overflow-x: hidden;
+ margin-bottom: 5rem;
+}
+
+.Section.tint {
+ background-color: var(--ifm-hover-overlay);
+}
+
+.Section.dark {
+ background-color: var(--dark);
+}
+/* Small Screens */
+@media only screen and (max-width: 480px) {
+ .ActionButton {
+ max-width: 100%;
+ width: 100%;
+ display: block;
+ white-space: nowrap;
+ }
+ .ActionButton.secondary {
+ margin-top: 1rem;
+ margin-left: auto;
+ }
+ .custom-image {
+ width: 80%;
+ padding-top: 60px;
}
+}
+
+/* Small to Medium Screens */
+@media only screen and (max-width: 768px) {
+ .container > div > div:first-child {
+ padding: 1rem !important;
+ }
+ .center {
+ text-align: center;
+ }
+ .HeaderHero .title {
+ font-size: 60px;
+ }
+ .HeaderHero .tagline {
+ font-size: 30px;
+ }
+}
- 50% {
- background-position: 100% 50%;
+/* Medium Screens */
+@media (min-width: 481px) and (max-width: 960px) {
+ .ActionButton {
+ max-width: 100%;
+ width: 100%;
+ display: block;
+ white-space: nowrap;
}
+ .ActionButton.secondary {
+ margin-top: 1rem;
+ }
+ .HeaderHero .ActionButton {
+ margin: auto;
+ margin-top: 1rem;
+ }
+ .HeaderHero {
+ margin-top: 2rem;
+ }
+ .Section {
+ margin-bottom: 2rem;
+ padding-top: 1rem;
+ }
+}
- 100% {
- background-position: 0% 50%;
+/* Medium to Large Screens */
+@media (min-width: 997px) and (max-width: 1327px) {
+ .container > div > div:first-child {
+ padding-left: 4rem !important;
+ padding-right: 4rem !important;
}
}
-@media (max-width: 996px) {
- .fourth-panel > .card__wide {
- height: auto;
+/* Large Screens */
+@media (min-width: 1200px) {
+ .HeaderHero {
+ height: 500px;
+ overflow: hidden;
}
}
-@media only screen and (max-width: 960px) {
- .card__container,
- .card__wide {
- margin: 0 2rem !important;
+/* Responsive Navbar & Buttons */
+@media (max-width: 1149px) {
+ .navbar__items--right > .navbar__item:not(:first-of-type) {
+ margin-left: 0.25rem;
+ }
+ .github-button,
+ .youtube-button {
+ margin-right: 0.5rem;
}
+}
- .card__description {
- padding-bottom: 1rem;
+@media (max-width: 996px) {
+ .navbar__item.github-button,
+ .navbar__item.youtube-button {
+ display: none;
+ }
+ .center {
+ text-align: center;
}
}
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 26842c287f..0ddfe6d4d0 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -1,17 +1,24 @@
-import Layout from '@theme/Layout';
+import React from 'react';
import Head from '@docusaurus/Head';
+import Layout from '@theme/Layout';
+import HeaderHero from '../components/layout/HeaderHero';
-export default function Home(): JSX.Element {
+const Index = () => {
const pageTitle = 'Talawa-Docs: Powered by The Palisadoes';
return (
-
+ {pageTitle}
+
+
+
);
-}
+};
+
+export default Index;
diff --git a/docs/src/utils/ActionButton.tsx b/docs/src/utils/ActionButton.tsx
new file mode 100644
index 0000000000..33a955b24c
--- /dev/null
+++ b/docs/src/utils/ActionButton.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface ActionButtonProps {
+ href: string;
+ type?: 'primary' | 'secondary';
+ target?: string;
+ children: React.ReactNode;
+ buttonClassName?: string;
+ ariaLabel: string;
+}
+
+function ActionButton({
+ href,
+ type = 'primary',
+ target,
+ children,
+ buttonClassName,
+ ariaLabel,
+}: ActionButtonProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export default ActionButton;
diff --git a/docs/src/utils/HomeCallToAction.tsx b/docs/src/utils/HomeCallToAction.tsx
new file mode 100644
index 0000000000..3f4301b064
--- /dev/null
+++ b/docs/src/utils/HomeCallToAction.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import ActionButton from './ActionButton';
+
+const HomeCallToAction = () => {
+ return (
+ <>
+
+ Learn More
+
+
+ GitHub
+
+
+ );
+};
+
+export default HomeCallToAction;
diff --git a/docs/static/img/icons/logo.png b/docs/static/img/icons/logo.png
new file mode 100644
index 0000000000..62ab0a91c3
Binary files /dev/null and b/docs/static/img/icons/logo.png differ