diff --git a/build.sh b/build.sh
new file mode 100755
index 0000000..8b00a2c
--- /dev/null
+++ b/build.sh
@@ -0,0 +1,38 @@
+echo "Starting build..."
+
+# TODO: Check if current version is latest to avoid redundant installation
+
+# checks os and architecture for correct release
+# https://stackoverflow.com/a/8597411 
+echo "Installing & building tailwind..."
+ASSET="tailwindcss"
+
+if [[ "$OSTYPE" == "linux-gnu"* ]]; then
+    ASSET="$ASSET-linux"
+elif [[ "$OSTYPE" == "darwin"* ]]; then
+    ASSET="$ASSET-macos"
+fi
+if [[ "$(uname -m)" == "x86_64"* ]]; then
+    ASSET="$ASSET-x64"
+elif [[ "$(uname -m)" == "arm64"* ]]; then
+    ASSET="$ASSET-arm64"
+fi
+
+curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/latest/download/${ASSET}"
+chmod +x $ASSET
+mv $ASSET tailwindcss
+
+
+# initialized and configures tailwind if not configured
+echo "Initializing tailwind..."
+if [[ ! -f "tailwind.config.js" ]]
+then
+    ./tailwindcss init
+    sed -i '' "s|  content: \\[\\],|  content: \\['./templates/**/*.html'\\],|g" tailwind.config.js
+fi
+
+# compiles tailwind css for prod & builds project
+echo "Compiling tailwindcss and building zola project..."
+rm -rf public static/css
+./tailwindcss -i css/index.css -o ./static/css/index.css --minify
+zola build
diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..7935df8
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,131 @@
+# The URL the site will be built for
+base_url = "http://localhost:8089/"
+# Change this to your own URL! Please note this variable **must** be uncommented.
+
+title = "A Template Website"
+description="Accessible and affordable for all"
+
+# When set to "true", a feed is automatically generated.
+# generate_feed = true
+
+# The filename to use for the feed. Used as the template filename, too.
+# Defaults to "atom.xml", which has a built-in template that renders an Atom 1.0 feed.
+# There is also a built-in template "rss.xml" that renders an RSS 2.0 feed.
+# feed_filename = "index.xml"
+
+# The number of articles to include in the feed. All items are included if
+# this limit is not set (the default).
+# feed_limit = 10
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = false
+
+# When set to "true", the generated HTML files are minified.
+# minify_html = true
+# I'm keeping off for now -- buggy -- 2021-02-05 (@keats says it'll be fixed 0.14.0)
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+highlight_theme = "visual-studio-dark"
+
+# When set to "true", emoji aliases translated to their corresponding
+# Unicode emoji equivalent in the rendered Markdown files. (e.g.: :smile: => 😄)
+render_emoji = false
+
+[slugify]
+paths = "on"
+
+# Whether external links are to be opened in a new tab
+# If this is true, a `rel="noopener"` will always automatically be added for security reasons
+external_links_target_blank = true
+
+# Whether to set rel="nofollow" for all external links
+external_links_no_follow = true
+
+# Whether to set rel="noreferrer" for all external links
+external_links_no_referrer = true
+
+# Whether smart punctuation is enabled (changing quotes, dashes, dots in their typographic form)
+# For example, `...` into `…`, `"quote"` into `“curly”` etc
+smart_punctuation = true
+
+[[taxonomies]]
+name = "categories"
+feed = true
+paginate_by = 2
+paginate_path = "blog-posts"
+
+[[taxonomies]]
+name = "items"
+feed = true
+paginate_by = 2
+paginate_path = "product-posts"
+
+[[taxonomies]]
+name = "roles"
+feed = true
+paginate_by = 2
+paginate_path = "blog-posts"
+
+[[taxonomies]]
+name = "tags"
+feed = true
+paginate_by = 2
+paginate_path = "blog-posts"
+
+[[taxonomies]]
+name = "news-category"
+feed = true
+paginate_by = 6
+paginate_path = "news-card"
+
+[[taxonomies]]
+name = "people"
+feed = true
+paginate_by = 9
+paginate_path = "people"
+
+[[taxonomies]]
+name = "memberships"
+feed = true
+paginate_by = 8
+paginate_path = "people/memberships"
+
+[extra]
+header_class = "customize"
+footer_class = "customize"
+
+[extra.taxonomies."roles"]
+	[extra.taxonomies."roles".Create]
+	icon_path = "images/icons/paint-brush-art-svgrepo-com.svg"
+    banner_path = "images/marius-masalar-unsplash.jpg"
+    title = "Create OurWorld"
+    description = "Become a part of a team of creators looking to shape our digital world"
+
+    [extra.taxonomies."roles".Develop]
+	icon_path = "images/icons/code-svgrepo-com.svg"
+    banner_path = "images/marius-masalar-unsplash.jpg"
+    title = "Develop OurWorld"
+    description = "Become a part of a team of developers building our digital world"
+
+    [extra.taxonomies."roles".Inspire]
+	icon_path = "images/icons/bar-svgrepo-com.svg"
+    banner_path = "images/marius-masalar-unsplash.jpg"
+    title = "Share OurWorld"
+    description = "Create communities and involve people in ourworld"
+
+    [extra.taxonomies."roles".Organize]
+	icon_path = "images/icons/form-svgrepo-com.svg"
+    banner_path = "images/marius-masalar-unsplash.jpg"
+    title = "Run OurWorld"
+    description = "Become a part of the organizational team at ourworld"
+
+
+
+
+
diff --git a/content/buildondunia/index.md b/content/buildondunia/index.md
index 0da4042..221e9af 100644
--- a/content/buildondunia/index.md
+++ b/content/buildondunia/index.md
@@ -6,8 +6,6 @@ updated: 2021-02-20
 draft: false
 sort_by: weight
 weight: 1
-extra:
-    logo_path: images/logo.svg
 ---
 
 {% row(style="center" padding="top"bgPath="img/build_background_2.png" bgStyle="short") %}
diff --git a/content/css/admonition.css b/content/css/admonition.css
new file mode 100644
index 0000000..de7d76e
--- /dev/null
+++ b/content/css/admonition.css
@@ -0,0 +1,361 @@
+:root {
+  --md-admonition-icon--note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");
+  --md-admonition-icon--abstract: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>");
+  --md-admonition-icon--info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>");
+  --md-admonition-icon--tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>");
+  --md-admonition-icon--success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>");
+  --md-admonition-icon--question: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>");
+  --md-admonition-icon--warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z'/></svg>");
+  --md-admonition-icon--failure: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z'/></svg>");
+  --md-admonition-icon--danger: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 15H6l7-14v8h5l-7 14v-8z'/></svg>");
+  --md-admonition-icon--bug: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z'/></svg>");
+  --md-admonition-icon--example: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z'/></svg>");
+  --md-admonition-icon--quote: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z'/></svg>");
+  --md-details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
+}
+
+:is(.admonition) {
+  display: flow-root;
+  margin: 1.5625em 0;
+  padding: 0 1.2rem;
+  color: var(--fg);
+  page-break-inside: avoid;
+  background-color: var(--bg);
+  border: 0 solid black;
+  border-inline-start-width: 0.4rem;
+  border-radius: 0.2rem;
+  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05), 0 0 0.1rem rgba(0, 0, 0, 0.1);
+}
+
+.admonition p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  font-size: 0.8rem;
+}
+
+@media print {
+  :is(.admonition) {
+    box-shadow: none;
+  }
+}
+:is(.admonition) > * {
+  box-sizing: border-box;
+}
+:is(.admonition) :is(.admonition) {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+:is(.admonition) > .tabbed-set:only-child {
+  margin-top: 0;
+}
+html :is(.admonition) > :last-child {
+  margin-bottom: 1.2rem;
+}
+
+:is(.admonition-title, summary) {
+  position: relative;
+  margin-block: 0;
+  margin-inline: -1.6rem -1.2rem;
+  padding-block: 0.8rem;
+  padding-inline: 4rem 1.2rem;
+  font-weight: 700;
+  background-color: rgba(68, 138, 255, 0.1);
+  border: 0 solid #448aff;
+  border-inline-start-width: 0.4rem;
+  border-start-start-radius: 0.2rem;
+  display: flex;
+}
+:is(.admonition-title, summary) > p {
+  margin: 0;
+}
+html :is(.admonition-title, summary):last-child {
+  margin-bottom: 0;
+}
+:is(.admonition-title, summary)::before {
+  position: absolute;
+  top: 0.625em;
+  inset-inline-start: 1.2rem;
+  width: 1.4rem;
+  height: 1.4rem;
+  background-color: #448aff;
+  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  content: "";
+}
+
+:is(.admonition):is(.note) {
+  border-color: #448aff;
+}
+
+:is(.note) > :is(.admonition-title, summary) {
+  background-color: rgba(68, 138, 255, 0.1);
+  border-color: #448aff;
+}
+:is(.note) > :is(.admonition-title, summary)::before {
+  background-color: #448aff;
+  mask-image: var(--md-admonition-icon--note);
+  -webkit-mask-image: var(--md-admonition-icon--note);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.abstract, .summary, .tldr) {
+  border-color: #00b0ff;
+}
+
+:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 176, 255, 0.1);
+  border-color: #00b0ff;
+}
+:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary)::before {
+  background-color: #00b0ff;
+  mask-image: var(--md-admonition-icon--abstract);
+  -webkit-mask-image: var(--md-admonition-icon--abstract);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.info, .todo) {
+  border-color: #00b8d4;
+}
+
+:is(.info, .todo) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 184, 212, 0.1);
+  border-color: #00b8d4;
+}
+:is(.info, .todo) > :is(.admonition-title, summary)::before {
+  background-color: #00b8d4;
+  mask-image: var(--md-admonition-icon--info);
+  -webkit-mask-image: var(--md-admonition-icon--info);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.tip, .hint, .important) {
+  border-color: #00bfa5;
+}
+
+:is(.tip, .hint, .important) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 191, 165, 0.1);
+  border-color: #00bfa5;
+}
+:is(.tip, .hint, .important) > :is(.admonition-title, summary)::before {
+  background-color: #00bfa5;
+  mask-image: var(--md-admonition-icon--tip);
+  -webkit-mask-image: var(--md-admonition-icon--tip);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.success, .check, .done) {
+  border-color: #00c853;
+}
+
+:is(.success, .check, .done) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 200, 83, 0.1);
+  border-color: #00c853;
+}
+:is(.success, .check, .done) > :is(.admonition-title, summary)::before {
+  background-color: #00c853;
+  mask-image: var(--md-admonition-icon--success);
+  -webkit-mask-image: var(--md-admonition-icon--success);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.question, .help, .faq) {
+  border-color: #64dd17;
+}
+
+:is(.question, .help, .faq) > :is(.admonition-title, summary) {
+  background-color: rgba(100, 221, 23, 0.1);
+  border-color: #64dd17;
+}
+:is(.question, .help, .faq) > :is(.admonition-title, summary)::before {
+  background-color: #64dd17;
+  mask-image: var(--md-admonition-icon--question);
+  -webkit-mask-image: var(--md-admonition-icon--question);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.warning, .caution, .attention) {
+  border-color: #ff9100;
+}
+
+:is(.warning, .caution, .attention) > :is(.admonition-title, summary) {
+  background-color: rgba(255, 145, 0, 0.1);
+  border-color: #ff9100;
+}
+:is(.warning, .caution, .attention) > :is(.admonition-title, summary)::before {
+  background-color: #ff9100;
+  mask-image: var(--md-admonition-icon--warning);
+  -webkit-mask-image: var(--md-admonition-icon--warning);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.failure, .fail, .missing) {
+  border-color: #ff5252;
+}
+
+:is(.failure, .fail, .missing) > :is(.admonition-title, summary) {
+  background-color: rgba(255, 82, 82, 0.1);
+  border-color: #ff5252;
+}
+:is(.failure, .fail, .missing) > :is(.admonition-title, summary)::before {
+  background-color: #ff5252;
+  mask-image: var(--md-admonition-icon--failure);
+  -webkit-mask-image: var(--md-admonition-icon--failure);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.danger, .error) {
+  border-color: #ff1744;
+}
+
+:is(.danger, .error) > :is(.admonition-title, summary) {
+  background-color: rgba(255, 23, 68, 0.1);
+  border-color: #ff1744;
+}
+:is(.danger, .error) > :is(.admonition-title, summary)::before {
+  background-color: #ff1744;
+  mask-image: var(--md-admonition-icon--danger);
+  -webkit-mask-image: var(--md-admonition-icon--danger);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.bug) {
+  border-color: #f50057;
+}
+
+:is(.bug) > :is(.admonition-title, summary) {
+  background-color: rgba(245, 0, 87, 0.1);
+  border-color: #f50057;
+}
+:is(.bug) > :is(.admonition-title, summary)::before {
+  background-color: #f50057;
+  mask-image: var(--md-admonition-icon--bug);
+  -webkit-mask-image: var(--md-admonition-icon--bug);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.example) {
+  border-color: #7c4dff;
+}
+
+:is(.example) > :is(.admonition-title, summary) {
+  background-color: rgba(124, 77, 255, 0.1);
+  border-color: #7c4dff;
+}
+:is(.example) > :is(.admonition-title, summary)::before {
+  background-color: #7c4dff;
+  mask-image: var(--md-admonition-icon--example);
+  -webkit-mask-image: var(--md-admonition-icon--example);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.quote, .cite) {
+  border-color: #9e9e9e;
+}
+
+:is(.quote, .cite) > :is(.admonition-title, summary) {
+  background-color: rgba(158, 158, 158, 0.1);
+  border-color: #9e9e9e;
+}
+:is(.quote, .cite) > :is(.admonition-title, summary)::before {
+  background-color: #9e9e9e;
+  mask-image: var(--md-admonition-icon--quote);
+  -webkit-mask-image: var(--md-admonition-icon--quote);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+.navy :is(.admonition) {
+  background-color: var(--sidebar-bg);
+}
+
+.ayu :is(.admonition),
+.coal :is(.admonition) {
+  background-color: var(--theme-hover);
+}
+
+.rust :is(.admonition) {
+  background-color: var(--sidebar-bg);
+  color: var(--sidebar-fg);
+}
+
+:is(.admonition-title) {
+  font-feature-settings: "kern", "liga";
+  font-weight: 600;
+  font-size: 0.84rem;
+  border: none;
+  padding: 10px 50px;
+}
+
+:is(summary)::after {
+  position: absolute;
+  top: 0.625em;
+  width: 1.4rem;
+  height: 1.4rem;
+  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  content: "";
+}
+
+:is(summary)::after {
+  background-color: black;
+  mask-image: var(--md-details-icon);
+  -webkit-mask-image: var(--md-details-icon);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  position: absolute;
+  transform: rotate(-90deg);
+  transition: transform 0.25s;
+  right: 0.4rem;
+}
+
+details[open] > summary::after {
+  transform: rotate(0deg);
+}
diff --git a/content/css/code.css b/content/css/code.css
new file mode 100644
index 0000000..7d95a8e
--- /dev/null
+++ b/content/css/code.css
@@ -0,0 +1,90 @@
+code.language-html,
+code.language-css,
+code.language-md,
+code.language-cmd,
+code.language-bash,
+code.language-text,
+code.language-js,
+span.o,
+span.nx {
+  color: rgb(255, 255, 255);
+  line-height: 1.4;
+}
+span.c {
+  color: hsl(120, 100%, 20%);
+}
+
+span.p,
+span.s1,
+span.s2,
+span.nt {
+  color: hsl(40, 100%, 30%);
+}
+
+span.gs,
+span.gh,
+span.ge {
+  color: hsl(208, 100%, 50%);
+}
+
+span.gs {
+  font-weight: bold;
+}
+
+span.ge {
+  font-style: italic;
+}
+
+pre,
+code {
+  @apply font-mono;
+}
+
+code {
+  background-color: hsl(0, 0%, 98%);
+  border-radius: 3px;
+  color: hsl(120, 100%, 20%);
+  font-size: 85%;
+}
+
+pre {
+  margin: 0;
+  margin: 0;
+  padding: 1rem;
+  overflow: scroll;
+}
+
+pre code {
+  background-color: transparent;
+  color: inherit;
+  font-size: 100%;
+  padding: 0;
+}
+
+.highlight {
+  background-color: transparent;
+  border-radius: 3px;
+  margin: 0 0 0.5rem;
+  padding: 0;
+
+  & pre {
+    margin-bottom: 0;
+    overflow-x: auto;
+  }
+
+  & .lineno {
+    color: hsla(0, 0%, 67%, 0.72);
+    display: inline-block; /* Ensures the null space also isn't selectable */
+    padding: 0 0.75rem 0 0.25rem;
+    /* Make sure numbers aren't selectable */
+  }
+}
+
+/* TODO: dark theme for future
+@media (prefers-color-scheme: dark) {
+  code {
+    color: #fff;
+    background: hsl(200, 63%, 15%);
+  }
+}
+*/
diff --git a/content/css/index.css b/content/css/index.css
new file mode 100644
index 0000000..1819793
--- /dev/null
+++ b/content/css/index.css
@@ -0,0 +1,406 @@
+/*! purgecss start ignore */
+@import "code.css";
+/*! purgecss end ignore */
+
+@import "tailwindcss/base";
+@import "layout.css";
+@import "tailwindcss/components";
+@import "admonition.css";
+@import "tailwindcss/utilities";
+
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap');
+/* Custom CSS for header partial */
+.backdrop-blur {
+  -webkit-backdrop-filter: blur(40px);
+}
+
+* {
+  font-family: 'Lato', sans-serif;
+}
+
+.bg-semi-white {
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
+/* Custom css allowing image styling in markdown */
+
+
+img[src*="#mx-auto"] {
+  margin: auto;
+}
+
+img[src*="#small"] {
+  width: 68px;
+}
+
+img[src*="#sm"] {
+  width: 200px;
+}
+
+img[src*="#md"] {
+    width: 300px;
+}
+
+img[src*="#medium"] {
+    width: 500px;
+}
+
+img[src*="#logo"] {
+  max-width: min(250px, 100%);
+  margin: auto;
+}
+
+img[src*="#large"] {
+  width: min(60vw, 100vh);
+  margin: auto;
+}
+
+img[src*="#fill"] {
+  width: 100%;
+  height: 100%;
+}
+
+img[src*="#tft_img"] {
+  width: 150px;
+  margin: 8px;
+}
+
+img[src*="#icon"] {
+  width: 65px;
+  margin: 4px;
+}
+
+img[src*="#fig"] {
+  width: 150px;
+}
+
+.logo_size {
+  width: 200px;
+}
+
+.advance{
+
+  font-family: "lato";
+}
+
+@layer components {
+  h1 {
+    @apply text-3xl lg:text-5xl xl:text-7xl font-bold leading-4 my-4;
+    font-family: "lato", sans-serif;
+    line-height: 0.9;
+    
+  }
+  h1 strong {
+    @apply font-medium;
+  }
+  h2 {
+    @apply text-3xl md:text-4xl lg:text-6xl font-bold leading-4 my-4;
+    font-family: "lato", sans-serif;
+    line-height: 0.9;
+    
+    
+  }
+  h2 strong {
+    @apply font-medium;
+  }
+  h3 {
+    @apply text-xl lg:text-3xl font-normal my-4;
+    color:#oab7a9;
+  }
+  h3 strong {
+    @apply font-medium;
+  }
+  h4 {
+    @apply text-xl lg:text-2xl font-normal my-4;
+    color:#oab7a9;
+  }
+  h5 {
+    @apply text-xl lg:text-xl font-normal;
+  }
+  h6 {
+    @apply text-lg not-italic font-normal my-1;
+  }
+  p {
+    @apply text-base lg:text-lg leading-tight tracking-normal font-normal my-0;
+    font-family: "CercoDEMO", sans-serif;
+  }
+  blockquote {
+    @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
+  }
+  li {
+    @apply text-lg lg:text-xl font-normal my-2;
+  }
+  li li {
+    @apply text-sm lg:text-sm font-light;
+  }
+  button {
+    @apply inline-block
+    text-base
+    lg:text-lg
+    px-8
+    py-1
+    my-4
+    border-2
+    shadow
+  }
+
+  article h2{
+    @apply text-xl lg:text-3xl font-medium
+  }
+
+article p ,li{
+  @apply text-base lg:text-lg
+}
+}
+
+a:hover{
+  color: #737373;
+}
+
+button:hover  {
+  color: #737373;
+}
+
+button  {
+font-weight: 500;
+}
+
+.experience-btn {
+    border: none;
+    margin: 0;
+    padding: 0;
+    color: black;
+    padding: 20px;
+    width: fit-content;
+}
+
+.experience-btn p {
+    @apply text-lg;
+}
+
+.experience-btn:hover {
+    background: white;
+}
+
+
+.experience-btn h4 {
+    white-space: normal;
+}
+
+header .customize {
+    background-color: transparent;
+    position: absolute;
+}
+
+footer .customize {
+    /* width: 100vw; */
+    color: #fff;
+    background-color: #17b9c8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 24px;
+    padding-bottom: 24px;
+}
+
+footer .customize img {
+    width: 60px;
+}
+
+
+header .customize div {
+    box-shadow: none;
+    text-transform: uppercase;
+    font-weight: 700 !important;
+}
+
+button {
+  background: transparent;
+  color: black;
+  border-radius: 4px;
+  border: 2px solid black;
+  box-shadow: none;
+  /* font-size: 18px; */
+}
+
+a {
+  border: none;
+}
+
+header {
+  font-family: "Work Sans";
+}
+
+.nav_btn {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.quicklinks {
+  box-sizing: border-box;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: auto;
+  display: inline-block;
+  margin: 0 auto;
+  border-radius: 10px;
+  margin-top: 30px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.quicklinks img {
+  height: auto;
+  max-width: 200px;
+  display: inline-block;
+  padding: 10px;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  position: relative;
+  margin-right: 30px;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  opacity: 0.5;
+}
+
+.quicklinks img:hover {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+.banner {
+  width: 100%;
+  margin: 0;
+  padding: 120px 0;
+  text-align: center;
+  position: relative;
+  display: block;
+  color: #fff !important;
+  letter-spacing: 0.5px;
+  overflow: hidden;
+  background: #00838d;
+  transition: 1.5s;
+}
+
+.header {
+  height: auto;
+  background: none;
+  padding: 200px 0;
+}
+
+.banner h2,
+.header h1 {
+  margin: auto;
+  color: #fff;
+  position: relative;
+  transition: 0.3s;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.header h1 {
+  color: #000;
+  transition: none;
+}
+
+.banner h2 svg {
+  font-size: 40px;
+  margin-left: 15px;
+  position: absolute;
+  top: 55%;
+  transform: translateY(-50%) scale(0.5);
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.banner .back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-position: center;
+  background-size: cover;
+  filter: grayscale(1) contrast(1.4);
+  opacity: 0.25;
+  transition: 1.5s;
+}
+
+.header .back {
+  filter: none;
+  opacity: 1;
+  background-position: center;
+
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.banner:hover {
+  background: #4b3a92;
+}
+
+.header:hover {
+  background: none;
+}
+
+.banner:hover h2 svg {
+  transform: translateY(-50%) scale(1);
+  opacity: 1;
+}
+
+.banner:hover h2 {
+  padding-right: 40px;
+}
+
+.header:hover h1 {
+  padding-right: 0;
+}
+
+.banner:hover .back {
+  transform: scale(1.03);
+}
+
+.header:hover .back {
+  transform: none;
+}
+
+@media (max-width: 768px) {
+  /* h2 {
+    font-size: 4rem;
+  } */
+}
+@media (max-width: 640px) {
+  .banner h2 {
+    font: 600 7vw/10vw;
+  }
+
+  .header h1 {
+    font-size: 35px;
+  }
+
+  .banner h2 svg {
+    font-size: 30px;
+  }
+}
+
+@media (max-width: 480px) {
+  .banner,
+  .header {
+    padding: 80px 0;
+  }
+
+  footer {
+    text-align: center;
+ }
+  /* h2 {
+    font-size: 3rem;
+  } */
+}
diff --git a/content/css/layout.css b/content/css/layout.css
new file mode 100644
index 0000000..e1ef0cb
--- /dev/null
+++ b/content/css/layout.css
@@ -0,0 +1,472 @@
+main {
+  @apply pt-0;
+}
+
+#text-1xl { @apply text-xl }
+#text-2xl { @apply text-2xl }
+#text-3xl { @apply text-3xl }
+#text-4xl { @apply text-4xl }
+#text-5xl { @apply text-5xl }
+#text-6xl { @apply xl:text-6xl lg:text-5xl md:text-4xl sm:text-3xl}
+#text-7xl { @apply text-7xl }
+#text-8xl { @apply text-8xl }
+#text-9xl { 
+    font-size: 8rem;
+}
+
+#xp-heading { @apply m-0 }
+/*
+html, body {
+  @apply dark:bg-black;
+
+body {
+  @apply font-serif dark:text-gray-200;
+}
+*/
+
+p {
+  /* for handling Markdown-created <p> and <li> */
+  @apply text-lg;
+}
+
+pre,
+code {
+  font-feature-settings: normal;
+}
+
+.navWhite,
+.navWhite:visited {
+  @apply text-white;
+}
+
+.navWhite:focus,
+.navWhite:active {
+  @apply text-gray-400;
+}
+
+.text-blue-light {
+  @apply text-blue-500;
+}
+
+.text-blue-dark {
+  /* for dark mode 
+  @apply text-blue-200;
+  */
+}
+
+.text-shadow-titles {
+  text-shadow: 4px 4px 2px #000;
+}
+
+.gradient-titles {
+  @apply bg-gradient-to-b from-blue-700 to-black;
+}
+
+.ctr {
+  @apply text-center;
+}
+
+.legal {
+  @apply text-xs;
+}
+
+nav h4 a:hover {
+  @apply border-0 text-blue-300 font-light;
+}
+nav h4 a,
+nav h4 a:focus,
+nav h4 a:active {
+  @apply border-0 text-black font-light;
+}
+
+a h2 {
+  @apply text-black;
+}
+
+a:focus,
+a:hover {
+  @apply border-none text-blue-300;
+}
+a:active {
+  @apply text-blue-800 border-blue-500;
+}
+
+h5 a {
+  @apply text-gray-900 font-normal;
+}
+
+/*
+a:hover {
+  @apply dark:text-blue-300;
+}
+*/
+
+sup a,
+a.previous,
+a.next,
+.footnote-return {
+  @apply border-b-0;
+}
+
+#nav-toggle:checked + #navMenu {
+  @apply block;
+}
+
+a.navborderless {
+  @apply border-b-0;
+}
+/*
+.dateInfo {
+  @apply text-gray-700 dark:text-gray-400;
+}
+*/
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+}
+
+h1,
+.h1 {
+  @apply text-4xl font-extrabold;
+}
+
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  @apply font-bold;
+}
+
+h2,
+.h2 {
+  @apply text-4xl;
+}
+
+h4,
+.h4 {
+  @apply text-2xl;
+}
+
+h5 {
+  @apply not-italic;
+}
+
+h5,
+.h5,
+h6,
+.h6 {
+  @apply text-lg;
+}
+
+.height-hero {
+  height: 45vh;
+  max-height: 45vh;
+  overflow: hidden;
+}
+
+.height-post {
+  height: 35vh;
+  max-height: 35vh;
+}
+
+.imgCover {
+  @apply object-cover object-center h-full w-full;
+}
+
+.background-hero-image-div {
+  @apply relative overflow-hidden w-full bg-black;
+  /* Have to allow for mobile browsers' own "chrome"; can't go by Inspector simulations of smaller breakpoints */
+  height: 80vh;
+  max-height: 80vh;
+}
+
+.background-hero-title-block-fit {
+  @apply block w-full absolute bottom-0 px-4 pt-3 pb-6 bg-gradient-to-t from-black;
+}
+
+.background-hero-title-text {
+  text-shadow: 4px 4px 2px #000;
+}
+
+@media screen and (min-width: 768px) {
+  .background-hero-title-block-fit {
+    @apply px-12;
+  }
+
+  .background-hero-image-div {
+    height: 85vh;
+    max-height: 85vh;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .background-hero-title-block-fit {
+    @apply px-16;
+  }
+
+  .background-hero-image-div {
+    height: 95vh;
+    max-height: 95vh;
+  }
+}
+
+.text-nowrap,
+.text-nobrk {
+  @apply whitespace-nowrap;
+}
+
+article h1,
+article h2,
+article h3,
+article h4 {
+  @apply tracking-tight mt-8 mb-6;
+}
+
+article p {
+  @apply text-lg leading-relaxed;
+}
+
+article img.containedImage {
+  min-width: 100%;
+  max-width: 100%;
+  @apply w-full h-auto;
+}
+
+@media screen and (min-width: 768px) {
+  .height-hero {
+    height: 70vh;
+    max-height: 70vh;
+  }
+
+  .height-post {
+    height: 40vh;
+    max-height: 40vh;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  article p {
+    @apply text-xl leading-relaxed;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  article p {
+    @apply text-2xl leading-relaxed;
+  }
+}
+/*
+.yellowBox {
+  @apply font-sans bg-yellow-200 border border-gray-900 border-solid mx-auto my-2 w-full px-6 py-2 dark:bg-gray-800 dark:border-gray-500;
+}
+*/
+
+.yellowbox p {
+  @apply w-full p-2 m-0;
+}
+
+ul,
+ol {
+  @apply pl-8;
+}
+
+ul {
+  @apply list-disc;
+}
+
+ol {
+  @apply list-decimal;
+}
+
+.twitter-tweet {
+  @apply mt-4 mx-auto mb-0;
+}
+
+table.leagues {
+  @apply w-11/12 mt-4 mx-auto mb-0 border-0 border-collapse;
+}
+
+table.leagues td.col {
+  @apply w-1/2;
+}
+
+@media (min-width: 900px) {
+  table.leagues {
+    @apply w-3/5;
+  }
+  table.noborders {
+    @apply w-11/12;
+  }
+}
+
+table.noborders {
+  @apply w-full border-0 border-collapse mt-6 mx-auto mb-4;
+}
+
+table.noborders td {
+  @apply text-gray-800 text-left align-middle py-1 pr-0 pl-2;
+  /* text-align: left !important; */
+}
+
+table.noborders td img {
+  @apply inline-block align-middle m-0;
+}
+
+table.noborders tr {
+  @apply bg-blue-100;
+}
+
+table.noborders tr:nth-child(even) {
+  @apply bg-gray-200;
+}
+
+table.noborders thead tr {
+  @apply bg-blue-700;
+}
+
+table.noborders thead td {
+  @apply text-white font-bold;
+}
+
+table.noborders td.td70 {
+  width: 70%;
+}
+table.noborders td.td70 img {
+  @apply block w-1/2 h-auto;
+  max-width: 50%;
+}
+
+table.noborders td.td30 {
+  width: 30%;
+}
+/*
+blockquote {
+  @apply px-6 text-gray-700 dark:text-gray-400;
+}
+*/
+
+/* start, footnotes */
+
+.footnote-definition,
+.footnote-reference {
+  @apply font-sans;
+}
+
+.footnote-reference {
+  font-size: 0.65em;
+  top: -0.5em;
+}
+
+.footnote-sim {
+  font-size: 0.65em;
+  color: #0000ff;
+  @media (prefers-color-scheme: dark) {
+    color: #00aaff;
+  }
+}
+
+.footnotes {
+  & ol {
+    padding-inline-start: 1.5rem;
+  }
+  & ol li {
+    margin-bottom: 0.5rem;
+    font-size: $pokey;
+  }
+  & li p {
+    font-size: 100%;
+    line-height: 1.4;
+  }
+  & .footnote-backref {
+    font-size: 75%;
+  }
+}
+
+a.footnote-return {
+  font-size: 50%;
+}
+
+article > .footnote-definition {
+  border-top: 1px solid black;
+  padding-top: 1em;
+  margin-top: 1em;
+}
+
+article > .footnote-definition ~ .footnote-definition {
+  border-top: 0;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.footnote-definition-label {
+  top: -0.4em;
+  font-size: 0.65em;
+}
+
+.footnote-definition-label + p {
+  font-size: 75%;
+  margin-top: -1.75em;
+  margin-left: 1em;
+  line-height: 1.35;
+}
+
+.footnote-definition-label::after {
+  content: ".";
+}
+
+/* == end, footnotes */
+
+.aspect-16x9 {
+  padding-bottom: 56.25%;
+}
+/*
+hr {
+  @apply border-solid border-gray-900 dark:border-gray-100;
+}
+*/
+
+footer {
+  @apply font-sans;
+}
+
+.lazypicturecaption {
+  @apply text-sm p-0 mt-2 leading-snug text-center;
+}
+
+.home-colOne p {
+  @apply leading-8 mb-4;
+}
+
+.home-colOne img {
+  @apply my-4;
+}
+
+.container-comments {
+  margin: 0 auto;
+  font-size: 85%;
+  width: 85%;
+  max-width: 720px !important;
+  margin-bottom: 0;
+}
+
+@media screen and (min-width: 900px) {
+  .container-comments {
+    width: 40%;
+  }
+}
diff --git a/content/footer/_index.md b/content/footer/_index.md
index de2c25b..c23a500 100644
--- a/content/footer/_index.md
+++ b/content/footer/_index.md
@@ -4,7 +4,7 @@ description: ""
 insert_anchor_links: "left"
 template: "partials/footer.html"
 extra:
-  logoPath: "footer/img/logo_dunia_2.jpeg"
+  logoPath: "images/logo.jpeg"
   socialLinks: { Youtube: "https://www.youtube.com/channel/UC_iykLteqV-jwOBzueLtUwg", Twitter: "https://twitter.com/DenisMukwege", Facebook: "https://www.facebook.com/DrDenisMukwege"  }
 ---
 
diff --git a/content/header/_index.md b/content/header/_index.md
index 256cd8a..4aa43dd 100644
--- a/content/header/_index.md
+++ b/content/header/_index.md
@@ -4,7 +4,7 @@ description: "this is a header."
 insert_anchor_links: "left"
 template: "partials/header.html"
 extra:
-  logoPath: "/header/img/logo_dunia.jpeg"
+  logoPath: "/images/logoheader.jpeg"
   imgPath: ""
 ---
 - [Home]("/home")
diff --git a/content/nodehost/index.md b/content/nodehost/index.md
index 0da6b90..4058fd5 100644
--- a/content/nodehost/index.md
+++ b/content/nodehost/index.md
@@ -7,7 +7,7 @@ draft: false
 sort_by: weight
 weight: 1
 extra:
-    logo_path: images/logo.svg
+    logo_path: images/logo.jpeg
 ---
 
 {% row(style="center" padding="top") %}
diff --git a/content/participate/index.md b/content/participate/index.md
index 75007b0..7d33648 100644
--- a/content/participate/index.md
+++ b/content/participate/index.md
@@ -7,7 +7,7 @@ draft: false
 sort_by: weight
 weight: 1
 extra:
-    logo_path: images/logo.svg
+    logo_path: images/logo.jpeg
 ---
 
 {% row(style="center" margin="through." bgPath="img/participate_2.png" bgStyle="full") %} 
diff --git a/css/admonition.css b/css/admonition.css
new file mode 100644
index 0000000..de7d76e
--- /dev/null
+++ b/css/admonition.css
@@ -0,0 +1,361 @@
+:root {
+  --md-admonition-icon--note: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");
+  --md-admonition-icon--abstract: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'/></svg>");
+  --md-admonition-icon--info: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z'/></svg>");
+  --md-admonition-icon--tip: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z'/></svg>");
+  --md-admonition-icon--success: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z'/></svg>");
+  --md-admonition-icon--question: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z'/></svg>");
+  --md-admonition-icon--warning: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z'/></svg>");
+  --md-admonition-icon--failure: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z'/></svg>");
+  --md-admonition-icon--danger: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11 15H6l7-14v8h5l-7 14v-8z'/></svg>");
+  --md-admonition-icon--bug: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z'/></svg>");
+  --md-admonition-icon--example: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z'/></svg>");
+  --md-admonition-icon--quote: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z'/></svg>");
+  --md-details-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
+}
+
+:is(.admonition) {
+  display: flow-root;
+  margin: 1.5625em 0;
+  padding: 0 1.2rem;
+  color: var(--fg);
+  page-break-inside: avoid;
+  background-color: var(--bg);
+  border: 0 solid black;
+  border-inline-start-width: 0.4rem;
+  border-radius: 0.2rem;
+  box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.05), 0 0 0.1rem rgba(0, 0, 0, 0.1);
+}
+
+.admonition p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  font-size: 0.8rem;
+}
+
+@media print {
+  :is(.admonition) {
+    box-shadow: none;
+  }
+}
+:is(.admonition) > * {
+  box-sizing: border-box;
+}
+:is(.admonition) :is(.admonition) {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+:is(.admonition) > .tabbed-set:only-child {
+  margin-top: 0;
+}
+html :is(.admonition) > :last-child {
+  margin-bottom: 1.2rem;
+}
+
+:is(.admonition-title, summary) {
+  position: relative;
+  margin-block: 0;
+  margin-inline: -1.6rem -1.2rem;
+  padding-block: 0.8rem;
+  padding-inline: 4rem 1.2rem;
+  font-weight: 700;
+  background-color: rgba(68, 138, 255, 0.1);
+  border: 0 solid #448aff;
+  border-inline-start-width: 0.4rem;
+  border-start-start-radius: 0.2rem;
+  display: flex;
+}
+:is(.admonition-title, summary) > p {
+  margin: 0;
+}
+html :is(.admonition-title, summary):last-child {
+  margin-bottom: 0;
+}
+:is(.admonition-title, summary)::before {
+  position: absolute;
+  top: 0.625em;
+  inset-inline-start: 1.2rem;
+  width: 1.4rem;
+  height: 1.4rem;
+  background-color: #448aff;
+  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  content: "";
+}
+
+:is(.admonition):is(.note) {
+  border-color: #448aff;
+}
+
+:is(.note) > :is(.admonition-title, summary) {
+  background-color: rgba(68, 138, 255, 0.1);
+  border-color: #448aff;
+}
+:is(.note) > :is(.admonition-title, summary)::before {
+  background-color: #448aff;
+  mask-image: var(--md-admonition-icon--note);
+  -webkit-mask-image: var(--md-admonition-icon--note);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.abstract, .summary, .tldr) {
+  border-color: #00b0ff;
+}
+
+:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 176, 255, 0.1);
+  border-color: #00b0ff;
+}
+:is(.abstract, .summary, .tldr) > :is(.admonition-title, summary)::before {
+  background-color: #00b0ff;
+  mask-image: var(--md-admonition-icon--abstract);
+  -webkit-mask-image: var(--md-admonition-icon--abstract);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.info, .todo) {
+  border-color: #00b8d4;
+}
+
+:is(.info, .todo) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 184, 212, 0.1);
+  border-color: #00b8d4;
+}
+:is(.info, .todo) > :is(.admonition-title, summary)::before {
+  background-color: #00b8d4;
+  mask-image: var(--md-admonition-icon--info);
+  -webkit-mask-image: var(--md-admonition-icon--info);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.tip, .hint, .important) {
+  border-color: #00bfa5;
+}
+
+:is(.tip, .hint, .important) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 191, 165, 0.1);
+  border-color: #00bfa5;
+}
+:is(.tip, .hint, .important) > :is(.admonition-title, summary)::before {
+  background-color: #00bfa5;
+  mask-image: var(--md-admonition-icon--tip);
+  -webkit-mask-image: var(--md-admonition-icon--tip);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.success, .check, .done) {
+  border-color: #00c853;
+}
+
+:is(.success, .check, .done) > :is(.admonition-title, summary) {
+  background-color: rgba(0, 200, 83, 0.1);
+  border-color: #00c853;
+}
+:is(.success, .check, .done) > :is(.admonition-title, summary)::before {
+  background-color: #00c853;
+  mask-image: var(--md-admonition-icon--success);
+  -webkit-mask-image: var(--md-admonition-icon--success);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.question, .help, .faq) {
+  border-color: #64dd17;
+}
+
+:is(.question, .help, .faq) > :is(.admonition-title, summary) {
+  background-color: rgba(100, 221, 23, 0.1);
+  border-color: #64dd17;
+}
+:is(.question, .help, .faq) > :is(.admonition-title, summary)::before {
+  background-color: #64dd17;
+  mask-image: var(--md-admonition-icon--question);
+  -webkit-mask-image: var(--md-admonition-icon--question);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.warning, .caution, .attention) {
+  border-color: #ff9100;
+}
+
+:is(.warning, .caution, .attention) > :is(.admonition-title, summary) {
+  background-color: rgba(255, 145, 0, 0.1);
+  border-color: #ff9100;
+}
+:is(.warning, .caution, .attention) > :is(.admonition-title, summary)::before {
+  background-color: #ff9100;
+  mask-image: var(--md-admonition-icon--warning);
+  -webkit-mask-image: var(--md-admonition-icon--warning);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.failure, .fail, .missing) {
+  border-color: #ff5252;
+}
+
+:is(.failure, .fail, .missing) > :is(.admonition-title, summary) {
+  background-color: rgba(255, 82, 82, 0.1);
+  border-color: #ff5252;
+}
+:is(.failure, .fail, .missing) > :is(.admonition-title, summary)::before {
+  background-color: #ff5252;
+  mask-image: var(--md-admonition-icon--failure);
+  -webkit-mask-image: var(--md-admonition-icon--failure);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.danger, .error) {
+  border-color: #ff1744;
+}
+
+:is(.danger, .error) > :is(.admonition-title, summary) {
+  background-color: rgba(255, 23, 68, 0.1);
+  border-color: #ff1744;
+}
+:is(.danger, .error) > :is(.admonition-title, summary)::before {
+  background-color: #ff1744;
+  mask-image: var(--md-admonition-icon--danger);
+  -webkit-mask-image: var(--md-admonition-icon--danger);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.bug) {
+  border-color: #f50057;
+}
+
+:is(.bug) > :is(.admonition-title, summary) {
+  background-color: rgba(245, 0, 87, 0.1);
+  border-color: #f50057;
+}
+:is(.bug) > :is(.admonition-title, summary)::before {
+  background-color: #f50057;
+  mask-image: var(--md-admonition-icon--bug);
+  -webkit-mask-image: var(--md-admonition-icon--bug);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.example) {
+  border-color: #7c4dff;
+}
+
+:is(.example) > :is(.admonition-title, summary) {
+  background-color: rgba(124, 77, 255, 0.1);
+  border-color: #7c4dff;
+}
+:is(.example) > :is(.admonition-title, summary)::before {
+  background-color: #7c4dff;
+  mask-image: var(--md-admonition-icon--example);
+  -webkit-mask-image: var(--md-admonition-icon--example);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+:is(.admonition):is(.quote, .cite) {
+  border-color: #9e9e9e;
+}
+
+:is(.quote, .cite) > :is(.admonition-title, summary) {
+  background-color: rgba(158, 158, 158, 0.1);
+  border-color: #9e9e9e;
+}
+:is(.quote, .cite) > :is(.admonition-title, summary)::before {
+  background-color: #9e9e9e;
+  mask-image: var(--md-admonition-icon--quote);
+  -webkit-mask-image: var(--md-admonition-icon--quote);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+}
+
+.navy :is(.admonition) {
+  background-color: var(--sidebar-bg);
+}
+
+.ayu :is(.admonition),
+.coal :is(.admonition) {
+  background-color: var(--theme-hover);
+}
+
+.rust :is(.admonition) {
+  background-color: var(--sidebar-bg);
+  color: var(--sidebar-fg);
+}
+
+:is(.admonition-title) {
+  font-feature-settings: "kern", "liga";
+  font-weight: 600;
+  font-size: 0.84rem;
+  border: none;
+  padding: 10px 50px;
+}
+
+:is(summary)::after {
+  position: absolute;
+  top: 0.625em;
+  width: 1.4rem;
+  height: 1.4rem;
+  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"></svg>');
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  content: "";
+}
+
+:is(summary)::after {
+  background-color: black;
+  mask-image: var(--md-details-icon);
+  -webkit-mask-image: var(--md-details-icon);
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  position: absolute;
+  transform: rotate(-90deg);
+  transition: transform 0.25s;
+  right: 0.4rem;
+}
+
+details[open] > summary::after {
+  transform: rotate(0deg);
+}
diff --git a/css/code.css b/css/code.css
new file mode 100644
index 0000000..7d95a8e
--- /dev/null
+++ b/css/code.css
@@ -0,0 +1,90 @@
+code.language-html,
+code.language-css,
+code.language-md,
+code.language-cmd,
+code.language-bash,
+code.language-text,
+code.language-js,
+span.o,
+span.nx {
+  color: rgb(255, 255, 255);
+  line-height: 1.4;
+}
+span.c {
+  color: hsl(120, 100%, 20%);
+}
+
+span.p,
+span.s1,
+span.s2,
+span.nt {
+  color: hsl(40, 100%, 30%);
+}
+
+span.gs,
+span.gh,
+span.ge {
+  color: hsl(208, 100%, 50%);
+}
+
+span.gs {
+  font-weight: bold;
+}
+
+span.ge {
+  font-style: italic;
+}
+
+pre,
+code {
+  @apply font-mono;
+}
+
+code {
+  background-color: hsl(0, 0%, 98%);
+  border-radius: 3px;
+  color: hsl(120, 100%, 20%);
+  font-size: 85%;
+}
+
+pre {
+  margin: 0;
+  margin: 0;
+  padding: 1rem;
+  overflow: scroll;
+}
+
+pre code {
+  background-color: transparent;
+  color: inherit;
+  font-size: 100%;
+  padding: 0;
+}
+
+.highlight {
+  background-color: transparent;
+  border-radius: 3px;
+  margin: 0 0 0.5rem;
+  padding: 0;
+
+  & pre {
+    margin-bottom: 0;
+    overflow-x: auto;
+  }
+
+  & .lineno {
+    color: hsla(0, 0%, 67%, 0.72);
+    display: inline-block; /* Ensures the null space also isn't selectable */
+    padding: 0 0.75rem 0 0.25rem;
+    /* Make sure numbers aren't selectable */
+  }
+}
+
+/* TODO: dark theme for future
+@media (prefers-color-scheme: dark) {
+  code {
+    color: #fff;
+    background: hsl(200, 63%, 15%);
+  }
+}
+*/
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..1819793
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,406 @@
+/*! purgecss start ignore */
+@import "code.css";
+/*! purgecss end ignore */
+
+@import "tailwindcss/base";
+@import "layout.css";
+@import "tailwindcss/components";
+@import "admonition.css";
+@import "tailwindcss/utilities";
+
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap');
+/* Custom CSS for header partial */
+.backdrop-blur {
+  -webkit-backdrop-filter: blur(40px);
+}
+
+* {
+  font-family: 'Lato', sans-serif;
+}
+
+.bg-semi-white {
+  background-color: rgba(255, 255, 255, 0.75);
+}
+
+/* Custom css allowing image styling in markdown */
+
+
+img[src*="#mx-auto"] {
+  margin: auto;
+}
+
+img[src*="#small"] {
+  width: 68px;
+}
+
+img[src*="#sm"] {
+  width: 200px;
+}
+
+img[src*="#md"] {
+    width: 300px;
+}
+
+img[src*="#medium"] {
+    width: 500px;
+}
+
+img[src*="#logo"] {
+  max-width: min(250px, 100%);
+  margin: auto;
+}
+
+img[src*="#large"] {
+  width: min(60vw, 100vh);
+  margin: auto;
+}
+
+img[src*="#fill"] {
+  width: 100%;
+  height: 100%;
+}
+
+img[src*="#tft_img"] {
+  width: 150px;
+  margin: 8px;
+}
+
+img[src*="#icon"] {
+  width: 65px;
+  margin: 4px;
+}
+
+img[src*="#fig"] {
+  width: 150px;
+}
+
+.logo_size {
+  width: 200px;
+}
+
+.advance{
+
+  font-family: "lato";
+}
+
+@layer components {
+  h1 {
+    @apply text-3xl lg:text-5xl xl:text-7xl font-bold leading-4 my-4;
+    font-family: "lato", sans-serif;
+    line-height: 0.9;
+    
+  }
+  h1 strong {
+    @apply font-medium;
+  }
+  h2 {
+    @apply text-3xl md:text-4xl lg:text-6xl font-bold leading-4 my-4;
+    font-family: "lato", sans-serif;
+    line-height: 0.9;
+    
+    
+  }
+  h2 strong {
+    @apply font-medium;
+  }
+  h3 {
+    @apply text-xl lg:text-3xl font-normal my-4;
+    color:#oab7a9;
+  }
+  h3 strong {
+    @apply font-medium;
+  }
+  h4 {
+    @apply text-xl lg:text-2xl font-normal my-4;
+    color:#oab7a9;
+  }
+  h5 {
+    @apply text-xl lg:text-xl font-normal;
+  }
+  h6 {
+    @apply text-lg not-italic font-normal my-1;
+  }
+  p {
+    @apply text-base lg:text-lg leading-tight tracking-normal font-normal my-0;
+    font-family: "CercoDEMO", sans-serif;
+  }
+  blockquote {
+    @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
+  }
+  li {
+    @apply text-lg lg:text-xl font-normal my-2;
+  }
+  li li {
+    @apply text-sm lg:text-sm font-light;
+  }
+  button {
+    @apply inline-block
+    text-base
+    lg:text-lg
+    px-8
+    py-1
+    my-4
+    border-2
+    shadow
+  }
+
+  article h2{
+    @apply text-xl lg:text-3xl font-medium
+  }
+
+article p ,li{
+  @apply text-base lg:text-lg
+}
+}
+
+a:hover{
+  color: #737373;
+}
+
+button:hover  {
+  color: #737373;
+}
+
+button  {
+font-weight: 500;
+}
+
+.experience-btn {
+    border: none;
+    margin: 0;
+    padding: 0;
+    color: black;
+    padding: 20px;
+    width: fit-content;
+}
+
+.experience-btn p {
+    @apply text-lg;
+}
+
+.experience-btn:hover {
+    background: white;
+}
+
+
+.experience-btn h4 {
+    white-space: normal;
+}
+
+header .customize {
+    background-color: transparent;
+    position: absolute;
+}
+
+footer .customize {
+    /* width: 100vw; */
+    color: #fff;
+    background-color: #17b9c8;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 24px;
+    padding-bottom: 24px;
+}
+
+footer .customize img {
+    width: 60px;
+}
+
+
+header .customize div {
+    box-shadow: none;
+    text-transform: uppercase;
+    font-weight: 700 !important;
+}
+
+button {
+  background: transparent;
+  color: black;
+  border-radius: 4px;
+  border: 2px solid black;
+  box-shadow: none;
+  /* font-size: 18px; */
+}
+
+a {
+  border: none;
+}
+
+header {
+  font-family: "Work Sans";
+}
+
+.nav_btn {
+  margin: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.quicklinks {
+  box-sizing: border-box;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: auto;
+  display: inline-block;
+  margin: 0 auto;
+  border-radius: 10px;
+  margin-top: 30px;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+.quicklinks img {
+  height: auto;
+  max-width: 200px;
+  display: inline-block;
+  padding: 10px;
+  -webkit-filter: grayscale(100%);
+  filter: grayscale(100%);
+  position: relative;
+  margin-right: 30px;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  opacity: 0.5;
+}
+
+.quicklinks img:hover {
+  opacity: 1;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+.banner {
+  width: 100%;
+  margin: 0;
+  padding: 120px 0;
+  text-align: center;
+  position: relative;
+  display: block;
+  color: #fff !important;
+  letter-spacing: 0.5px;
+  overflow: hidden;
+  background: #00838d;
+  transition: 1.5s;
+}
+
+.header {
+  height: auto;
+  background: none;
+  padding: 200px 0;
+}
+
+.banner h2,
+.header h1 {
+  margin: auto;
+  color: #fff;
+  position: relative;
+  transition: 0.3s;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.header h1 {
+  color: #000;
+  transition: none;
+}
+
+.banner h2 svg {
+  font-size: 40px;
+  margin-left: 15px;
+  position: absolute;
+  top: 55%;
+  transform: translateY(-50%) scale(0.5);
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.banner .back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-position: center;
+  background-size: cover;
+  filter: grayscale(1) contrast(1.4);
+  opacity: 0.25;
+  transition: 1.5s;
+}
+
+.header .back {
+  filter: none;
+  opacity: 1;
+  background-position: center;
+
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+.banner:hover {
+  background: #4b3a92;
+}
+
+.header:hover {
+  background: none;
+}
+
+.banner:hover h2 svg {
+  transform: translateY(-50%) scale(1);
+  opacity: 1;
+}
+
+.banner:hover h2 {
+  padding-right: 40px;
+}
+
+.header:hover h1 {
+  padding-right: 0;
+}
+
+.banner:hover .back {
+  transform: scale(1.03);
+}
+
+.header:hover .back {
+  transform: none;
+}
+
+@media (max-width: 768px) {
+  /* h2 {
+    font-size: 4rem;
+  } */
+}
+@media (max-width: 640px) {
+  .banner h2 {
+    font: 600 7vw/10vw;
+  }
+
+  .header h1 {
+    font-size: 35px;
+  }
+
+  .banner h2 svg {
+    font-size: 30px;
+  }
+}
+
+@media (max-width: 480px) {
+  .banner,
+  .header {
+    padding: 80px 0;
+  }
+
+  footer {
+    text-align: center;
+ }
+  /* h2 {
+    font-size: 3rem;
+  } */
+}
diff --git a/css/layout.css b/css/layout.css
new file mode 100644
index 0000000..e1ef0cb
--- /dev/null
+++ b/css/layout.css
@@ -0,0 +1,472 @@
+main {
+  @apply pt-0;
+}
+
+#text-1xl { @apply text-xl }
+#text-2xl { @apply text-2xl }
+#text-3xl { @apply text-3xl }
+#text-4xl { @apply text-4xl }
+#text-5xl { @apply text-5xl }
+#text-6xl { @apply xl:text-6xl lg:text-5xl md:text-4xl sm:text-3xl}
+#text-7xl { @apply text-7xl }
+#text-8xl { @apply text-8xl }
+#text-9xl { 
+    font-size: 8rem;
+}
+
+#xp-heading { @apply m-0 }
+/*
+html, body {
+  @apply dark:bg-black;
+
+body {
+  @apply font-serif dark:text-gray-200;
+}
+*/
+
+p {
+  /* for handling Markdown-created <p> and <li> */
+  @apply text-lg;
+}
+
+pre,
+code {
+  font-feature-settings: normal;
+}
+
+.navWhite,
+.navWhite:visited {
+  @apply text-white;
+}
+
+.navWhite:focus,
+.navWhite:active {
+  @apply text-gray-400;
+}
+
+.text-blue-light {
+  @apply text-blue-500;
+}
+
+.text-blue-dark {
+  /* for dark mode 
+  @apply text-blue-200;
+  */
+}
+
+.text-shadow-titles {
+  text-shadow: 4px 4px 2px #000;
+}
+
+.gradient-titles {
+  @apply bg-gradient-to-b from-blue-700 to-black;
+}
+
+.ctr {
+  @apply text-center;
+}
+
+.legal {
+  @apply text-xs;
+}
+
+nav h4 a:hover {
+  @apply border-0 text-blue-300 font-light;
+}
+nav h4 a,
+nav h4 a:focus,
+nav h4 a:active {
+  @apply border-0 text-black font-light;
+}
+
+a h2 {
+  @apply text-black;
+}
+
+a:focus,
+a:hover {
+  @apply border-none text-blue-300;
+}
+a:active {
+  @apply text-blue-800 border-blue-500;
+}
+
+h5 a {
+  @apply text-gray-900 font-normal;
+}
+
+/*
+a:hover {
+  @apply dark:text-blue-300;
+}
+*/
+
+sup a,
+a.previous,
+a.next,
+.footnote-return {
+  @apply border-b-0;
+}
+
+#nav-toggle:checked + #navMenu {
+  @apply block;
+}
+
+a.navborderless {
+  @apply border-b-0;
+}
+/*
+.dateInfo {
+  @apply text-gray-700 dark:text-gray-400;
+}
+*/
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+}
+
+h1,
+.h1 {
+  @apply text-4xl font-extrabold;
+}
+
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  @apply font-bold;
+}
+
+h2,
+.h2 {
+  @apply text-4xl;
+}
+
+h4,
+.h4 {
+  @apply text-2xl;
+}
+
+h5 {
+  @apply not-italic;
+}
+
+h5,
+.h5,
+h6,
+.h6 {
+  @apply text-lg;
+}
+
+.height-hero {
+  height: 45vh;
+  max-height: 45vh;
+  overflow: hidden;
+}
+
+.height-post {
+  height: 35vh;
+  max-height: 35vh;
+}
+
+.imgCover {
+  @apply object-cover object-center h-full w-full;
+}
+
+.background-hero-image-div {
+  @apply relative overflow-hidden w-full bg-black;
+  /* Have to allow for mobile browsers' own "chrome"; can't go by Inspector simulations of smaller breakpoints */
+  height: 80vh;
+  max-height: 80vh;
+}
+
+.background-hero-title-block-fit {
+  @apply block w-full absolute bottom-0 px-4 pt-3 pb-6 bg-gradient-to-t from-black;
+}
+
+.background-hero-title-text {
+  text-shadow: 4px 4px 2px #000;
+}
+
+@media screen and (min-width: 768px) {
+  .background-hero-title-block-fit {
+    @apply px-12;
+  }
+
+  .background-hero-image-div {
+    height: 85vh;
+    max-height: 85vh;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .background-hero-title-block-fit {
+    @apply px-16;
+  }
+
+  .background-hero-image-div {
+    height: 95vh;
+    max-height: 95vh;
+  }
+}
+
+.text-nowrap,
+.text-nobrk {
+  @apply whitespace-nowrap;
+}
+
+article h1,
+article h2,
+article h3,
+article h4 {
+  @apply tracking-tight mt-8 mb-6;
+}
+
+article p {
+  @apply text-lg leading-relaxed;
+}
+
+article img.containedImage {
+  min-width: 100%;
+  max-width: 100%;
+  @apply w-full h-auto;
+}
+
+@media screen and (min-width: 768px) {
+  .height-hero {
+    height: 70vh;
+    max-height: 70vh;
+  }
+
+  .height-post {
+    height: 40vh;
+    max-height: 40vh;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  article p {
+    @apply text-xl leading-relaxed;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  article p {
+    @apply text-2xl leading-relaxed;
+  }
+}
+/*
+.yellowBox {
+  @apply font-sans bg-yellow-200 border border-gray-900 border-solid mx-auto my-2 w-full px-6 py-2 dark:bg-gray-800 dark:border-gray-500;
+}
+*/
+
+.yellowbox p {
+  @apply w-full p-2 m-0;
+}
+
+ul,
+ol {
+  @apply pl-8;
+}
+
+ul {
+  @apply list-disc;
+}
+
+ol {
+  @apply list-decimal;
+}
+
+.twitter-tweet {
+  @apply mt-4 mx-auto mb-0;
+}
+
+table.leagues {
+  @apply w-11/12 mt-4 mx-auto mb-0 border-0 border-collapse;
+}
+
+table.leagues td.col {
+  @apply w-1/2;
+}
+
+@media (min-width: 900px) {
+  table.leagues {
+    @apply w-3/5;
+  }
+  table.noborders {
+    @apply w-11/12;
+  }
+}
+
+table.noborders {
+  @apply w-full border-0 border-collapse mt-6 mx-auto mb-4;
+}
+
+table.noborders td {
+  @apply text-gray-800 text-left align-middle py-1 pr-0 pl-2;
+  /* text-align: left !important; */
+}
+
+table.noborders td img {
+  @apply inline-block align-middle m-0;
+}
+
+table.noborders tr {
+  @apply bg-blue-100;
+}
+
+table.noborders tr:nth-child(even) {
+  @apply bg-gray-200;
+}
+
+table.noborders thead tr {
+  @apply bg-blue-700;
+}
+
+table.noborders thead td {
+  @apply text-white font-bold;
+}
+
+table.noborders td.td70 {
+  width: 70%;
+}
+table.noborders td.td70 img {
+  @apply block w-1/2 h-auto;
+  max-width: 50%;
+}
+
+table.noborders td.td30 {
+  width: 30%;
+}
+/*
+blockquote {
+  @apply px-6 text-gray-700 dark:text-gray-400;
+}
+*/
+
+/* start, footnotes */
+
+.footnote-definition,
+.footnote-reference {
+  @apply font-sans;
+}
+
+.footnote-reference {
+  font-size: 0.65em;
+  top: -0.5em;
+}
+
+.footnote-sim {
+  font-size: 0.65em;
+  color: #0000ff;
+  @media (prefers-color-scheme: dark) {
+    color: #00aaff;
+  }
+}
+
+.footnotes {
+  & ol {
+    padding-inline-start: 1.5rem;
+  }
+  & ol li {
+    margin-bottom: 0.5rem;
+    font-size: $pokey;
+  }
+  & li p {
+    font-size: 100%;
+    line-height: 1.4;
+  }
+  & .footnote-backref {
+    font-size: 75%;
+  }
+}
+
+a.footnote-return {
+  font-size: 50%;
+}
+
+article > .footnote-definition {
+  border-top: 1px solid black;
+  padding-top: 1em;
+  margin-top: 1em;
+}
+
+article > .footnote-definition ~ .footnote-definition {
+  border-top: 0;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.footnote-definition-label {
+  top: -0.4em;
+  font-size: 0.65em;
+}
+
+.footnote-definition-label + p {
+  font-size: 75%;
+  margin-top: -1.75em;
+  margin-left: 1em;
+  line-height: 1.35;
+}
+
+.footnote-definition-label::after {
+  content: ".";
+}
+
+/* == end, footnotes */
+
+.aspect-16x9 {
+  padding-bottom: 56.25%;
+}
+/*
+hr {
+  @apply border-solid border-gray-900 dark:border-gray-100;
+}
+*/
+
+footer {
+  @apply font-sans;
+}
+
+.lazypicturecaption {
+  @apply text-sm p-0 mt-2 leading-snug text-center;
+}
+
+.home-colOne p {
+  @apply leading-8 mb-4;
+}
+
+.home-colOne img {
+  @apply my-4;
+}
+
+.container-comments {
+  margin: 0 auto;
+  font-size: 85%;
+  width: 85%;
+  max-width: 720px !important;
+  margin-bottom: 0;
+}
+
+@media screen and (min-width: 900px) {
+  .container-comments {
+    width: 40%;
+  }
+}
diff --git a/run.vsh b/run.vsh
old mode 100644
new mode 100755
diff --git a/start.sh b/start.sh
new file mode 100755
index 0000000..ac927fd
--- /dev/null
+++ b/start.sh
@@ -0,0 +1,25 @@
+# builds if executable isn't foound
+if [[ ! -f "tailwindcss" ]]
+then
+    sh build.sh
+fi
+
+# initialized and configures tailwind if not configured
+if [[ ! -f "tailwind.config.js" ]]
+then
+    ./tailwindcss init
+    sed -i '' "s|  content: \\[\\],|  content: \\['./templates/**/*.html'\\],|g" tailwind.config.js
+fi
+
+# compiles tailwind css & launches locally
+rm -rf public static/css
+./tailwindcss -i css/index.css -o ./static/css/index.css --watch & zola serve &
+
+# compiles tailwind css for prod & builds project
+./tailwindcss -i css/index.css -o ./static/css/index.css --minify
+zola build
+
+# kills zola and tw bg processes on interrupt
+trap 'kill $(jobs -p); exit 1' INT
+wait
+
diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000..13275b9
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap");
+/*! purgecss start ignore */code.language-bash,code.language-cmd,code.language-css,code.language-html,code.language-js,code.language-md,code.language-text,span.nx,span.o{color:#fff;line-height:1.4}span.c{color:#060}span.nt,span.p,span.s1,span.s2{color:#960}span.ge,span.gh,span.gs{color:#08f}span.gs{font-weight:700}span.ge{font-style:italic}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}code{background-color:#fafafa;border-radius:3px;color:#060;font-size:85%}pre{margin:0;overflow:scroll;padding:1rem}pre code{color:inherit;font-size:100%}.highlight,pre code{background-color:initial;padding:0}.highlight{border-radius:3px;margin:0 0 .5rem;& pre{margin-bottom:0;overflow-x:auto}& .lineno{color:#abababb8;display:inline-block;padding:0 .75rem 0 .25rem}}
+/*! purgecss end ignore */
+/*! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }main{padding-top:0}#text-1xl{font-size:1.25rem;line-height:1.75rem}#text-2xl{font-size:1.5rem;line-height:2rem}#text-3xl{font-size:1.875rem;line-height:2.25rem}#text-4xl{font-size:2.25rem;line-height:2.5rem}#text-5xl{font-size:3rem;line-height:1}@media (min-width:640px){#text-6xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width:768px){#text-6xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){#text-6xl{font-size:3rem;line-height:1}}@media (min-width:1280px){#text-6xl{font-size:3.75rem;line-height:1}}#text-7xl{font-size:4.5rem;line-height:1}#text-8xl{font-size:6rem;line-height:1}#text-9xl{font-size:8rem}#xp-heading{margin:0}p{font-size:1.125rem;line-height:1.75rem}code,pre{font-feature-settings:normal}.navWhite,.navWhite:visited{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.navWhite:active,.navWhite:focus{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-blue-light{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-shadow-titles{text-shadow:4px 4px 2px #000}.gradient-titles{--tw-gradient-from:#1d4ed8 var(--tw-gradient-from-position);--tw-gradient-to:#1d4ed800 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#000 var(--tw-gradient-to-position);background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.ctr{text-align:center}.legal{font-size:.75rem;line-height:1rem}nav h4 a:hover{color:rgb(147 197 253/var(--tw-text-opacity))}nav h4 a,nav h4 a:active,nav h4 a:focus,nav h4 a:hover{--tw-text-opacity:1;border-width:0;font-weight:300}a h2,nav h4 a,nav h4 a:active,nav h4 a:focus{color:rgb(0 0 0/var(--tw-text-opacity))}a h2,a:focus,a:hover{--tw-text-opacity:1}a:focus,a:hover{border-style:none;color:rgb(147 197 253/var(--tw-text-opacity))}a:active{--tw-border-opacity:1;--tw-text-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity));color:rgb(30 64 175/var(--tw-text-opacity))}h5 a{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity));font-weight:400}.footnote-return,a.next,a.previous,sup a{border-bottom-width:0}#nav-toggle:checked+#navMenu{display:block}a.navborderless{border-bottom-width:0}.h1,h1{font-size:2.25rem;font-weight:800;line-height:2.5rem}.h2,.h3,.h4,.h5,.h6,h2,h3,h4,h5,h6{font-weight:700}.h2,h2{font-size:2.25rem;line-height:2.5rem}.h4,h4{font-size:1.5rem;line-height:2rem}h5{font-style:normal}.h5,.h6,h5,h6{font-size:1.125rem;line-height:1.75rem}.height-hero{height:45vh;max-height:45vh;overflow:hidden}.height-post{height:35vh;max-height:35vh}.imgCover{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%}.background-hero-image-div{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity));height:80vh;max-height:80vh;overflow:hidden;position:relative;width:100%}.background-hero-title-block-fit{--tw-gradient-from:#000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);background-image:linear-gradient(to top,var(--tw-gradient-stops));bottom:0;display:block;padding:.75rem 1rem 1.5rem;position:absolute;width:100%}.background-hero-title-text{text-shadow:4px 4px 2px #000}@media screen and (min-width:768px){.background-hero-title-block-fit{padding-left:3rem;padding-right:3rem}.background-hero-image-div{height:85vh;max-height:85vh}}@media screen and (min-width:1024px){.background-hero-title-block-fit{padding-left:4rem;padding-right:4rem}.background-hero-image-div{height:95vh;max-height:95vh}}.text-nobrk,.text-nowrap{white-space:nowrap}article h1,article h2,article h3,article h4{letter-spacing:-.025em;margin-bottom:1.5rem;margin-top:2rem}article p{font-size:1.125rem;line-height:1.75rem;line-height:1.625}article img.containedImage{height:auto;max-width:100%;min-width:100%;width:100%}@media screen and (min-width:768px){.height-hero{height:70vh;max-height:70vh}.height-post{height:40vh;max-height:40vh}article p{font-size:1.25rem;line-height:1.75rem;line-height:1.625}}@media screen and (min-width:1920px){article p{font-size:1.5rem;line-height:2rem;line-height:1.625}}.yellowbox p{margin:0;padding:.5rem;width:100%}ol,ul{padding-left:2rem}ul{list-style-type:disc}ol{list-style-type:decimal}.twitter-tweet,table.leagues{margin:1rem auto 0}table.leagues{border-collapse:collapse;border-width:0;width:91.666667%}table.leagues td.col{width:50%}@media (min-width:900px){table.leagues{width:60%}table.noborders{width:91.666667%}}table.noborders{border-collapse:collapse;border-width:0;margin:1.5rem auto 1rem;width:100%}table.noborders td{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity));padding:.25rem 0 .25rem .5rem;text-align:left;vertical-align:middle}table.noborders td img{display:inline-block;margin:0;vertical-align:middle}table.noborders tr{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}table.noborders tr:nth-child(2n){--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}table.noborders thead tr{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}table.noborders thead td{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));font-weight:700}table.noborders td.td70{width:70%}table.noborders td.td70 img{display:block;height:auto;max-width:50%;width:50%}table.noborders td.td30{width:30%}.footnote-definition,.footnote-reference{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.footnote-reference{font-size:.65em;top:-.5em}.footnote-sim{color:#00f;font-size:.65em;@media (prefers-color-scheme:dark){color:#0af}}.footnotes{& ol{padding-inline-start:1.5rem}& ol li{font-size:$pokey;margin-bottom:.5rem}& li p{font-size:100%;line-height:1.4}& .footnote-backref{font-size:75%}}a.footnote-return{font-size:50%}article>.footnote-definition{border-top:1px solid #000;margin-top:1em;padding-top:1em}article>.footnote-definition~.footnote-definition{border-top:0;margin-top:0;padding-top:0}.footnote-definition-label{font-size:.65em;top:-.4em}.footnote-definition-label+p{font-size:75%;line-height:1.35;margin-left:1em;margin-top:-1.75em}.footnote-definition-label:after{content:"."}.aspect-16x9{padding-bottom:56.25%}footer{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.lazypicturecaption{font-size:.875rem;line-height:1.25rem;line-height:1.375;margin-top:.5rem;padding:0;text-align:center}.home-colOne p{line-height:2rem;margin-bottom:1rem}.home-colOne img{margin-bottom:1rem;margin-top:1rem}.container-comments{font-size:85%;margin:0 auto;max-width:720px!important;width:85%}@media screen and (min-width:900px){.container-comments{width:40%}}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}h1{font-size:1.875rem;font-weight:700;line-height:1rem;margin-bottom:1rem;margin-top:1rem}@media (min-width:1024px){h1{font-size:3rem;line-height:1}}@media (min-width:1280px){h1{font-size:4.5rem;line-height:1}}h1{font-family:lato,sans-serif;line-height:.9}h1 strong{font-weight:500}h2{font-size:1.875rem;font-weight:700;line-height:1rem;margin-bottom:1rem;margin-top:1rem}@media (min-width:768px){h2{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){h2{font-size:3.75rem;line-height:1}}h2{font-family:lato,sans-serif;line-height:.9}h2 strong{font-weight:500}h3{font-size:1.25rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;margin-top:1rem}@media (min-width:1024px){h3{font-size:1.875rem;line-height:2.25rem}}h3{color:#oab7a9}h3 strong{font-weight:500}h4{font-size:1.25rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;margin-top:1rem}@media (min-width:1024px){h4{font-size:1.5rem;line-height:2rem}}h4{color:#oab7a9}h5{font-size:1.25rem;font-weight:400;line-height:1.75rem}@media (min-width:1024px){h5{font-size:1.25rem;line-height:1.75rem}}h6{font-size:1.125rem;font-style:normal;font-weight:400;line-height:1.75rem;margin-bottom:.25rem;margin-top:.25rem}p{font-size:1rem;font-weight:400;letter-spacing:0;line-height:1.5rem;line-height:1.25;margin-bottom:0;margin-top:0}@media (min-width:1024px){p{font-size:1.125rem;line-height:1.75rem}}p{font-family:CercoDEMO,sans-serif}blockquote{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity));border-left-width:4px;margin:.5rem;padding:.5rem}li{font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:.5rem;margin-top:.5rem}@media (min-width:1024px){li{font-size:1.25rem;line-height:1.75rem}}li li{font-size:.875rem;font-weight:300;line-height:1.25rem}@media (min-width:1024px){li li{font-size:.875rem;line-height:1.25rem}}button{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);border-width:2px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:inline-block;font-size:1rem;line-height:1.5rem;margin-bottom:1rem;margin-top:1rem;padding:.25rem 2rem}@media (min-width:1024px){button{font-size:1.125rem;line-height:1.75rem}}article h2{font-size:1.25rem;font-weight:500;line-height:1.75rem}@media (min-width:1024px){article h2{font-size:1.875rem;line-height:2.25rem}}article p,li{font-size:1rem;line-height:1.5rem}@media (min-width:1024px){article p,li{font-size:1.125rem;line-height:1.75rem}}:root{--md-admonition-icon--note:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>');--md-admonition-icon--abstract:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9H7V7h10m0 6H7v-2h10m-3 6H7v-2h7M12 3a1 1 0 0 1 1 1 1 1 0 0 1-1 1 1 1 0 0 1-1-1 1 1 0 0 1 1-1m7 0h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/></svg>');--md-admonition-icon--info:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2z"/></svg>');--md-admonition-icon--tip:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.66 11.2c-.23-.3-.51-.56-.77-.82-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32-2.59 2.08-3.61 5.75-2.39 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5.14.6.41 1.2.71 1.73 1.08 1.73 2.95 2.97 4.96 3.22 2.14.27 4.43-.12 6.07-1.6 1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6-1.12.4-2.24-.16-2.9-.82 1.19-.28 1.9-1.16 2.11-2.05.17-.8-.15-1.46-.28-2.23-.12-.74-.1-1.37.17-2.06.19.38.39.76.63 1.06.77 1 1.98 1.44 2.24 2.8.04.14.06.28.06.43.03.82-.33 1.72-.93 2.27z"/></svg>');--md-admonition-icon--success:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 20.42-6.21-6.21 2.83-2.83L9 14.77l9.88-9.89 2.83 2.83L9 20.42z"/></svg>');--md-admonition-icon--question:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10z"/></svg>');--md-admonition-icon--warning:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2 1 21z"/></svg>');--md-admonition-icon--failure:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12 20 6.91z"/></svg>');--md-admonition-icon--danger:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15H6l7-14v8h5l-7 14v-8z"/></svg>');--md-admonition-icon--bug:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 12h-4v-2h4m0 6h-4v-2h4m6-6h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8z"/></svg>');--md-admonition-icon--example:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 13v-2h14v2H7m0 6v-2h14v2H7M7 7V5h14v2H7M3 8V5H2V4h2v4H3m-1 9v-1h3v4H2v-1h2v-.5H3v-1h1V17H2m2.25-7a.75.75 0 0 1 .75.75c0 .2-.08.39-.21.52L3.12 13H5v1H2v-.92L4 11H2v-1h2.25z"/></svg>');--md-admonition-icon--quote:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 17h3l2-4V7h-6v6h3M6 17h3l2-4V7H5v6h3l-2 4z"/></svg>');--md-details-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E")}:is(.admonition){background-color:var(--bg);border:0 solid #000;border-inline-start-width:.4rem;border-radius:.2rem;box-shadow:0 .2rem 1rem #0000000d,0 0 .1rem #0000001a;color:var(--fg);display:flow-root;margin:1.5625em 0;padding:0 1.2rem;page-break-inside:avoid}.admonition p{display:block;font-size:.8rem;margin-block-end:1em;margin-block-start:1em;margin-inline-end:0;margin-inline-start:0}@media print{:is(.admonition){box-shadow:none}}:is(.admonition)>*{box-sizing:border-box}:is(.admonition) :is(.admonition){margin-bottom:1em;margin-top:1em}:is(.admonition)>.tabbed-set:only-child{margin-top:0}html :is(.admonition)>:last-child{margin-bottom:1.2rem}:is(.admonition-title,summary){background-color:#448aff1a;border:0 solid #448aff;border-inline-start-width:.4rem;border-start-start-radius:.2rem;display:flex;font-weight:700;margin-block:0;margin-inline:-1.6rem -1.2rem;padding-block:.8rem;padding-inline:4rem 1.2rem;position:relative}:is(.admonition-title,summary)>p{margin:0}html :is(.admonition-title,summary):last-child{margin-bottom:0}:is(.admonition-title,summary):before{background-color:#448aff;content:"";height:1.4rem;inset-inline-start:1.2rem;mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"/>');-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"/>');mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;position:absolute;top:.625em;width:1.4rem}:is(.admonition):is(.note){border-color:#448aff}:is(.note)>:is(.admonition-title,summary){background-color:#448aff1a;border-color:#448aff}:is(.note)>:is(.admonition-title,summary):before{background-color:#448aff;mask-image:var(--md-admonition-icon--note);-webkit-mask-image:var(--md-admonition-icon--note);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.abstract,.summary,.tldr){border-color:#00b0ff}:is(.abstract,.summary,.tldr)>:is(.admonition-title,summary){background-color:#00b0ff1a;border-color:#00b0ff}:is(.abstract,.summary,.tldr)>:is(.admonition-title,summary):before{background-color:#00b0ff;mask-image:var(--md-admonition-icon--abstract);-webkit-mask-image:var(--md-admonition-icon--abstract);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.info,.todo){border-color:#00b8d4}:is(.info,.todo)>:is(.admonition-title,summary){background-color:#00b8d41a;border-color:#00b8d4}:is(.info,.todo)>:is(.admonition-title,summary):before{background-color:#00b8d4;mask-image:var(--md-admonition-icon--info);-webkit-mask-image:var(--md-admonition-icon--info);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.tip,.hint,.important){border-color:#00bfa5}:is(.tip,.hint,.important)>:is(.admonition-title,summary){background-color:#00bfa51a;border-color:#00bfa5}:is(.tip,.hint,.important)>:is(.admonition-title,summary):before{background-color:#00bfa5;mask-image:var(--md-admonition-icon--tip);-webkit-mask-image:var(--md-admonition-icon--tip);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.success,.check,.done){border-color:#00c853}:is(.success,.check,.done)>:is(.admonition-title,summary){background-color:#00c8531a;border-color:#00c853}:is(.success,.check,.done)>:is(.admonition-title,summary):before{background-color:#00c853;mask-image:var(--md-admonition-icon--success);-webkit-mask-image:var(--md-admonition-icon--success);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.question,.help,.faq){border-color:#64dd17}:is(.question,.help,.faq)>:is(.admonition-title,summary){background-color:#64dd171a;border-color:#64dd17}:is(.question,.help,.faq)>:is(.admonition-title,summary):before{background-color:#64dd17;mask-image:var(--md-admonition-icon--question);-webkit-mask-image:var(--md-admonition-icon--question);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.warning,.caution,.attention){border-color:#ff9100}:is(.warning,.caution,.attention)>:is(.admonition-title,summary){background-color:#ff91001a;border-color:#ff9100}:is(.warning,.caution,.attention)>:is(.admonition-title,summary):before{background-color:#ff9100;mask-image:var(--md-admonition-icon--warning);-webkit-mask-image:var(--md-admonition-icon--warning);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.failure,.fail,.missing){border-color:#ff5252}:is(.failure,.fail,.missing)>:is(.admonition-title,summary){background-color:#ff52521a;border-color:#ff5252}:is(.failure,.fail,.missing)>:is(.admonition-title,summary):before{background-color:#ff5252;mask-image:var(--md-admonition-icon--failure);-webkit-mask-image:var(--md-admonition-icon--failure);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.danger,.error){border-color:#ff1744}:is(.danger,.error)>:is(.admonition-title,summary){background-color:#ff17441a;border-color:#ff1744}:is(.danger,.error)>:is(.admonition-title,summary):before{background-color:#ff1744;mask-image:var(--md-admonition-icon--danger);-webkit-mask-image:var(--md-admonition-icon--danger);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.bug){border-color:#f50057}:is(.bug)>:is(.admonition-title,summary){background-color:#f500571a;border-color:#f50057}:is(.bug)>:is(.admonition-title,summary):before{background-color:#f50057;mask-image:var(--md-admonition-icon--bug);-webkit-mask-image:var(--md-admonition-icon--bug);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.example){border-color:#7c4dff}:is(.example)>:is(.admonition-title,summary){background-color:#7c4dff1a;border-color:#7c4dff}:is(.example)>:is(.admonition-title,summary):before{background-color:#7c4dff;mask-image:var(--md-admonition-icon--example);-webkit-mask-image:var(--md-admonition-icon--example);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}:is(.admonition):is(.quote,.cite){border-color:#9e9e9e}:is(.quote,.cite)>:is(.admonition-title,summary){background-color:#9e9e9e1a;border-color:#9e9e9e}:is(.quote,.cite)>:is(.admonition-title,summary):before{background-color:#9e9e9e;mask-image:var(--md-admonition-icon--quote);-webkit-mask-image:var(--md-admonition-icon--quote);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.navy :is(.admonition){background-color:var(--sidebar-bg)}.ayu :is(.admonition),.coal :is(.admonition){background-color:var(--theme-hover)}.rust :is(.admonition){background-color:var(--sidebar-bg);color:var(--sidebar-fg)}:is(.admonition-title){font-feature-settings:"kern","liga";border:none;font-size:.84rem;font-weight:600;padding:10px 50px}:is(summary):after{background-color:#000;content:"";height:1.4rem;mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"/>');-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"/>');mask-image:var(--md-details-icon);-webkit-mask-image:var(--md-details-icon);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;position:absolute;right:.4rem;top:.625em;transform:rotate(-90deg);transition:transform .25s;width:1.4rem}details[open]>summary:after{transform:rotate(0deg)}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-x-0{left:0;right:0}.left-0{left:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.order-first{order:-9999}.order-last{order:9999}.col-span-3{grid-column:span 3/span 3}.m-0{margin:0}.m-2{margin:.5rem}.-mx-8{margin-left:-2rem;margin-right:-2rem}.-my-2{margin-bottom:-.5rem;margin-top:-.5rem}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-20{margin-left:5rem;margin-right:5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-8{margin-left:2rem;margin-right:2rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.my-1{margin-bottom:.25rem;margin-top:.25rem}.my-10{margin-bottom:2.5rem;margin-top:2.5rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.my-8{margin-bottom:2rem;margin-top:2rem}.-ml-1{margin-left:-.25rem}.-mr-2{margin-right:-.5rem}.-mt-16{margin-top:-4rem}.-mt-24{margin-top:-6rem}.-mt-6{margin-top:-1.5rem}.mb-0{margin-bottom:0}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-10{margin-left:2.5rem}.ml-5{margin-left:1.25rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-5{margin-right:1.25rem}.mr-8{margin-right:2rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.line-clamp-3{-webkit-box-orient:vertical;-webkit-line-clamp:3;display:-webkit-box;overflow:hidden}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1\/3{height:33.333333%}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-80{max-height:20rem}.max-h-screen{max-height:100vh}.min-h-screen{min-height:100vh}.w-0{width:0}.w-1\/12{width:8.333333%}.w-10{width:2.5rem}.w-11\/12{width:91.666667%}.w-12{width:3rem}.w-2\/6{width:33.333333%}.w-3\/4{width:75%}.w-32{width:8rem}.w-4{width:1rem}.w-4\/6{width:66.666667%}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.max-w-7xl{max-width:80rem}.max-w-fit{max-width:-moz-fit-content;max-width:fit-content}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-screen-2xl{max-width:1536px}.max-w-screen-md{max-width:768px}.max-w-screen-sm{max-width:640px}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.origin-top-right{transform-origin:top right}.-translate-y-1{--tw-translate-y:-0.25rem}.-rotate-90,.-translate-y-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-rotate-90{--tw-rotate:-90deg}.rotate-180{--tw-rotate:180deg}.rotate-180,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2.5rem*var(--tw-space-x-reverse))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.5rem*var(--tw-space-x-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-y-2>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(2px*var(--tw-divide-y-reverse));border-top-width:calc(2px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-50>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(249 250 251/var(--tw-divide-opacity))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.truncate{overflow:hidden;white-space:nowrap}.text-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-l-md{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.rounded-r-md{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.border-gray-600{--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.\!bg-\[length\:0px_0px\]{background-size:0 0!important}.bg-contain{background-size:contain}.bg-center{background-position:50%}.\!bg-no-repeat{background-repeat:no-repeat!important}.bg-no-repeat{background-repeat:no-repeat}.object-cover{-o-object-fit:cover;object-fit:cover}.object-center{-o-object-position:center;object-position:center}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-0{padding-left:0;padding-right:0}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-bottom:0;padding-top:0}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-16{padding-bottom:4rem;padding-top:4rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-28{padding-bottom:7rem;padding-top:7rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-24{padding-bottom:6rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pl-0{padding-left:0}.pl-1{padding-left:.25rem}.pl-12{padding-left:3rem}.pl-20{padding-left:5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pr-2{padding-right:.5rem}.pr-20{padding-right:5rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-24{padding-top:6rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.not-italic{font-style:normal}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.leading-9{line-height:2.25rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.\!shadow-none{--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid #0000;outline-offset:2px}.ring-indigo-300{--tw-ring-opacity:1;--tw-ring-color:rgb(165 180 252/var(--tw-ring-opacity))}.grayscale{--tw-grayscale:grayscale(100%)}.filter,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-shadow{transition-duration:.15s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-75{transition-duration:75ms}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.backdrop-blur{-webkit-backdrop-filter:blur(40px)}*{font-family:Lato,sans-serif}.bg-semi-white{background-color:#ffffffbf}img[src*="#mx-auto"]{margin:auto}img[src*="#small"]{width:68px}img[src*="#sm"]{width:200px}img[src*="#md"]{width:300px}img[src*="#medium"]{width:500px}img[src*="#logo"]{margin:auto;max-width:min(250px,100%)}img[src*="#large"]{margin:auto;width:min(60vw,100vh)}img[src*="#fill"]{height:100%;width:100%}img[src*="#tft_img"]{margin:8px;width:150px}img[src*="#icon"]{margin:4px;width:65px}img[src*="#fig"]{width:150px}.logo_size{width:200px}.advance{font-family:lato}a:hover,button:hover{color:#737373}button{font-weight:500}.experience-btn{border:none;color:#000;margin:0;padding:20px;width:-moz-fit-content;width:fit-content}.experience-btn p{font-size:1.125rem;line-height:1.75rem}.experience-btn:hover{background:#fff}.experience-btn h4{white-space:normal}header .customize{background-color:initial;position:absolute}footer .customize{align-items:center;background-color:#17b9c8;color:#fff;display:flex;flex-direction:column;padding-bottom:24px;padding-top:24px}footer .customize img{width:60px}header .customize div{box-shadow:none;font-weight:700!important;text-transform:uppercase}button{background:#0000;border:2px solid #000;border-radius:4px;box-shadow:none;color:#000}a{border:none}header{font-family:Work Sans}.nav_btn{border:none!important;box-shadow:none!important;margin:0!important;padding:0!important}.quicklinks{align-items:center;border-radius:10px;box-sizing:border-box;display:inline-block;flex-wrap:wrap;margin:30px auto 20px;width:auto}.quicklinks img{display:inline-block;filter:grayscale(100%);height:auto;margin-right:30px;max-width:200px;opacity:.5;padding:10px;position:relative;transition:all .2s ease}.quicklinks img:hover{filter:grayscale(0);opacity:1;transition:all .2s ease}.banner{background:#00838d;color:#fff!important;display:block;letter-spacing:.5px;margin:0;overflow:hidden;padding:120px 0;position:relative;text-align:center;transition:1.5s;width:100%}.header{background:none;height:auto;padding:200px 0}.banner h2,.header h1{color:#fff;margin:auto;position:relative;transition:.3s;white-space:nowrap;z-index:1}.header h1{color:#000;transition:none}.banner h2 svg{font-size:40px;margin-left:15px;opacity:0;position:absolute;top:55%;transform:translateY(-50%) scale(.5);transition:.3s}.banner .back{filter:grayscale(1) contrast(1.4);height:100%;left:0;opacity:.25;position:absolute;top:0;transition:1.5s;width:100%}.banner .back,.header .back{background-position:50%;background-size:cover}.header .back{background-repeat:no-repeat;filter:none;opacity:1}.banner:hover{background:#4b3a92}.header:hover{background:none}.banner:hover h2 svg{opacity:1;transform:translateY(-50%) scale(1)}.banner:hover h2{padding-right:40px}.header:hover h1{padding-right:0}.banner:hover .back{transform:scale(1.03)}.header:hover .back{transform:none}@media (max-width:640px){.banner h2{font:600 7vw/10vw}.header h1{font-size:35px}.banner h2 svg{font-size:30px}}@media (max-width:480px){.banner,.header{padding:80px 0}footer{text-align:center}}.focus-within\:outline-none:focus-within{outline:2px solid #0000;outline-offset:2px}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-indigo-500:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.focus-within\:ring-offset-2:focus-within{--tw-ring-offset-width:2px}.hover\:border-blue-500:hover{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.hover\:border-stone-200:hover{--tw-border-opacity:1;border-color:rgb(231 229 228/var(--tw-border-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.hover\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.hover\:bg-indigo-600:hover{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity))}.hover\:bg-indigo-700:hover{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity))}.hover\:bg-stone-100:hover{--tw-bg-opacity:1;background-color:rgb(245 245 244/var(--tw-bg-opacity))}.hover\:\!text-gray-700:hover{--tw-text-opacity:1!important;color:rgb(55 65 81/var(--tw-text-opacity))!important}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity))}.hover\:text-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}.hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-indigo-100:hover{--tw-text-opacity:1;color:rgb(224 231 255/var(--tw-text-opacity))}.hover\:text-indigo-500:hover{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}.hover\:text-indigo-600:hover{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:first\:text-gray-500:first-child:hover{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}.focus\:bg-gray-100:focus{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.focus\:bg-gray-200:focus{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.focus\:text-gray-500:focus{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.focus\:text-gray-900:focus{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.focus-visible\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\:bg-gray-200:active{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.active\:bg-indigo-700:active{--tw-bg-opacity:1;background-color:rgb(67 56 202/var(--tw-bg-opacity))}.active\:bg-indigo-800:active{--tw-bg-opacity:1;background-color:rgb(55 48 163/var(--tw-bg-opacity))}.active\:text-gray-700:active{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.active\:text-indigo-200:active{--tw-text-opacity:1;color:rgb(199 210 254/var(--tw-text-opacity))}.active\:text-indigo-700:active{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity))}@media (prefers-color-scheme:dark){.dark\:bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.dark\:bg-transparent{background-color:initial}.dark\:text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}.dark\:hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.dark\:focus\:text-white:focus,.dark\:hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}}@media (min-width:640px){.sm\:absolute{position:absolute}.sm\:right-0{right:0}.sm\:order-none{order:0}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:-mx-12{margin-left:-3rem;margin-right:-3rem}.sm\:-mx-4{margin-left:-1rem;margin-right:-1rem}.sm\:mx-0{margin-left:0;margin-right:0}.sm\:mx-16{margin-left:4rem;margin-right:4rem}.sm\:mx-20{margin-left:5rem;margin-right:5rem}.sm\:mx-32{margin-left:8rem;margin-right:8rem}.sm\:mx-8{margin-left:2rem;margin-right:2rem}.sm\:mb-0{margin-bottom:0}.sm\:mr-1{margin-right:.25rem}.sm\:mt-0{margin-top:0}.sm\:flex{display:flex}.sm\:h-10{height:2.5rem}.sm\:h-2\/3{height:66.666667%}.sm\:h-40{height:10rem}.sm\:h-auto{height:auto}.sm\:w-1\/2{width:50%}.sm\:w-10{width:2.5rem}.sm\:w-auto{width:auto}.sm\:flex-1{flex:1 1 0%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:flex-nowrap{flex-wrap:nowrap}.sm\:content-evenly{align-content:space-evenly}.sm\:items-center{align-items:center}.sm\:justify-center{justify-content:center}.sm\:gap-0{gap:0}.sm\:gap-10{gap:2.5rem}.sm\:gap-3{gap:.75rem}.sm\:space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.sm\:overflow-hidden{overflow:hidden}.sm\:rounded-md{border-radius:.375rem}.sm\:p-0{padding:0}.sm\:p-12{padding:3rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:px-0{padding-left:0;padding-right:0}.sm\:px-12{padding-left:3rem;padding-right:3rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-8{padding-top:2rem}.sm\:pb-8,.sm\:py-8{padding-bottom:2rem}.sm\:pr-8{padding-right:2rem}.sm\:text-center{text-align:center}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:order-2{order:2}.md\:col-span-2{grid-column:span 2/span 2}.md\:-mx-12{margin-left:-3rem;margin-right:-3rem}.md\:-mx-16{margin-left:-4rem;margin-right:-4rem}.md\:mx-0{margin-left:0;margin-right:0}.md\:mx-12{margin-left:3rem;margin-right:3rem}.md\:mx-16{margin-left:4rem;margin-right:4rem}.md\:mx-20{margin-left:5rem;margin-right:5rem}.md\:mx-28{margin-left:7rem;margin-right:7rem}.md\:mx-4{margin-left:1rem;margin-right:1rem}.md\:mx-40{margin-left:10rem;margin-right:10rem}.md\:mx-8{margin-left:2rem;margin-right:2rem}.md\:-mt-1{margin-top:-.25rem}.md\:mb-0{margin-bottom:0}.md\:mb-10{margin-bottom:2.5rem}.md\:mb-12{margin-bottom:3rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-4{margin-bottom:1rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:mt-0{margin-top:0}.md\:block{display:block}.md\:inline{display:inline}.md\:flex{display:flex}.md\:grid{display:grid}.md\:h-14{height:3.5rem}.md\:h-24{height:6rem}.md\:h-6{height:1.5rem}.md\:h-80{height:20rem}.md\:w-1\/6{width:16.666667%}.md\:w-14{width:3.5rem}.md\:w-2\/3{width:66.666667%}.md\:w-2\/6{width:33.333333%}.md\:w-4\/6{width:66.666667%}.md\:w-48{width:12rem}.md\:w-5\/6{width:83.333333%}.md\:w-6{width:1.5rem}.md\:w-auto{width:auto}.md\:w-full{width:100%}.md\:max-w-full{max-width:100%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-12{gap:3rem}.md\:gap-16{gap:4rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:rounded-xl{border-radius:.75rem}.md\:p-8{padding:2rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-16{padding-left:4rem;padding-right:4rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-3{padding-bottom:.75rem;padding-top:.75rem}.md\:py-4{padding-bottom:1rem;padding-top:1rem}.md\:py-8{padding-bottom:2rem;padding-top:2rem}.md\:pl-0{padding-left:0}.md\:pl-2{padding-left:.5rem}.md\:pl-6{padding-left:1.5rem}.md\:pl-8{padding-left:2rem}.md\:pr-0{padding-right:0}.md\:text-left{text-align:left}.md\:text-right{text-align:right}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:first\:px-8:first-child,.md\:last\:px-8:last-child{padding-left:2rem;padding-right:2rem}}@media (min-width:1024px){.lg\:m-4{margin:1rem}.lg\:-mx-12{margin-left:-3rem;margin-right:-3rem}.lg\:-mx-16{margin-left:-4rem;margin-right:-4rem}.lg\:-mx-20{margin-left:-5rem;margin-right:-5rem}.lg\:mx-0{margin-left:0;margin-right:0}.lg\:mx-16{margin-left:4rem;margin-right:4rem}.lg\:mx-20{margin-left:5rem;margin-right:5rem}.lg\:mx-24{margin-left:6rem;margin-right:6rem}.lg\:mx-28{margin-left:7rem;margin-right:7rem}.lg\:mx-4{margin-left:1rem;margin-right:1rem}.lg\:mx-40{margin-left:10rem;margin-right:10rem}.lg\:mx-6{margin-left:1.5rem;margin-right:1.5rem}.lg\:mx-80{margin-left:20rem;margin-right:20rem}.lg\:my-32{margin-bottom:8rem;margin-top:8rem}.lg\:-mt-6{margin-top:-1.5rem}.lg\:mb-0{margin-bottom:0}.lg\:mb-8{margin-bottom:2rem}.lg\:ml-8{margin-left:2rem}.lg\:mr-24{margin-right:6rem}.lg\:mr-8{margin-right:2rem}.lg\:mt-0{margin-top:0}.lg\:mt-10{margin-top:2.5rem}.lg\:mt-12{margin-top:3rem}.lg\:mt-16{margin-top:4rem}.lg\:mt-20{margin-top:5rem}.lg\:mt-6{margin-top:1.5rem}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:h-auto{height:auto}.lg\:w-1\/2{width:50%}.lg\:w-2\/3{width:66.666667%}.lg\:w-2\/5{width:40%}.lg\:w-3\/5{width:60%}.lg\:w-4\/5{width:80%}.lg\:w-4\/6{width:66.666667%}.lg\:w-5\/6{width:83.333333%}.lg\:max-w-3xl{max-width:48rem}.lg\:max-w-4xl{max-width:56rem}.lg\:max-w-6xl{max-width:72rem}.lg\:max-w-\[50\%\]{max-width:50%}.lg\:max-w-none{max-width:none}.lg\:max-w-sm{max-width:24rem}.lg\:flex-1{flex:1 1 0%}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}.lg\:items-end{align-items:flex-end}.lg\:items-center{align-items:center}.lg\:justify-start{justify-content:flex-start}.lg\:justify-end{justify-content:flex-end}.lg\:space-x-12>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(3rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(3rem*var(--tw-space-x-reverse))}.lg\:space-x-20>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(5rem*var(--tw-space-x-reverse))}.lg\:\!bg-cover{background-size:cover!important}.lg\:p-12{padding:3rem}.lg\:px-20{padding-left:5rem;padding-right:5rem}.lg\:px-28{padding-left:7rem;padding-right:7rem}.lg\:px-40{padding-left:10rem;padding-right:10rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-1{padding-bottom:.25rem;padding-top:.25rem}.lg\:py-12{padding-bottom:3rem;padding-top:3rem}.lg\:py-16{padding-bottom:4rem;padding-top:4rem}.lg\:py-24{padding-bottom:6rem;padding-top:6rem}.lg\:py-5{padding-bottom:1.25rem;padding-top:1.25rem}.lg\:pb-12{padding-bottom:3rem}.lg\:pb-24{padding-bottom:6rem}.lg\:pb-28{padding-bottom:7rem}.lg\:pl-0{padding-left:0}.lg\:pt-16{padding-top:4rem}.lg\:pt-24{padding-top:6rem}.lg\:pt-6{padding-top:1.5rem}.lg\:pt-8{padding-top:2rem}.lg\:text-left{text-align:left}.lg\:text-right{text-align:right}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-3xl{font-size:1.875rem;line-height:2.25rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}.lg\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.lg\:backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.lg\:first\:px-20:first-child,.lg\:last\:px-20:last-child{padding-left:5rem;padding-right:5rem}}@media (min-width:1280px){.xl\:col-span-1{grid-column:span 1/span 1}.xl\:-mx-20{margin-left:-5rem;margin-right:-5rem}.xl\:-mx-8{margin-left:-2rem;margin-right:-2rem}.xl\:mx-20{margin-left:5rem;margin-right:5rem}.xl\:mx-96{margin-left:24rem;margin-right:24rem}.xl\:mb-12{margin-bottom:3rem}.xl\:mr-3{margin-right:.75rem}.xl\:mt-0{margin-top:0}.xl\:flex{display:flex}.xl\:w-5\/12{width:41.666667%}.xl\:max-w-sm{max-width:24rem}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:gap-16{gap:4rem}.xl\:gap-4{gap:1rem}.xl\:p-12{padding:3rem}.xl\:py-24{padding-bottom:6rem;padding-top:6rem}.xl\:text-lg{font-size:1.125rem;line-height:1.75rem}.xl\:text-xl{font-size:1.25rem;line-height:1.75rem}.xl\:backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}}@media (min-width:1536px){.\32xl\:mt-0{margin-top:0}.\32xl\:pt-24{padding-top:6rem}}
\ No newline at end of file
diff --git a/static/fonts/BebasNeue-Bold.ttf b/static/fonts/BebasNeue-Bold.ttf
new file mode 100644
index 0000000..6fff605
Binary files /dev/null and b/static/fonts/BebasNeue-Bold.ttf differ
diff --git a/static/fonts/CercoDEMO-Bold.otf b/static/fonts/CercoDEMO-Bold.otf
new file mode 100644
index 0000000..37f437d
Binary files /dev/null and b/static/fonts/CercoDEMO-Bold.otf differ
diff --git a/static/fonts/CercoDEMO-Light.otf b/static/fonts/CercoDEMO-Light.otf
new file mode 100644
index 0000000..0e74f02
Binary files /dev/null and b/static/fonts/CercoDEMO-Light.otf differ
diff --git a/static/fonts/CercoDEMO-Medium.otf b/static/fonts/CercoDEMO-Medium.otf
new file mode 100644
index 0000000..801f6fa
Binary files /dev/null and b/static/fonts/CercoDEMO-Medium.otf differ
diff --git a/static/images/favicon.ico b/static/images/favicon.ico
new file mode 100644
index 0000000..ff4a519
Binary files /dev/null and b/static/images/favicon.ico differ
diff --git a/content/footer/img/logo_dunia_2.jpeg b/static/images/logo.jpeg
similarity index 100%
rename from content/footer/img/logo_dunia_2.jpeg
rename to static/images/logo.jpeg
diff --git a/content/header/img/logo_dunia.jpeg b/static/images/logoheader.jpeg
similarity index 100%
rename from content/header/img/logo_dunia.jpeg
rename to static/images/logoheader.jpeg
diff --git a/static/js/custom.js b/static/js/custom.js
new file mode 100644
index 0000000..539be5b
--- /dev/null
+++ b/static/js/custom.js
@@ -0,0 +1,110 @@
+var displayedMenu = "";
+var hamburgerShown = false;
+let width = screen.width;
+var isMobile = width < 1024;
+
+function toggleMenu(button) {
+  if (displayedMenu === button.id.split("-")[0]) {
+    button.className = button.className.replace(
+      " text-blue-500 bg-stone-200 sm:bg-transparent",
+      " text-gray-900"
+    );
+    hideMenu(button.id.split("-")[0]);
+    button.lastElementChild.className = button.lastElementChild.className.replace(
+      "rotate-0",
+      "-rotate-90"
+    );
+    displayedMenu = "";
+  } else {
+    showMenu(button.id.split("-")[0]);
+    button.lastElementChild.className = button.lastElementChild.className.replace(
+      "-rotate-90",
+      "rotate-0"
+    );
+    button.className = button.className.replace(
+      " text-gray-900",
+      " text-blue-500 bg-stone-200 sm:bg-transparent"
+    );
+    displayedMenu = button.id.split("-")[0];
+  }
+}
+
+function handleClick(button) {
+  if (button.id === "hamburger-btn" || button.id === "close-hamburger-btn") {
+    toggleHamburger();
+  }
+  if (button.id.indexOf("menu") !== -1) {
+    toggleMenu(button);
+  }
+}
+
+function toggleHamburger() {
+  if (hamburgerShown) {
+    hideHamburger();
+    hamburgerShown = false;
+  } else {
+    showHamburger();
+    hamburgerShown = true;
+  }
+}
+
+function showMenu(menuName) {
+  var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
+  var menuBtnId = menuName + (isMobile ? "-mobile-menu" : "-menu");
+  var menuElement = document.getElementById(menuId);
+  menuElement.className = menuElement.className.replace(" hidden", "");
+  setTimeout(function () {
+    menuElement.className = menuElement.className.replace(
+      "duration-200 ease-in opacity-0 -translate-y-1",
+      "duration-150 ease-out opacity-1 -translate-y-0"
+    );
+  }, 10);
+}
+
+function hideMenu(menuName) {
+  var menuId = menuName + (isMobile ? "-mobile-menu" : "-menu");
+  var menuElement = document.getElementById(menuId);
+  menuElement.className = menuElement.className.replace(
+    "duration-150 ease-out opacity-1 -translate-y-0",
+    "duration-200 ease-in opacity-0 -translate-y-1"
+  );
+  setTimeout(function () {
+    menuElement.className = menuElement.className + " hidden";
+  }, 300);
+}
+
+function showHamburger() {
+  document.getElementById("header-container").className = "overflow-hidden";
+  document.getElementById("hamburger").className =
+    "fixed mt-2 z-20 top-0 inset-x-0 transition transform origin-top-right";
+  document.getElementById("hamburger-btn").className =
+    "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+  document.getElementById("close-hamburger-btn").className =
+    "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+}
+
+function hideHamburger() {
+  document.getElementById("header-container").className = "";
+  document.getElementById("hamburger").className =
+    "hidden absolute z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden";
+  document.getElementById("hamburger-btn").className =
+    "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+  document.getElementById("close-hamburger-btn").className =
+    "hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2";
+  if (displayedMenu !== "") {
+    hideMenu(displayedMenu);
+  }
+}
+
+window.onload = function () {
+  let elements = document.getElementsByTagName("button");
+  let buttons = [...elements];
+  buttons.forEach((button) => {
+    button.addEventListener("click", function () {
+      handleClick(button);
+    });
+  });
+  document
+    .getElementById("mobile-learn-btn")
+    ?.addEventListener("click", toggleMenu);
+};
diff --git a/tailwind.config copy.js b/tailwind.config copy.js
new file mode 100644
index 0000000..a08b26c
--- /dev/null
+++ b/tailwind.config copy.js	
@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./templates/**/*.html', './content/**/*.md'],
+  safelist: [
+    {
+        pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
+        variants: ['sm', 'md', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
+    },
+    {
+        pattern: /(pt|pb)-(0)/,
+        variants: ['!', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
+    }
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..ba15afc
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./templates/**/*.html'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/tailwindcss b/tailwindcss
new file mode 100755
index 0000000..d4d4092
Binary files /dev/null and b/tailwindcss differ
diff --git a/templates/_default/base.html b/templates/_default/base.html
new file mode 100644
index 0000000..4e391c4
--- /dev/null
+++ b/templates/_default/base.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" charset="utf-8">
+
+    {% include "partials/head.html" %}
+    
+    <body>
+        {% include "partials/header.html" %}
+        <div id="content" class="p-4 pt-24 sm:p-12 overflow-hidden">
+            {% block content %}{% endblock %}    
+        </div>
+        {% include "partials/footer.html" %}
+        <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/templates/blogPage.html b/templates/blogPage.html
new file mode 100644
index 0000000..85f09a1
--- /dev/null
+++ b/templates/blogPage.html
@@ -0,0 +1,82 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% if page.taxonomies.people %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(page.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ page.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% endif %}
+{% endif %}
+
+<!-- Default page template for blog posts and basic informative markdown files -->
+
+{% set split = page.content | split(pat="threefold.io") %}
+{% if split | length < 2 %} {% set content=page.content %} {% else %} {% set content="" %} {% for part in split %} {% if
+  part is starting_with("/blog") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set
+  link=link | replace(from="/blog/post" , to="/blog" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set
+  rest_part=split_part | slice(start=1) | join(sep='/"' ) %} {% set part=link ~ '/">' ~ rest_part %} {% endif %} {% if
+  loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "threefold.io" ~ part%} {% endif
+  %} {% endfor %} {% endif %} <main>
+
+  <div class="container mx-auto mt-2 lg:mt-20">
+
+    <div>
+      <article class="article lg:w-4/6 mx-auto">
+        <h1 class="lg:text-4xl text-2xl font-medium leading-none mt-0  text-gray-700">
+          {{ page.title }}
+        </h1>
+
+        <h4 class="lg:text-xl text-base text-gray-600 leading-8">
+          {{ page.description }}
+        </h4>
+        <section class="post-author-list mb-3 mx-0">
+          <div class="flex items-center">
+            <div class="flex justify-between items-center">
+              <ul class="list-none flex author-list m-0">
+                <li class="author-list-item">
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <img src="{{author_img}}" alt="{{author.title}}" class="
+                        h-8
+                        w-8
+                        sm:h-10
+                        sm:w-10
+                        rounded-full
+                        bg-gray-200
+                        border-2 border-white
+                      " />
+                </li>
+                {% endif %}
+              </ul>
+            </div>
+
+            <div class="pl-3 flex flex-col text-xs leading-none uppercase">
+              {% if author %}
+              <a href="{{author.permalink}}" class="text-gray-700 text-xs">{{ author.title }}</a>
+              {% endif %}
+              <p class="text-gray-700 text-xs">
+                <time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago")
+                  }}</time><br />
+                  <span id="time"
+                    class="time"></span>
+              </p>
+            </div>
+
+          </div>
+          <div class="my-2 sharethis-inline-share-buttons"></div>
+        </section>
+        {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md',
+        to=page.extra.imgPath)) %}
+        <img class="mb-8 mx-auto" src={{img_url}} alt="{{page.title ~ 'Picture'}}">
+        <div>{{ content | safe }}</div>
+      </article>
+    </div>
+
+
+  </div>
+  </main>
+
+  {% endblock content %}
\ No newline at end of file
diff --git a/templates/categories/list.html b/templates/categories/list.html
new file mode 100644
index 0000000..f628a84
--- /dev/null
+++ b/templates/categories/list.html
@@ -0,0 +1,4 @@
+{% extends "index.html" %}
+
+{% block content %}
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/categories/single.html b/templates/categories/single.html
new file mode 100644
index 0000000..48b5d0c
--- /dev/null
+++ b/templates/categories/single.html
@@ -0,0 +1,14 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<main class="pt-16">
+
+    <div class="flex flex-col md:flex-row">
+        {# {% include "partials/blogPosts.html" %} #}
+        {# {% include "partials/blogSidebar.html" %} #}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..48461be
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,9 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<!-- home page template, has a banner and rows of page summaries -->
+<div class="">
+    {% set page = get_page(path="home/index.md") %}
+    {{page.content | safe}}
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/items/list.html b/templates/items/list.html
new file mode 100644
index 0000000..f628a84
--- /dev/null
+++ b/templates/items/list.html
@@ -0,0 +1,4 @@
+{% extends "index.html" %}
+
+{% block content %}
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/items/single.html b/templates/items/single.html
new file mode 100644
index 0000000..19f29a1
--- /dev/null
+++ b/templates/items/single.html
@@ -0,0 +1,14 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<main class="pt-16">
+
+    <div class="flex flex-col md:flex-row">
+        {% include "partials/productPosts.html" %}
+        {% include "partials/productSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+
diff --git a/templates/layouts/blog.html b/templates/layouts/blog.html
new file mode 100644
index 0000000..62c113a
--- /dev/null
+++ b/templates/layouts/blog.html
@@ -0,0 +1,30 @@
+{% extends "_default/base.html" %}
+<!-- blog template
+the template for displaying the blog page.
+consists of a featured blog row, 
+a paginated list of posts (sorted by date), 
+and a side nav for category and featured post navigation
+-->
+
+{% block content %}
+
+<main>
+
+    <!--sets global featured variable as the most recent post with the isFeatured tag-->
+    {%- set section = get_section(path="blog/_index.md") %}
+    {% for page in section.pages %}
+    {% if page.extra.isFeatured %}
+        {%- set_global featured = page %}
+        {% break %}
+    {% endif %}
+    {% endfor %}
+    
+    {% include "partials/featuredBlog.html" %}
+
+    <div class="flex flex-col md:flex-row container mx-auto">
+        {% include "partials/blogPosts.html" %}
+        {% include "partials/blogSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
diff --git a/templates/layouts/horizontal_section.html b/templates/layouts/horizontal_section.html
new file mode 100644
index 0000000..ca84bf8
--- /dev/null
+++ b/templates/layouts/horizontal_section.html
@@ -0,0 +1,18 @@
+{% extends "_default/base.html" %}
+{% import "macros.html" as macros %}
+
+{% block content %}
+
+<main class="lg:mt-6">
+    <div class="flex">
+        <div class="w-4/6 pr-20">
+            {{ section.content | safe}}
+        </div>
+        <div class="w-2/6 pl-20">
+            {{ macros::page_list(item_type="page-box", group=false) }}
+        </div>
+    </div>
+    <hr>
+</main> 
+ 
+{% endblock content %}
diff --git a/templates/layouts/newsroom.html b/templates/layouts/newsroom.html
new file mode 100644
index 0000000..b243a29
--- /dev/null
+++ b/templates/layouts/newsroom.html
@@ -0,0 +1,33 @@
+{% extends "_default/base.html" %}
+<!-- News template
+the template for displaying the news page.
+consists of a featured news row, 
+a paginated list of posts (sorted by date), 
+and a side nav for category and featured post navigation
+-->
+
+{% block content %}
+
+<main>
+
+    <!--sets global featured variable as the most recent post with the isFeatured tag-->
+    {%- set section = get_section(path="newsroom/_index.md") %}
+    {% for page in section.pages %}
+    {% if page.extra.isFeatured %}
+        {%- set_global featured = page %}
+        {% break %}
+    {% endif %}
+    {% if not featured %} 
+        {%- set_global featured = section.pages[0] %}
+    {% endif %}
+    {% endfor %}
+    
+    {% include "partials/featuredNews.html" %}
+
+    <div class="flex flex-col md:flex-row container mx-auto">
+        {% include "partials/newsPosts.html" %}
+        {% include "partials/newsSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
diff --git a/templates/layouts/people.html b/templates/layouts/people.html
new file mode 100644
index 0000000..abd7d50
--- /dev/null
+++ b/templates/layouts/people.html
@@ -0,0 +1,83 @@
+{% extends "_default/base.html" %}
+<!-- partners template
+the template for displaying the partners page.
+consists of a featured partners row, 
+a paginated list of posts (sorted by date), 
+and a side nav for category and featured post navigation
+-->
+
+{% block content %}
+
+<main>
+
+    <!--sets global featured variable as the most recent post with the isFeatured tag-->
+    {%- set section = get_section(path="people/_index.md") %}
+    <div class="container mx-auto">
+      {% include "partials/filter_bar.html" %}
+      <div class="text-center main-title px-0 md:w-full">
+        <h1
+          class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+        >
+        {% set path_array = current_path | split(pat="/") %}
+        {% set taxonomy = path_array[1] %}
+        {% set category = path_array[2] %}
+          {{category | replace(from='-', to=' ' ) | title}}
+        </h1>
+        <div>
+          <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none">
+            {%- for page in paginator.pages %} 
+            {% if "Engineering" == "Engineering"%}
+                  {% include "partials/personCard.html" %} 
+              {%endif%} {%- endfor %}
+          </div>
+          <hr class="mt-6" />
+          <p class="text-center text-sm mt-2 mb-16">
+            {% if paginator.previous %}
+            <a
+              class="border-transparent"
+              aria-label="First page"
+              href="{{ paginator.first }}"
+              >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+              "partials/icons/svgPrevPageIcon.html" %}</a
+            >
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <a
+              class="border-transparent"
+              aria-label="Previous page"
+              href="{{ paginator.previous }}"
+              >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+            >
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+            include "partials/icons/svgFirstPageIcon.html" %}{% include
+            "partials/icons/svgFirstPageIcon.html" %}
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+            "partials/icons/svgFirstPageIcon.html" %}
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+            paginator.next %}
+            <a
+              class="border-transparent"
+              aria-label="Next page"
+              href="{{ paginator.next }}"
+              >{% include "partials/icons/svgNextPageIcon.html" %}</a
+            >
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <a
+              class="border-transparent"
+              aria-label="Last page"
+              href="{{ paginator.last }}"
+              >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+              "partials/icons/svgNextPageIcon.html" %}</a
+            >
+            {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+            "partials/icons/svgLastPageIcon.html" %}{% include
+            "partials/icons/svgLastPageIcon.html" %} {% endif %}
+          </p>
+        </div>
+      </div>
+    </div>
+ </main> 
+ 
+ {% endblock content %}
\ No newline at end of file
diff --git a/templates/layouts/products.html b/templates/layouts/products.html
new file mode 100644
index 0000000..5d881c0
--- /dev/null
+++ b/templates/layouts/products.html
@@ -0,0 +1,30 @@
+{% extends "_default/base.html" %}
+<!-- blog template
+the template for displaying the blog page.
+consists of a featured blog row, 
+a paginated list of posts (sorted by date), 
+and a side nav for category and featured post navigation
+-->
+
+{% block content %}
+
+<main>
+
+    <!--sets global featured variable as the most recent post with the isFeatured tag-->
+    {%- set section = get_section(path="products/_index.md") %}
+    {% for page in section.pages %}
+    {% if page.extra.isFeatured %}
+        {%- set_global featured = page %}
+        {% break %}
+    {% endif %}
+    {% endfor %}
+    
+    {% include "partials/featuredProduct.html" %}
+
+    <div class="flex flex-col md:flex-row container mx-auto">
+        {% include "partials/productPosts.html" %}
+        {% include "partials/productSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
diff --git a/templates/list.html b/templates/list.html
new file mode 100644
index 0000000..56e8399
--- /dev/null
+++ b/templates/list.html
@@ -0,0 +1,14 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<!-- Page template for blog posts and basic informative markdown files -->
+<h1 class="title">
+  {{ section.title }}
+</h1>
+<ul>
+  {% for page in section.pages %}
+  <li>{{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }} &bull; <a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
+  {% endfor %}
+</ul>
+<p>This comes from /templates/_default/list.html.</p>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/macros.html b/templates/macros.html
new file mode 100644
index 0000000..c349733
--- /dev/null
+++ b/templates/macros.html
@@ -0,0 +1,28 @@
+{% macro page_list(type="text") %}
+    <div id="list"></div>
+    {% if section.extra.group_pages_by %}
+        <div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center">
+            {% set taxonomy = get_taxonomy(kind=section.extra.group_pages_by) %}
+            {% set roles = taxonomy.items %}
+            {% for role in roles %}
+            <div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72">
+                {% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %}
+                <img src="{{icon_path}}" alt="role category icon" class="h-10 my-4">
+                {% set path = role.name | slugify %}
+                {% set fullpath = "/roles/" ~ path %}
+                <a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a>
+                {% for page in role.pages %}
+                    {% include "partials/pageBox.html"%}
+                {% endfor %}
+            </div>
+            {% endfor %}
+        </div>
+    {% else %}
+        {% for page in section.pages %}
+            {{page}}
+            {% include "partials/pageBox.html"%}
+        {% endfor %}
+    {% endif %}
+{% endmacro page_list %}
+
+
diff --git a/templates/newsPage.html b/templates/newsPage.html
new file mode 100644
index 0000000..50aab42
--- /dev/null
+++ b/templates/newsPage.html
@@ -0,0 +1,143 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% set split = page.content | split(pat="threefold.io") %}
+{% if split | length < 2 %}
+    {% set content = page.content %}
+{% else %}
+    {% set content = "" %}
+    {% for part in split %}
+        {% if part is starting_with("/blog") %}
+            {% set split_part = part | split(pat='/">') %}
+            {% set link = split_part[0] %}
+            {% set link = link | replace(from="/blog/post", to="/blog") %}
+            {% set link = link | replace(from="_", to="-") %}
+            {% set rest_part = split_part | slice(start=1) | join(sep='/">') %}
+            {% set part = link ~ '/">' ~ rest_part %}
+        {% endif %}
+        {% if part is starting_with("/people") %}
+            {% set split_part = part | split(pat='/">') %}
+            {% set link = split_part[0] %}
+            {% set link = link | replace(from="_", to="-") %}
+            {% set rest_part = split_part | slice(start=1) | join(sep='/">') %}
+            {% set part = link ~ '/">' ~ rest_part %}
+        {% endif %}
+        {% if loop.first %}
+            {% set_global content = part %}
+        {% else %}
+            {% set_global content = content ~ "threefold.io" ~ part %}
+        {% endif %}
+    {% endfor %}
+{% endif %}
+
+
+<!-- Default page template for news posts and basic informative markdown files -->
+<main>
+
+  <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-2 lg:pt-16 lg:w-4/6">
+
+    <div class="pt-8">
+      <section class="post-header container mx-auto px-0 mb-4 border-b">
+        <h1 class="lg:text-4xl text-2xl font-medium leading-none mt-0">
+          {{ page.title }}
+        </h1>
+        <div class="lg:text-xl text-base pt-4 pb-10 text-gray-700">{{ page.description }}</div>
+      </section>
+      <section class="post-author-list mb-10 mx-0">
+        <div class="flex items-center">
+          <div class="flex justify-between items-center">
+            <ul class="list-none flex author-list my-10 mr-2 px-0">
+            {% if page.taxonomies.people %}
+                {% for person in page.taxonomies.people %}
+                    {% set author_path = 'people/' ~ person ~ '/index.md' %}
+                    {% set people = get_section(path="people/_index.md") %}           
+                    {% set pages_str = people.pages | json_encode() | as_str %}
+                    {% if pages_str is containing(person) %}
+                        {% set author = get_page(path=author_path) %}
+                        {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+              <li class="author-list-item">
+                <a href="{{author.permalink}}" tooltip="{{author.title}}">
+                  <img src="{{author_img}}" alt="{{ author.title }}" class="
+                    w-10
+                    h-10
+                    rounded-full
+                    bg-gray-200
+                    border-2 border-white
+                  " />
+                </a>
+              </li>
+              {% endif %}
+              {% endfor %}
+              {% endif %}
+            </ul>
+          </div>
+
+          <div class="pl-3 flex flex-col text-xs leading-none uppercase">
+            <p>
+            {% if page.taxonomies.people %}
+            {% for person in page.taxonomies.people %}
+            {% set author_path = 'people/' ~ person ~ '/index.md' %}
+            {% set people = get_section(path="people/_index.md") %}           
+            {% set pages_str = people.pages | json_encode() | as_str %}
+            {% if pages_str is containing(person) %}
+                {% set author = get_page(path=author_path) %}
+                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+              <span>
+                <a href="{{author.permalink}}" tooltip="{{author.title}}" class="hover:underline text-gray-800">{{ author.title }}</a>
+              </span>
+              {% endif %}
+                {% endfor %}
+            {% endif %}
+            </p>
+            <p class="text-gray-700">
+              <time datetime="{{page.date}}">
+                {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+              </time>
+              {# &nbsp;&middot;&nbsp; {{ page.news.timeToRead }} min read #}
+            </p>
+          </div>
+          <div class="my-2 ml-auto sharethis-inline-share-buttons"></div>
+        </div>
+      </section>
+    </div>
+    <section class="post-image mx-auto w-full">
+        {% if page.extra.imgPath %}
+    {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+    <img src="{{img_url}}" />
+    {%endif%}
+    </section>
+
+    <div class="py-12">
+      <section class="
+          post-content
+          container
+          mx-auto
+          relative
+          font-serif
+          text-gray-700
+        ">
+        <div class="post-content-text text-xl">{{ content | safe }}</div>
+      </section>
+
+      <section class="post-tags container mx-auto relative py-10">
+        {% for tag in page.taxonomies.tags %}
+        {% set fullpath = "/tags/" ~ tag | replace(from='_', to='-' ) %}
+        <a href="{{fullpath}}" class="
+            text-xs
+            bg-transparent
+            hover:text-blue-700
+            py-2
+            px-4
+            mr-2
+            border
+            hover:border-blue-500
+            border-gray-600
+            text-gray-700
+            rounded-full
+          ">{{ tag }}</a>
+        {% endfor %}
+      </section>
+    </div>
+  </div>
+</main>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/page.html b/templates/page.html
new file mode 100644
index 0000000..2ad741b
--- /dev/null
+++ b/templates/page.html
@@ -0,0 +1,16 @@
+{% extends "_default/base.html" %}
+
+{% block content %}
+
+<main>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+    <script>mermaid.initialize({startOnLoad:true});</script>
+    <div>
+        {% if page %}
+            {{page.content | safe}}
+        {% else %}
+            {{section.content | safe}}
+        {% endif %}
+    </div>
+
+ </main> {% endblock content %}
diff --git a/templates/partials/applicationForm.html b/templates/partials/applicationForm.html
new file mode 100644
index 0000000..c2b84c9
--- /dev/null
+++ b/templates/partials/applicationForm.html
@@ -0,0 +1,60 @@
+<div class="mt-5 md:mt-0 md:col-span-2">
+    <form action="#" method="POST">
+      <div class="shadow sm:rounded-md sm:overflow-hidden">
+        <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
+            <h3 class="text-black text-lg">Application</h3>
+          <div class="grid grid-cols-3 gap-6">
+            <div class="col-span-3 sm:col-span-2">
+              <label for="company-website" class="block text-sm font-medium text-gray-700"> Website </label>
+              <div class="mt-1 flex rounded-md shadow-sm">
+                <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> http:// </span>
+                <input type="text" name="company-website" id="company-website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="www.example.com">
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label for="about" class="block text-sm font-medium text-gray-700"> About </label>
+            <div class="mt-1">
+              <textarea id="about" name="about" rows="3" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md" placeholder="you@example.com"></textarea>
+            </div>
+            <p class="mt-2 text-sm text-gray-500">Brief description for your profile. URLs are hyperlinked.</p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700"> Photo </label>
+            <div class="mt-1 flex items-center">
+              <span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100">
+                <svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+              </span>
+              <button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
+            </div>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700"> Resume </label>
+            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
+              <div class="space-y-1 text-center">
+                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                  <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+                <div class="flex text-sm text-gray-600">
+                  <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                    <span>Upload a file</span>
+                    <input id="file-upload" name="file-upload" type="file" class="sr-only">
+                  </label>
+                  <p class="pl-1">or drag and drop</p>
+                </div>
+                <p class="text-xs text-gray-500">PDF up to 10MB</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
+          <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save</button>
+        </div>
+      </div>
+    </form>
+  </div>
\ No newline at end of file
diff --git a/templates/partials/blogPosts.html b/templates/partials/blogPosts.html
new file mode 100644
index 0000000..8e04924
--- /dev/null
+++ b/templates/partials/blogPosts.html
@@ -0,0 +1,70 @@
+{% block content %}
+
+<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set category = path_array[2] %}
+    The Latest from Ourworld Free Zone  
+    {% if taxonomy == "categories" %} - 
+        {{category | replace(from='-', to=' ' ) | title}}
+    {% endif %}
+  </h1>
+  <div>
+    <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+          {% if not post.extra.hidden %}
+            {% include "partials/postCard.html" %} 
+         {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/blogSidebar.html b/templates/partials/blogSidebar.html
new file mode 100644
index 0000000..7c910c7
--- /dev/null
+++ b/templates/partials/blogSidebar.html
@@ -0,0 +1,38 @@
+
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER POSTS BY</h4>
+        <a id="all" class="mb-3 text-black font-normal" href="/blog">All</a>
+        {% set taxonomy = get_taxonomy(kind="categories") %}
+        {% set categories = taxonomy.items %}
+        {% for category in categories %}
+            {% set path = category.name | slugify %}
+            {% set fullpath = "/categories/" ~ path %}
+            <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{category.name}} </a>
+        {% endfor %}
+    </div>
+
+{% set section = get_section(path="blog/_index.md")%}
+
+    <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FEATURED POSTS</h4>
+
+        {% for page in section.pages %}
+        {% if page.extra.isFeatured %}
+            <a class="mb-3 text-blue-700" href={{page.permalink}}>{{ page.title }}</a>
+        {% endif %}
+        {% endfor %}
+        
+    </div>
+</div>
+
+<script>
+    function setActiveCategory() {
+        let activeCategory = window.location.pathname.split("/")[2]    
+        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeCategory)}
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveCategory()
+</script>
\ No newline at end of file
diff --git a/templates/partials/featuredBlog.html b/templates/partials/featuredBlog.html
new file mode 100644
index 0000000..b6edc7e
--- /dev/null
+++ b/templates/partials/featuredBlog.html
@@ -0,0 +1,36 @@
+{% if featured.taxonomies.people %}
+    {% set people = get_section(path="people/_index.md") %}           
+    {% set pages_str = people.pages | json_encode() | as_str %}
+    {% if pages_str is containing(featured.taxonomies.people[0]) %}
+        {% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+    {% endif %}
+{% endif %}
+
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-4 lg:mt-16 items-center container mx-auto pt-0 lg:pt-16">
+    <div class="relative lg:ml-8 my-8 w-full md:w-auto">
+      <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED POST</h3>
+      <a href={{featured.permalink}} class="">
+        <h2
+          class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
+          {{ featured.title }}
+        </h2>
+      </a>
+      <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+      </h4>
+
+    </div>
+
+    <div class="mx-4 relative lg:mt-0 max-w-full">
+      <img class="relative mx-auto md:w-auto rounded md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+    </div>
+  </div>
+
+  <hr class="mt-6">
+
+  </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/templates/partials/featuredNews.html b/templates/partials/featuredNews.html
new file mode 100644
index 0000000..8c67ed4
--- /dev/null
+++ b/templates/partials/featuredNews.html
@@ -0,0 +1,28 @@
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto">
+    <div class="relative lg:ml-8 my-8 w-full md:w-auto">
+      <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED NEWS</h3>
+      <a href={{featured.permalink}} class="">
+        <h2
+          class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
+          {{ featured.title }}
+        </h2>
+      </a>
+
+      <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+      </h4>
+
+    </div>
+
+    <div class="mx-4 relative lg:mt-0 max-w-full">
+        {% if featured.extra.imgPath %}
+      <img class="relative mx-auto md:w-auto md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+        {% endif %}
+    </div>
+  </div>
+  <hr class="mt-6">
+  </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/templates/partials/featuredProduct.html b/templates/partials/featuredProduct.html
new file mode 100644
index 0000000..63b09ca
--- /dev/null
+++ b/templates/partials/featuredProduct.html
@@ -0,0 +1,36 @@
+{% if featured.taxonomies.people %}
+    {% set people = get_section(path="people/_index.md") %}           
+    {% set pages_str = people.pages | json_encode() | as_str %}
+    {% if pages_str is containing(featured.taxonomies.people[0]) %}
+        {% set author_path = 'people/' ~ featured.taxonomies.people[0] ~ '/index.md' %}
+        {% set author = get_page(path=author_path) %}
+    {% endif %}
+{% endif %}
+
+<body>
+
+  <div class="md:grid md:grid-cols-2 md:gap-8 relative mt-16 lg:mt-16 items-center container mx-auto">
+    <div class="relative lg:ml-8 my-8 w-full md:w-auto">
+      <h3 class="text-base not-italic leading-6 text-gray-600">FEATURED PRODUCT</h3>
+      <a href={{featured.permalink}} class="">
+        <h2
+          class="mt-8 text-2xl main-title sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-4 md:mb-10 ">
+          {{ featured.title }}
+        </h2>
+      </a>
+      <h4 class="text-sm not-italic font-light leading-6 text-gray-600">
+        {{ featured.date | date(format="%B %e, %Y", timezone="America/Chicago")}} -
+      </h4>
+
+    </div>
+
+    <div class="mx-4 relative lg:mt-0 max-w-full">
+      <img class="relative mx-auto md:w-auto rounded md:max-w-full max-h-80" src={{featured.permalink}}{{featured.extra.imgPath}} alt="" />
+    </div>
+  </div>
+
+  <hr class="mt-6">
+
+  </div>
+  </div>
+</body>
\ No newline at end of file
diff --git a/templates/partials/filter_bar.html b/templates/partials/filter_bar.html
new file mode 100644
index 0000000..4770683
--- /dev/null
+++ b/templates/partials/filter_bar.html
@@ -0,0 +1,48 @@
+{% set path_array = current_path | split(pat="/") %}
+{% set taxonomy = path_array[1] %}
+{% set category = path_array[2] %}
+{% if path_array | length < 4%}
+{% set category = "All" %}
+{% endif %}
+
+
+
+<div class="left-0 z-50 mb-5 h-16 bg-gray-200 mt-24 w-full rounded shadow">
+    <header class="flex flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500">
+        <div class="flex justify-between px-4 sm:p-0">
+            <div class="ml-8 inline-flex flex-shrink-0">
+                <span class="flex text-xl p-3 capitalize tracking-tight">
+                    Filter:
+                </span>
+            </div>
+        </div>
+        <nav class="inline-flex md:order-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent">
+            <ul class="list-none sm:flex justify-left capitalize transition-all transition-500 ">
+                <li class="flex items-center">
+                    <div class="relative">
+                        <button id="filter-btn" class="rounded border-0 px-5 !shadow-none flex flex-row items-center w-full md:w-auto md:inline md:mt-0 mb-0 animated-link bg-gray-300">
+                            <span class="capitalize">{{category | replace(from='-', to=' ' ) | title}}</span>
+                            <svg data-v-21fd5df0="" fill="currentColor" viewBox="0 0 20 20" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-180"><path data-v-21fd5df0="" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                        </button>
+                        <div id="filter-menu" x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="hidden absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30">
+                            <div data-v-21fd5df0="" class="w-64 px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700">
+                                <a data-v-21fd5df0="" href="/people" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                                    All
+                                </a>
+                                {% set taxonomy = get_taxonomy(kind="memberships") %}
+                                {% set categories = taxonomy.items %}
+                                {% for category in categories %}
+                                    {% set path = category.name | slugify %}
+                                    {% set fullpath = "/memberships/" ~ path %}
+                                    <a href="{{fullpath}}" class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
+                                        {{category.name}}
+                                    </a>
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+    </header>
+</div>
\ No newline at end of file
diff --git a/templates/partials/footer.html b/templates/partials/footer.html
new file mode 100644
index 0000000..3003b63
--- /dev/null
+++ b/templates/partials/footer.html
@@ -0,0 +1,42 @@
+<!--
+  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+  Read the documentation to get started: https://tailwindui.com/documentation
+-->
+
+{%- set section = get_section(path="footer/_index.md") %}
+{%- set logoPath = section.extra.logoPath %}
+
+<html>
+    <head /><body>
+        <div class="mt-6 border-t border-gray-200 pt-2"></div>
+        <footer class="bg-white">
+          <div class="max-w-screen-2xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+            <div class="xl:flex xl:gap-4 items-center">
+              <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
+                <img class="w-40 h-auto sm:w-15 mx-auto" src="{{ get_url(path=logoPath)}}" alt="Ourworld Freezone Logo" />
+                <p class="text-gray-500 text-base leading-6 ">
+                  {{section.description}}
+                </p>
+                {% include "partials/socialLinks.html" %}
+            </div>
+
+            <div class="mt-6 lg:mt-0 w-full px-8 sm:px-12 md:px-16 lg:px-20 footer-cust">
+                {{ section.content | safe }}
+            </div>
+              
+              </div>
+              <div  class="mt-12 mx-auto border-t border-gray-200 pt-8">
+                <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 text-center">
+                © 2023 Flowers 4 Peace, All rights reserved.
+              </div>
+    
+            </div>
+            
+          </div>
+
+
+          
+        </footer>
+        </body>
+        </html>
+        
\ No newline at end of file
diff --git a/templates/partials/head.html b/templates/partials/head.html
new file mode 100644
index 0000000..38ed853
--- /dev/null
+++ b/templates/partials/head.html
@@ -0,0 +1,53 @@
+{% set cloudiBase = 'https://res.cloudinary.com/brycewray-com/image/upload/' %}
+{% set xFmPart1 = 'f_auto,q_auto:eco,w_' %}
+{% set xFmPart2 = ',x_0,z_1/' %}
+{% set fallbackImg = 'typewriter-monochrome_2242164_6260x4374.jpg' %}
+{% set zolaVer = '0.13.0' %}
+
+<head>
+  <meta name="generator" content="Zola v.{{ zolaVer }} - getzola.org" />
+
+  {% block title %}
+  {% if current_path == '/' %}
+  <title>{{ config.title }}</title>
+  <meta property="og:title" content="{{ config.title }}" />
+  {% else %}
+  <title>{% if section.title %}{{ section.title }} &bull; {% endif %}{% if page.title %}{{ page.title }} &bull; {% endif %}{{ config.title }}</title>
+  <meta property="og:title" content="{% if section.title %}{{ section.title }} &bull; {% endif %}{% if page.title %}{{ page.title }} &bull; {% endif %}{{ config.title }}" />
+  {% endif %}
+  {% endblock title %}
+
+  <!-- Required meta categories -->
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- **** BEGINNING, favicons **** -->
+
+  <!-- generics -->
+
+  <!-- iOS -->
+
+  <!-- Android -->
+
+  <!-- Windows 8, IE 10 -->
+
+  <!-- Windows 8.1 and up, IE 11 -->
+
+  <!-- **** CONCLUSION, favicons **** -->
+
+  <!-- CSS/SCSS -->
+  <link rel="stylesheet" href="{{ get_url(path="css/index.css", trailing_slash=false, cachebust=true) | safe }}" />  <style>@-moz-document url-prefix() {.lazy:-moz-loading {visibility:hidden;}}.ieOnly {display: none;}@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.ieOnly {display: block;}}</style>
+  
+  <!-- MailerLite Universal -->
+<script>
+  (function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
+  var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
+  f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
+  var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
+  _.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
+  
+  var ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
+  </script>
+  <!-- End MailerLite Universal -->
+
+</head>
diff --git a/templates/partials/header.html b/templates/partials/header.html
new file mode 100644
index 0000000..b090022
--- /dev/null
+++ b/templates/partials/header.html
@@ -0,0 +1,134 @@
+<!--
+  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+  Read the documentation to get started: https://tailwindui.com/documentation
+--><!-- This example requires Tailwind CSS v1.4.0+ -->
+
+
+<!-- set variables used for header template -->
+{% set section = get_section(path="_index.md") %}
+{% set subsections_str = section.subsections | join(sep=" ") %}
+{% set logo_path = get_url(path=section.extra.logo_path | default(value='')) %}
+
+{% if "header/_index.md" in subsections_str %}
+    {% set section = get_section(path="header/_index.md") %}
+    {% set header_items = section.content | safe | split(pat="<li>") %}
+    {% include "partials/header_custom.html" %}
+{% else %}
+    <header id="header-container">
+        {% set header_class = config.extra.header_class | default(value='') %}
+        <div class="{{'z-10 bg-white fixed w-screen max-w-full ' ~ header_class}}">
+            <div class="relative z-50 shadow">
+            <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5  md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
+                <div>
+                    <a href="/" class="flex">
+                        <img class="h-auto sm:w-15" src="{{logo_path}}" alt="Logo" />
+                    </a>
+                </div>
+                <div class="-mr-2 -my-2 lg:hidden">
+                    <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                        <!-- Heroicon name: menu -->
+                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                <button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                    <!-- Heroicon name: x -->
+                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                    </button>
+                </div>
+                <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
+                    <nav class="flex space-x-10">    
+                    {% for page in section.pages %}
+                    {% if page.extra.menu %} {% continue %} {% endif %}
+                        <a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                            {{page.title}}
+                        </a>
+                        <div class="relative">
+                        </div>
+                    {% endfor %}
+                    {% for subsection in section.subsections %}
+                        {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}                        
+                        {% set button_id = subsection ~ "-menu-btn" | slugify %}
+                        <div class="relative">
+                        <button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
+                            <span>{{ subsection }}</span>
+                            <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                        </button>
+                        </div>
+                    {% endfor %}
+                    </nav>
+                </div>
+            </div>
+        </div>
+    {% for subsection in section.subsections %}
+        {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}        
+        {% set submenu_id = subsection ~ "-menu" | slugify %}
+    <nav>
+        <div id="{{submenu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
+            <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
+                <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
+                {{subsection | safe }}
+                </div>
+            </div>            
+            </div>
+        </nav>
+    
+    
+    {% endfor %}
+    
+        
+            <!--
+            Mobile menu, show/hide based on mobile menu state.
+        
+            Entering: "duration-200 ease-out"
+                From: "opacity-0 scale-95"
+                To: "opacity-100 scale-100"
+            Leaving: "duration-100 ease-in"
+                From: "opacity-100 scale-100"
+                To: "opacity-0 scale-95"
+            -->
+        <div id="hamburger" class="hidden fixed mt-16 z-20 inset-x-0 transition transform origin-top-right lg:hidden">
+            <div>
+                <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
+                    <div class="pt-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
+    
+                        <nav class="flex flex-col justify-around pb-12">
+                        {% for page in section.pages %}
+                            {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
+                            {% if page.extra.menu %} {% continue %} {% endif %}
+                            <a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                {{page.title}}
+                            </a>
+                            <hr/>
+                        {% endfor %}
+                        {% for subsection in section.subsections %}
+                            {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}
+                            {% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
+                            {% set menu_id = subsection ~ "-mobile-menu" | slugify %}
+
+                            <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                <span>{{ subsection }}</span>
+                                <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                            </button>
+
+                            <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                                {{ subsection | safe }}
+                            </div>
+                        
+                        {% endfor %}
+                        </nav>                    
+                    </div>
+                
+            </div>
+            
+            </div>
+        </div>
+    
+    
+    </header>
+    
+{% endif %}
+
+
diff --git a/templates/partials/header_custom.html b/templates/partials/header_custom.html
new file mode 100644
index 0000000..53f3bf4
--- /dev/null
+++ b/templates/partials/header_custom.html
@@ -0,0 +1,147 @@
+<!--
+  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+  Read the documentation to get started: https://tailwindui.com/documentation
+--><!-- This example requires Tailwind CSS v1.4.0+ -->
+
+{%- set section = get_section(path="header/_index.md") %}
+{% set header_items = section.content | safe | split(pat="<li>") %}
+
+<header id="header-container">
+    <div class="z-10 bg-white fixed w-screen">
+        <div class="relative z-50 shadow">
+        <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-1 sm:px-8 md:px-12 py-2 lg:px-28 lg:justify-start lg:space-x-20">
+            <div>
+                <a href="/" class="flex">
+                    <img class="w-40 h-auto sm:w-15" src="{{section.extra.logoPath}}" alt="Ourworld Logo" />
+                </a>
+            </div>
+            <div class="mr-2 -my-2 lg:hidden">
+                <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                    <!-- Heroicon name: menu -->
+                    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                </button>
+            <button id="close-hamburger-btn" type="button" class="hidden lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                <!-- Heroicon name: x -->
+                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                </button>
+            </div>
+            <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
+            <nav class="flex space-x-10">
+
+{% for header_item in header_items %}
+{% if not loop.first %}
+    {% set header_arr = header_item | split(pat="</li>") %}
+    {% set header_label = header_arr[0] %}
+    {% if '<a' in header_label %}
+        {% set link_label = header_label | striptags %}
+        {% set link_path = header_label | split(pat="%22") | safe%}
+        {% if header_label is containing("http") %}
+            <a href="{{link_path[1]}}" target="_blank" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                {{link_label}}
+            </a>
+        {% else %}
+            <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                {{link_label}}
+            </a>
+        {% endif %}
+    {% else %}
+        <div class="relative">
+            {% set button_id = header_label ~ "-menu-btn" | slugify %}
+        <button type="button" id="{{button_id}}" class="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 font-normal hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
+            <span>{{ header_label }}</span>
+            <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+        </button>
+        </div>
+
+    {% endif %}  
+{% endif %}
+{% endfor %}
+</nav>
+
+
+            </div>
+        </div>
+        </div>
+{% for header_item in header_items %}
+{% if not loop.first %}
+    {% set header_arr = header_item | split(pat="</li>") %}
+    {% set header_label = header_arr[0] %}
+    {% set header_menu = header_arr[1] %}
+    {% set menu_id = header_label ~ "-menu" | slugify %}
+
+<nav>
+    <div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
+        <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
+            <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
+            {{header_menu | safe }}
+            </div>
+        </div>            
+        </div>
+    </nav>
+
+
+{% endif %}
+{% endfor %}
+
+    
+        <!--
+        Mobile menu, show/hide based on mobile menu state.
+    
+        Entering: "duration-200 ease-out"
+            From: "opacity-0 scale-95"
+            To: "opacity-100 scale-100"
+        Leaving: "duration-100 ease-in"
+            From: "opacity-100 scale-100"
+            To: "opacity-0 scale-95"
+        -->
+    <div id="hamburger" class="hidden fixed mt-16 z-20 inset-x-0 transition transform origin-top-right lg:hidden">
+        <div>
+            <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
+                <div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
+
+                    <nav class="flex flex-col justify-around pb-12">
+                    {% for header_item in header_items %}
+
+                        {% if not loop.first %}
+                            {% set header_arr = header_item | split(pat="</li>") %}
+                            {% set header_label = header_arr[0] %}
+                            {% if '<a' in header_label %}
+                                {% set link_label = header_label | striptags %}
+                                {% set link_path = header_label | split(pat="%22") | safe%}
+                                {% if header_label is containing("http") %}
+                                <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                    {{link_label}}
+                                </a>
+                                {% else %}
+                                <a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                    {{link_label}}
+                                </a>
+                                {% endif %}
+                            {% else %}
+                                {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
+                                    <button type="button" id="{{button_id}}" class="flex flex px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                                        <span>{{ header_label }}</span>
+                                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                                    </button>
+                                    {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
+                                    <div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                                        {{ header_arr[1] | safe }}
+                                    </div>
+                    
+                            {% endif %}
+                        {% endif %}
+                    {% endfor %}
+                    </nav>                    
+                </div>
+            
+        </div>
+        
+        </div>
+    </div>
+
+
+</header>
diff --git a/templates/partials/icons/bar-svgrepo-com.svg b/templates/partials/icons/bar-svgrepo-com.svg
new file mode 100644
index 0000000..07ac56d
--- /dev/null
+++ b/templates/partials/icons/bar-svgrepo-com.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#A39B8D;" d="M406.261,155.826h-11.13V11.13h11.13V155.826z M261.565,11.13h-11.13v144.696h11.13V11.13z
+	 M116.87,11.13h-11.13v144.696h11.13V11.13z"/>
+<path style="fill:#F7F2CD;" d="M467.478,278.261H333.913l55.652-133.565h22.261L467.478,278.261z M267.13,144.696H244.87
+	l-55.652,133.565h133.565L267.13,144.696z M122.435,144.696h-22.261L44.522,278.261h133.565L122.435,144.696z"/>
+<path style="fill:#FFFCE3;" d="M446.609,278.261h-91.826l40.812-122.435h10.203L446.609,278.261z M261.101,155.826h-10.203
+	l-40.811,122.435h91.826L261.101,155.826z M116.405,155.826h-10.203L65.391,278.261h91.826L116.405,155.826z"/>
+<path style="fill:#F5D470;" d="M369.212,155.826c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391
+	s33.391,14.949,33.391,33.391c0,3.903-0.677,7.648-1.908,11.13H369.212z M287.484,155.826c1.231-3.483,1.908-7.227,1.908-11.13
+	c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13H287.484z M142.788,155.826
+	c1.231-3.483,1.908-7.227,1.908-11.13c0-18.442-14.949-33.391-33.391-33.391s-33.391,14.949-33.391,33.391
+	c0,3.903,0.677,7.648,1.908,11.13H142.788z"/>
+<path style="fill:#D19B3F;" d="M434.087,144.696c0,3.903-0.677,7.648-1.908,11.13h-20.353v-11.13c0-6.147-4.983-11.13-11.13-11.13
+	c-6.147,0-11.13,4.983-11.13,11.13v11.13h-20.353c-1.231-3.483-1.908-7.227-1.908-11.13c0-18.442,14.949-33.391,33.391-33.391
+	S434.087,126.254,434.087,144.696z M256,111.304c-18.442,0-33.391,14.949-33.391,33.391c0,3.903,0.677,7.648,1.908,11.13h20.353
+	v-11.13c0-6.147,4.983-11.13,11.13-11.13s11.13,4.983,11.13,11.13v11.13h20.353c1.231-3.483,1.908-7.227,1.908-11.13
+	C289.391,126.254,274.442,111.304,256,111.304z M111.304,111.304c-18.442,0-33.391,14.949-33.391,33.391
+	c0,3.903,0.677,7.648,1.908,11.13h20.353v-11.13c0-6.147,4.983-11.13,11.13-11.13c6.147,0,11.13,4.983,11.13,11.13v11.13h20.353
+	c1.231-3.483,1.908-7.227,1.908-11.13C144.696,126.254,129.746,111.304,111.304,111.304z"/>
+<path style="fill:#57544C;" d="M500.87,22.261H11.13C4.983,22.261,0,17.278,0,11.13l0,0C0,4.983,4.983,0,11.13,0H500.87
+	C507.017,0,512,4.983,512,11.13l0,0C512,17.278,507.017,22.261,500.87,22.261z"/>
+<path style="fill:#D3C6A8;" d="M434.087,489.739L434.087,489.739c0,12.295-9.966,22.261-22.261,22.261H100.174
+	c-12.295,0-22.261-9.966-22.261-22.261l0,0c0-12.295,9.966-22.261,22.261-22.261h311.652
+	C424.121,467.478,434.087,477.444,434.087,489.739z"/>
+<path style="fill:#6E5840;" d="M478.609,467.478H33.391V267.13h445.217V467.478z"/>
+<path style="fill:#323030;" d="M500.87,478.609H11.13c-6.147,0-11.13-4.983-11.13-11.13l0,0c0-6.147,4.983-11.13,11.13-11.13H500.87
+	c6.147,0,11.13,4.983,11.13,11.13l0,0C512,473.626,507.017,478.609,500.87,478.609z M512,267.13L512,267.13
+	c0-6.147-4.983-11.13-11.13-11.13H11.13C4.983,256,0,260.983,0,267.13l0,0c0,6.147,4.983,11.13,11.13,11.13H500.87
+	C507.017,278.261,512,273.278,512,267.13z"/>
+<path style="fill:#C6984F;" d="M125.217,500.87h-22.261l38.957-166.957h22.261L125.217,500.87z M347.826,333.913h-22.261
+	L286.609,500.87h22.261L347.826,333.913z"/>
+<path style="fill:#AA8144;" d="M164.174,333.913h22.261l38.957,166.957H203.13L164.174,333.913z M386.783,500.87h22.261
+	l-38.957-166.957h-22.261L386.783,500.87z"/>
+<path style="fill:#ADA58C;" d="M208.696,356.174h-89.043c-6.147,0-11.13-4.983-11.13-11.13v-22.261c0-6.147,4.983-11.13,11.13-11.13
+	h89.043c6.147,0,11.13,4.983,11.13,11.13v22.261C219.826,351.191,214.843,356.174,208.696,356.174z M403.478,345.043v-22.261
+	c0-6.147-4.983-11.13-11.13-11.13h-89.043c-6.147,0-11.13,4.983-11.13,11.13v22.261c0,6.147,4.983,11.13,11.13,11.13h89.043
+	C398.495,356.174,403.478,351.191,403.478,345.043z"/>
+<path style="fill:#D3C6A8;" d="M108.522,322.783L108.522,322.783c0-6.147,4.983-11.13,11.13-11.13h89.043
+	c6.147,0,11.13,4.983,11.13,11.13l0,0H108.522z M403.478,322.783L403.478,322.783c0-6.147-4.983-11.13-11.13-11.13h-89.043
+	c-6.147,0-11.13,4.983-11.13,11.13l0,0H403.478z"/>
+<path style="fill:#92393C;" d="M66.783,256c0,6.147-4.983,11.13-11.13,11.13h-11.13c-6.147,0-11.13-4.983-11.13-11.13v-33.391
+	h33.391V256z"/>
+<path style="fill:#DB6D53;" d="M50.087,256L50.087,256c-3.073,0-5.565-2.492-5.565-5.565v-27.826h11.13v27.826
+	C55.652,253.508,53.16,256,50.087,256z"/>
+<path style="fill:#C6984F;" d="M178.087,250.435v11.13c0,3.073-2.492,5.565-5.565,5.565h-66.783c-3.073,0-5.565-2.492-5.565-5.565
+	v-11.13c0-3.073,2.492-5.565,5.565-5.565h66.783C175.595,244.87,178.087,247.362,178.087,250.435z"/>
+<path style="fill:#AA8144;" d="M178.087,250.435V256h-77.913v-5.565c0-3.073,2.492-5.565,5.565-5.565h66.783
+	C175.595,244.87,178.087,247.362,178.087,250.435z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/templates/partials/icons/code-svgrepo-com.svg b/templates/partials/icons/code-svgrepo-com.svg
new file mode 100644
index 0000000..6be0cd8
--- /dev/null
+++ b/templates/partials/icons/code-svgrepo-com.svg
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#E4EAF8;" d="M494.345,472.276H17.655C7.904,472.276,0,464.372,0,454.621V57.379
+	c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655v397.241
+	C512,464.372,504.096,472.276,494.345,472.276z"/>
+<path style="fill:#5B5D6E;" d="M494.345,472.276H256V83.862h256v370.759C512,464.372,504.096,472.276,494.345,472.276z"/>
+<path style="fill:#D5DCED;" d="M512,83.862H0V57.379c0-9.751,7.904-17.655,17.655-17.655h476.69c9.751,0,17.655,7.904,17.655,17.655
+	V83.862z"/>
+<path style="fill:#E4EAF8;" d="M26.483,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C35.31,71.082,31.358,75.034,26.483,75.034z"/>
+<path style="fill:#FF5050;" d="M423.724,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C432.552,71.082,428.599,75.034,423.724,75.034z"/>
+<path style="fill:#FFF082;" d="M459.034,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C467.862,71.082,463.91,75.034,459.034,75.034z"/>
+<path style="fill:#A0FFB4;" d="M494.345,75.034h-8.828c-4.875,0-8.828-3.953-8.828-8.828v-8.828c0-4.875,3.953-8.828,8.828-8.828
+	h8.828c4.875,0,8.828,3.953,8.828,8.828v8.828C503.172,71.082,499.22,75.034,494.345,75.034z"/>
+<path style="fill:#00C3FF;" d="M144.898,150.826l-59.75,59.75c-3.229,3.229-3.463,8.386-0.54,11.893L256,428.138V145.655h-98.618
+	C152.7,145.655,148.209,147.516,144.898,150.826z"/>
+<polygon style="fill:#80E1FF;" points="256,145.655 176.552,216.276 256,216.276 "/>
+<g>
+	<path style="fill:#00AAF0;" d="M176.552,216.276l-25.97-69.254c-2.103,0.878-4.039,2.159-5.681,3.801L85.15,210.575
+		c-1.578,1.578-2.415,3.619-2.543,5.7L176.552,216.276L176.552,216.276z"/>
+	<polygon style="fill:#00AAF0;" points="176.552,216.276 256,428.138 256,216.276 	"/>
+</g>
+<path style="fill:#AFB9D2;" d="M256,489.931c-4.879,0-8.828-3.953-8.828-8.828V30.897c0-4.875,3.948-8.828,8.828-8.828
+	c4.879,0,8.828,3.953,8.828,8.828v450.207C264.828,485.978,260.879,489.931,256,489.931z"/>
+<g>
+	<path style="fill:#FF5050;" d="M317.793,163.31h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828S322.673,163.31,317.793,163.31z"/>
+	<path style="fill:#FF5050;" d="M317.793,233.931h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828C326.621,229.978,322.673,233.931,317.793,233.931z"/>
+</g>
+<path style="fill:#A0FFB4;" d="M344.276,198.621h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,198.621,344.276,198.621z"/>
+<path style="fill:#FFFFFF;" d="M467.862,163.31H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,163.31,467.862,163.31z"/>
+<path style="fill:#FFF082;" d="M467.862,233.931H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828C476.69,229.978,472.742,233.931,467.862,233.931z"/>
+<path style="fill:#D5DCED;" d="M467.862,198.621h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,198.621,467.862,198.621z"/>
+<path style="fill:#A0FFB4;" d="M344.276,269.241h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,269.241,344.276,269.241z"/>
+<path style="fill:#D5DCED;" d="M467.862,269.241h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,269.241,467.862,269.241z"/>
+<g>
+	<path style="fill:#FF5050;" d="M317.793,304.552h-17.655c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828C326.621,300.599,322.673,304.552,317.793,304.552z"/>
+	<path style="fill:#FF5050;" d="M317.793,375.172h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+		c4.879,0,8.828,3.953,8.828,8.828S322.673,375.172,317.793,375.172z"/>
+</g>
+<path style="fill:#A0FFB4;" d="M344.276,339.862h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,339.862,344.276,339.862z"/>
+<path style="fill:#FFFFFF;" d="M467.862,304.552H353.103c-4.879,0-8.828-3.953-8.828-8.828c0-4.875,3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828C476.69,300.599,472.742,304.552,467.862,304.552z"/>
+<path style="fill:#FFF082;" d="M467.862,375.172H353.103c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h114.759
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,375.172,467.862,375.172z"/>
+<path style="fill:#D5DCED;" d="M467.862,339.862h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,339.862,467.862,339.862z"/>
+<path style="fill:#A0FFB4;" d="M344.276,410.483h-17.655c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h17.655
+	c4.879,0,8.828,3.953,8.828,8.828S349.155,410.483,344.276,410.483z"/>
+<path style="fill:#D5DCED;" d="M467.862,410.483h-88.276c-4.879,0-8.828-3.953-8.828-8.828s3.948-8.828,8.828-8.828h88.276
+	c4.879,0,8.828,3.953,8.828,8.828S472.742,410.483,467.862,410.483z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/templates/partials/icons/form-svgrepo-com.svg b/templates/partials/icons/form-svgrepo-com.svg
new file mode 100644
index 0000000..1da4268
--- /dev/null
+++ b/templates/partials/icons/form-svgrepo-com.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path style="fill:#9F6459;" d="M416,32H272c0,8.836-7.164,16-16,16s-16-7.164-16-16H96c-22.055,0-40,17.945-40,40v400
+			c0,22.055,17.945,40,40,40h320c22.055,0,40-17.945,40-40V72C456,49.945,438.054,32,416,32z M416,464c0,4.418-3.582,8-8,8H104
+			c-4.418,0-8-3.582-8-8V80c0-4.418,3.582-8,8-8h304c4.418,0,8,3.582,8,8V464z"/>
+	</g>
+	<g>
+		<g>
+			<path style="fill:#D8DCE1;" d="M152,368c-1.891,0-3.789-0.664-5.312-2.023c-3.305-2.93-3.602-7.992-0.664-11.289l64-72
+				c2.328-2.625,6.094-3.422,9.289-1.969l80.445,36.57l52.844-128.336c1.688-4.078,6.359-6,10.445-4.352
+				c4.086,1.68,6.031,6.359,4.352,10.445l-56,136c-0.828,2.008-2.438,3.594-4.453,4.391s-4.273,0.742-6.258-0.156l-82.625-37.555
+				l-60.086,67.586C156.398,367.094,154.203,368,152,368z"/>
+		</g>
+	</g>
+	<g>
+		<circle style="fill:#FF4F19;" cx="152" cy="360" r="24"/>
+	</g>
+	<g>
+		<circle style="fill:#FF9600;" cx="216" cy="288" r="24"/>
+	</g>
+	<g>
+		<circle style="fill:#FFD200;" cx="304" cy="328" r="24"/>
+	</g>
+	<g>
+		<circle style="fill:#74D24F;" cx="360" cy="192" r="24"/>
+	</g>
+	<g>
+		<path style="fill:#B9BBC1;" d="M304,16h-20.391C277.969,6.242,267.484,0,256,0s-21.969,6.242-27.609,16H208
+			c-22.055,0-40,17.945-40,40v32c0,4.418,3.578,8,8,8h160c4.422,0,8-3.582,8-8V56C344,33.945,326.055,16,304,16z M256,40
+			c-4.418,0-8-3.582-8-8c0-4.418,3.582-8,8-8s8,3.582,8,8C264,36.418,260.418,40,256,40z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/templates/partials/icons/paint-brush-art-svgrepo-com.svg b/templates/partials/icons/paint-brush-art-svgrepo-com.svg
new file mode 100644
index 0000000..f8ed55a
--- /dev/null
+++ b/templates/partials/icons/paint-brush-art-svgrepo-com.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496 496" style="enable-background:new 0 0 496 496;" xml:space="preserve">
+<path style="fill:#996632;" d="M264,465.6c-4,4-10.4,6.4-16,6.4c-0.8,0-1.6,0-2.4,0c-12-1.6-21.6-12.8-21.6-25.6v-84
+	c0-32-26.4-58.4-58.4-58.4h-2.4c-14.4,0-26.4-12-26.4-26.4V256h224v21.6c0,14.4-12,26.4-26.4,26.4H332c-32,0-58.4,26.4-58.4,58.4
+	V448C272,454.4,268.8,461.6,264,465.6z M264,448c0-8.8-7.2-16-16-16c-8.8,0-16,7.2-16,16s7.2,16,16,16C256.8,464,264,456.8,264,448z
+	"/>
+<path style="fill:#D9CDC1;" d="M364,232c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12h20h4c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12
+	h-12H364z"/>
+<circle style="fill:#42210B;" cx="328" cy="208" r="16"/>
+<path style="fill:#CC9966;" d="M296,80c0-8.8,7.2-16,16-16s16,7.2,16,16v40c0,17.6,14.4,32,32,32c5.6,0,11.2-1.6,16-4.8V168h-91.2
+	c6.4-5.6,11.2-14.4,11.2-24V80z"/>
+<g>
+	<circle style="fill:#42210B;" cx="248" cy="448" r="16"/>
+	<circle style="fill:#42210B;" cx="248" cy="208" r="16"/>
+</g>
+<path style="fill:#FFF8EF;" d="M248,192c-8.8,0-16,7.2-16,16s7.2,16,16,16c8.8,0,16-7.2,16-16S256.8,192,248,192z M364,184
+	c6.4,0,12,5.6,12,12v24c0,6.4-5.6,12-12,12H168c17.6,0,32-14.4,32-32v-16H364z M328,224c8.8,0,16-7.2,16-16s-7.2-16-16-16
+	s-16,7.2-16,16S319.2,224,328,224z"/>
+<path style="fill:#CC9966;" d="M200,80c0-8.8,7.2-16,16-16s16,7.2,16,16v64c0,9.6,4,18.4,11.2,24H200V80z"/>
+<path style="fill:#FF6600;" d="M360,136c-8.8,0-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v64c0,8.8-7.2,16-16,16
+	s-16-7.2-16-16V80c0-17.6-14.4-32-32-32s-32,14.4-32,32v120c0,8.8-7.2,16-16,16s-16-7.2-16-16V96c0-19.2-13.6-35.2-32-39.2V56
+	c0-22.4,17.6-40,40-40h176c22.4,0,40,17.6,40,40v64C376,128.8,368.8,136,360,136z"/>
+<path style="fill:#FF7D00;" d="M168,208c-4.8,0-8-3.2-8-8V96c0-20-12.8-38.4-31.2-44.8C131.2,35.2,144,24,160,24h176
+	c17.6,0,32,14.4,32,32v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80c0-22.4-17.6-40-40-40s-40,17.6-40,40v64c0,4.8-3.2,8-8,8s-8-3.2-8-8V80
+	c0-22.4-17.6-40-40-40s-40,17.6-40,40v120C176,204.8,172.8,208,168,208z"/>
+<path style="fill:#CC9966;" d="M136,96v72h-16V73.6C129.6,76.8,136,85.6,136,96z"/>
+<path style="fill:#FFF8EF;" d="M136,200c0,17.6,13.6,32,31.2,32h-34.4c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h3.2V200z"/>
+<path style="fill:#875426;" d="M165.6,304c32,0,58.4,26.4,58.4,58.4v84c0,12.8,9.6,24,21.6,25.6c0.8,0,1.6,0,2.4,0
+	c6.4,0,12-2.4,16-6.4c4.8-4.8,8-11.2,8-17.6v-85.6c0-32,26.4-58.4,58.4-58.4h2.4c14.4,0,26.4-12,26.4-26.4V256H136v21.6
+	c0,14.4,12,26.4,26.4,26.4H165.6z M244.8,480c-16-1.6-28.8-16-28.8-33.6v-84c0-28-22.4-50.4-50.4-50.4h-2.4
+	c-19.2,0-34.4-15.2-34.4-34.4V248h240v29.6c0,19.2-15.2,34.4-34.4,34.4H332c-28,0-50.4,22.4-50.4,50.4V448c0,8.8-4,17.6-10.4,24
+	C262.4,477.6,253.6,480.8,244.8,480z"/>
+<path style="fill:#D9CDC1;" d="M120.8,220c0,6.4,5.6,12,12,12H120h-12c-6.4,0-12-5.6-12-12v-24c0-6.4,5.6-12,12-12h4h20.8
+	c-6.4,0-12,5.6-12,12V220z"/>
+<path style="fill:#42210B;" d="M136,96c0-10.4-6.4-19.2-16-22.4V168h16V96z M165.6,312c28,0,50.4,22.4,50.4,50.4v84
+	c0,17.6,12.8,32,28.8,33.6c8.8,0.8,17.6-2.4,24.8-8c6.4-6.4,10.4-14.4,10.4-24v-85.6c0-28,22.4-50.4,50.4-50.4h2.4
+	c19.2,0,34.4-15.2,34.4-34.4V248H128v29.6c0,19.2,15.2,34.4,34.4,34.4H165.6z M243.2,168c-6.4-5.6-11.2-14.4-11.2-24V80
+	c0-8.8-7.2-16-16-16s-16,7.2-16,16v88H243.2z M200,200c0,17.6-14.4,32-32,32h196h12h12c6.4,0,12-5.6,12-12v-24c0-6.4-5.6-12-12-12
+	h-4h-20H200V200z M330.4,328c-19.2,0-34.4,15.2-34.4,34.4V448c0,13.6-5.6,26.4-16,35.2c-8.8,8-20.8,12.8-32.8,12.8
+	c-1.6,0-3.2,0-4.8,0c-24-2.4-43.2-24-43.2-49.6v-84c0-19.2-15.2-34.4-34.4-34.4h-2.4c-28,0-50.4-22.4-50.4-50.4V248h-4
+	c-15.2,0-28-12.8-28-28v-24c0-14.4,10.4-25.6,24-27.2V56c0-31.2,24.8-56,56-56h176c31.2,0,56,24.8,56,56v112
+	c13.6,1.6,24,13.6,24,27.2v24c0,15.2-12.8,28-28,28h-4v29.6c0,28-22.4,50.4-50.4,50.4h-3.2V328z M296,144c0,9.6-4,18.4-11.2,24H376
+	v-20.8c-4.8,3.2-10.4,4.8-16,4.8c-17.6,0-32-14.4-32-32V80c0-8.8-7.2-16-16-16s-16,7.2-16,16V144z M120,232h12.8h34.4
+	c-17.6,0-31.2-14.4-31.2-32v-16h-3.2H112h-4c-6.4,0-12,5.6-12,12v24c0,6.4,5.6,12,12,12H120z M280,80c0-17.6,14.4-32,32-32
+	s32,14.4,32,32v40c0,8.8,7.2,16,16,16s16-7.2,16-16V56c0-22.4-17.6-40-40-40H160c-22.4,0-40,17.6-40,40v0.8c18.4,4,32,20,32,39.2
+	v104c0,8.8,7.2,16,16,16s16-7.2,16-16V80c0-17.6,14.4-32,32-32s32,14.4,32,32v64c0,8.8,7.2,16,16,16s16-7.2,16-16V80z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/templates/partials/icons/svgDribbbleIcon.html b/templates/partials/icons/svgDribbbleIcon.html
new file mode 100644
index 0000000..2e94586
--- /dev/null
+++ b/templates/partials/icons/svgDribbbleIcon.html
@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z" clip-rule="evenodd" />
+  </svg>
\ No newline at end of file
diff --git a/templates/partials/icons/svgFacebookIcon.html b/templates/partials/icons/svgFacebookIcon.html
new file mode 100644
index 0000000..81c97e7
--- /dev/null
+++ b/templates/partials/icons/svgFacebookIcon.html
@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
+</svg>
\ No newline at end of file
diff --git a/templates/partials/icons/svgFirstPageIcon.html b/templates/partials/icons/svgFirstPageIcon.html
new file mode 100644
index 0000000..00e6d61
--- /dev/null
+++ b/templates/partials/icons/svgFirstPageIcon.html
@@ -0,0 +1 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(128,128,128);"/></g></svg>
\ No newline at end of file
diff --git a/templates/partials/icons/svgGithubIcon.html b/templates/partials/icons/svgGithubIcon.html
new file mode 100644
index 0000000..bedea77
--- /dev/null
+++ b/templates/partials/icons/svgGithubIcon.html
@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+</svg>
\ No newline at end of file
diff --git a/templates/partials/icons/svgInstagramIcon.html b/templates/partials/icons/svgInstagramIcon.html
new file mode 100644
index 0000000..913e2cb
--- /dev/null
+++ b/templates/partials/icons/svgInstagramIcon.html
@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
+</svg>
\ No newline at end of file
diff --git a/templates/partials/icons/svgLastPageIcon.html b/templates/partials/icons/svgLastPageIcon.html
new file mode 100644
index 0000000..ca9be49
--- /dev/null
+++ b/templates/partials/icons/svgLastPageIcon.html
@@ -0,0 +1 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(128,128,128);"/></g></svg>
\ No newline at end of file
diff --git a/templates/partials/icons/svgNextPageIcon.html b/templates/partials/icons/svgNextPageIcon.html
new file mode 100644
index 0000000..b4b67a5
--- /dev/null
+++ b/templates/partials/icons/svgNextPageIcon.html
@@ -0,0 +1 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-1.22465e-16,-2,-2,1.22465e-16,48,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(0,170,255);"/></g></svg>
\ No newline at end of file
diff --git a/templates/partials/icons/svgPrevPageIcon.html b/templates/partials/icons/svgPrevPageIcon.html
new file mode 100644
index 0000000..e2ae89b
--- /dev/null
+++ b/templates/partials/icons/svgPrevPageIcon.html
@@ -0,0 +1 @@
+<svg width="12px" height="12px" class="inline" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1.22465e-16,-2,2,1.22465e-16,0,48)"><path d="M12,0L24,24L0,24L12,0Z" style="fill:rgb(0,170,255);"/></g></svg>
\ No newline at end of file
diff --git a/templates/partials/icons/svgTelegram.html b/templates/partials/icons/svgTelegram.html
new file mode 100644
index 0000000..d53dd94
--- /dev/null
+++ b/templates/partials/icons/svgTelegram.html
@@ -0,0 +1 @@
+<svg data-v-14efe4a7="" xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 16 16" class="bi bi-telegram mt-1"><path data-v-14efe4a7="" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"></path></svg>
\ No newline at end of file
diff --git a/templates/partials/icons/svgTwitterIcon.html b/templates/partials/icons/svgTwitterIcon.html
new file mode 100644
index 0000000..63a0eb2
--- /dev/null
+++ b/templates/partials/icons/svgTwitterIcon.html
@@ -0,0 +1,3 @@
+<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+  </svg>
\ No newline at end of file
diff --git a/templates/partials/memberships.html b/templates/partials/memberships.html
new file mode 100644
index 0000000..9e9c074
--- /dev/null
+++ b/templates/partials/memberships.html
@@ -0,0 +1,85 @@
+{% block content %}
+
+{% if not paginator %} 
+    {% set paginator = section %}
+{% endif %}
+
+{% set path_array = current_path | split(pat="/") %}
+{% set taxonomy = path_array[1] %}
+{% set category = path_array[2] %}
+{% if path_array | length < 3%}
+{% set category = "All" %}
+{% endif %}
+
+<div class="-mt-16">
+    {% include "partials/filter_bar.html" %}
+    <div class="text-center main-title px-0 md:w-full mx-8 md:mx-12">
+        <div class="my-4 flex flex-col items-start">
+            <h1 class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal">
+            {{category | replace(from='-', to=' ' ) | title}}
+            </h1>
+            test
+            <div class="text-xl text-gray-800">
+                {{ paginator.total_pages ~ " People"}}
+            </div>
+        </div>
+
+        <hr/>
+
+        <div>
+            <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none">
+                {%- for page in paginator.pages %} 
+                    {% include "partials/person_card.html" %} 
+                {%- endfor %}
+            </div>
+            <hr class="mt-6" />
+            <p class="text-center text-sm mt-2 mb-16">
+              {% if paginator.previous %}
+              <a
+                class="border-transparent"
+                aria-label="First page"
+                href="{{ paginator.first }}"
+                >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+                "partials/icons/svgPrevPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <a
+                class="border-transparent"
+                aria-label="Previous page"
+                href="{{ paginator.previous }}"
+                >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+              include "partials/icons/svgFirstPageIcon.html" %}{% include
+              "partials/icons/svgFirstPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+              "partials/icons/svgFirstPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+              paginator.next %}
+              <a
+                class="border-transparent"
+                aria-label="Next page"
+                href="{{ paginator.next }}"
+                >{% include "partials/icons/svgNextPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <a
+                class="border-transparent"
+                aria-label="Last page"
+                href="{{ paginator.last }}"
+                >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+                "partials/icons/svgNextPageIcon.html" %}</a
+              >
+              {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+              "partials/icons/svgLastPageIcon.html" %}{% include
+              "partials/icons/svgLastPageIcon.html" %} {% endif %}
+            </p>
+        </div>
+    </div>
+
+</div>
+
+{% endblock content %}
diff --git a/templates/partials/newsCard.html b/templates/partials/newsCard.html
new file mode 100644
index 0000000..a594f3f
--- /dev/null
+++ b/templates/partials/newsCard.html
@@ -0,0 +1,59 @@
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
+  <div class="flex-1">
+    <a href={{ post.permalink }} class="block" style="pointer-events: none;">
+      <div class="flex-shrink-0">
+        {% if post.extra.imgPath %}
+        {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md', to=post.extra.imgPath)) %}
+        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="" />
+        {% endif %}
+      </div>
+      <div class="flex-1 bg-white p-4 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal leading-5 text-gray-500 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+    </a>
+    <div class="flex items-center">
+      <div class="flex justify-between items-center">
+        <ul class="list-none flex author-list my-10 mr-2 px-0">
+            {% if post.taxonomies.people %}
+            {% for author in post.taxonomies.people %}
+            {% set author_path = 'people/' ~ author ~ '/index.md' %}
+            {% set people = get_section(path="people/_index.md") %}           
+            {% set pages_str = people.pages | json_encode() | as_str %}
+            {% if pages_str is containing(author) %}
+                {% set author = get_page(path=author_path) %}
+                {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') | replace(from='index.md', to=author.extra.imgPath)) %}
+          <li class="author-list-item">
+            <a href="{{ author.permalink }}" tooltip="{{ author.title }}">
+              <img src="{{ author_img }}" alt="{{ author.title }}" class="
+                  w-8
+                  h-8
+                  rounded-full
+                  bg-gray-200
+                  border-2 border-white
+                " />
+            </a>
+          </li>
+          {% endif %}
+          {% endfor %}
+          {% endif %}
+        </ul>
+      </div>
+
+      <p class="text-gray-700 text-s">
+        {% if post.extra.socialLinks.contact %}
+        <a href="{{ post.extra.socialLinks.contact }}" class="border-1 text-s font-bold border-gray-600 hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full" target="_blank">
+            <u>Read More</u>
+        </a>
+    {% endif %}
+      </p>
+    </div>
+  </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/templates/partials/newsPosts.html b/templates/partials/newsPosts.html
new file mode 100644
index 0000000..75cda45
--- /dev/null
+++ b/templates/partials/newsPosts.html
@@ -0,0 +1,70 @@
+{% block content %}
+
+<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl lg:text-4xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set category = path_array[2] %}
+    The Latest from OurWorld Free Zone   
+    {% if taxonomy == "news-category" %} - 
+        {{category | replace(from='-', to=' ' ) | title}}
+    {% endif %}
+  </h1>
+  <div>
+    <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+        {% if "Engineering" == "Engineering"%}
+            {% include "partials/newsCard.html" %} 
+        {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}
diff --git a/templates/partials/newsSidebar.html b/templates/partials/newsSidebar.html
new file mode 100644
index 0000000..1d3f625
--- /dev/null
+++ b/templates/partials/newsSidebar.html
@@ -0,0 +1,38 @@
+
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER NEWS BY</h4>
+        <a id="all" class="mb-3 text-black font-normal" href="/newsroom">All</a>
+        {% set taxonomy = get_taxonomy(kind="news-category") %}
+        {% set categories = taxonomy.items %}
+        {% for category in categories %}
+            {% set path = category.name | slugify %}
+            {% set fullpath = "/news-category/" ~ path %}
+            <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{category.name}} </a>
+        {% endfor %}
+    </div>
+
+{% set section = get_section(path="newsroom/_index.md")%}
+
+    <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FEATURED NEWS</h4>
+
+        {% for page in section.pages %}
+        {% if page.extra.isFeatured %}
+            <a class="mb-3 text-blue-700" href={{page.permalink}}>{{ page.title }}</a>
+        {% endif %}
+        {% endfor %}
+        
+    </div>
+</div>
+
+<script>
+    function setActiveCategory() {
+        let activeCategory = window.location.pathname.split("/")[2]    
+        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeCategory)}
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveCategory()
+</script>
\ No newline at end of file
diff --git a/templates/partials/pageBox.html b/templates/partials/pageBox.html
new file mode 100644
index 0000000..f44fee4
--- /dev/null
+++ b/templates/partials/pageBox.html
@@ -0,0 +1,9 @@
+<div class="mb-8 flex flex-col">
+    <a href="{{page.permalink}}" class="text-lg font-medium cursor-pointer text-blue-400 py-4">
+        {{page.title | safe}}
+    </a>
+    {% include "partials/categories.html" %}
+    <p>
+        {{page.description | safe}}
+    </p>
+</div>
\ No newline at end of file
diff --git a/templates/partials/page_list.html b/templates/partials/page_list.html
new file mode 100644
index 0000000..b773a04
--- /dev/null
+++ b/templates/partials/page_list.html
@@ -0,0 +1,19 @@
+<div id="list"></div>
+{% if section.extra.group_pages_by %}
+    <div class="flex flex-col md:grid md:grid-cols-2 md:gap-12 lg:flex lg:flex-row justify-around text-center">
+        {% set taxonomy = get_taxonomy(kind=section.extra.group_pages_by) %}
+        {% set roles = taxonomy.items %}
+        {% for role in roles %}
+        <div class="flex flex-col items-start text-left my-8 mx-4 md:mx-8 lg:mx-4 flex-1 w-72">
+            {% set icon_path = config.extra.taxonomies["roles"][role.name].icon_path | as_str %}
+            <img src="{{icon_path}}" alt="role category icon" class="h-10 my-4">
+            {% set path = role.name | slugify %}
+            {% set fullpath = "/roles/" ~ path %}
+            <a href={{fullpath}} class="text-2xl text-black font-normal lg:mb-8 cursor-pointer"> {{role.name}} </a>
+            {% for page in role.pages %}
+                {% include "partials/pageBox.html"%}
+            {% endfor %}
+        </div>
+        {% endfor %}
+    </div>
+{% endif %}
\ No newline at end of file
diff --git a/templates/partials/personCard.html b/templates/partials/personCard.html
new file mode 100644
index 0000000..2204df7
--- /dev/null
+++ b/templates/partials/personCard.html
@@ -0,0 +1,26 @@
+<div class="flex flex-col px-0 sm:px-4 pb-2">
+    <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left">
+        {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+        <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
+        <div>
+            <h2 class="text-2xl">{{page.title}}</h2>
+            <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis">
+                {% if page.description %}
+                    {{page.description}}
+                {% else %}
+                    {{page.content | safe}}
+                {% endif %}
+            </div>
+            <div class="my-2 flex flex-row items-start flex-wrap">
+            {% if page.taxonomies.memberships %}
+            {% for tag in page.taxonomies.memberships %}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 text-xs font-light bg-transparent hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
+                </a>
+            {% endfor %}
+            {% endif %}
+            </div>
+        </div>
+    </a>
+</div>
+
diff --git a/templates/partials/person_card.html b/templates/partials/person_card.html
new file mode 100644
index 0000000..27ac9f3
--- /dev/null
+++ b/templates/partials/person_card.html
@@ -0,0 +1,21 @@
+<div class="flex flex-col px-0 sm:px-4 pb-2">
+    <a href="{{page.permalink}}" class="border-0 text-gray-700 hover:!text-gray-700 font-normal text-left ">
+        {% set url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md', to=page.extra.imgPath)) %}
+        <img src="{{url}}" alt="{{page.title ~ ' Picture'}}" />
+        <div>
+            <h2 class="text-2xl">{{page.title}}</h2>
+            <div class="text-md text-gray-700 text-left line-clamp-3 text-ellipsis" style="pointer-events: none;">
+                {% if page.description %}
+                    {{page.description}}
+                {% else %}
+                    {{page.content | safe}}
+                {% endif %}
+            </div>
+            <div class="my-2 flex flex-row items-start flex-wrap">
+                    <a href="{{ page.permalink }}" class="border-1 text-s font-bold border-gray-600 hover:text-blue-700 py-1 px-2 mr-2 my-1 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full" onclick="s">
+                        <u>More Info</u>
+                    </a>
+            </div>
+        </div>
+    </a>
+</div>
\ No newline at end of file
diff --git a/templates/partials/postCard.html b/templates/partials/postCard.html
new file mode 100644
index 0000000..b70123c
--- /dev/null
+++ b/templates/partials/postCard.html
@@ -0,0 +1,75 @@
+{% if post.date %}
+{% if post.taxonomies.people %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(post.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% set content = get_page(path=author_path) %}
+{% endif %}
+{% endif %}
+
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
+  <div class="flex-1 border-b">
+    <a href="{{ post.permalink }}" class="block">
+        {% if post.extra.imgPath %}
+      {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md',
+      to=post.extra.imgPath)) %}
+      <div class="flex-shrink-0">
+        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="{{post.title ~ ' Picture'}}" />
+      </div>
+      {%endif%}
+      <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-6 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal text-gray-500 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+        <div class="article hidden">{{ post.content | safe }}</div>
+
+        <div class="w-full post-card-meta py-3">
+          <div class="avatars">
+            <div class="flex">
+              <div class="flex">
+                <ul class="list-none flex author-list mr-2 pl-0">
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}"
+                      class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></li>
+                  {% endif %}
+                </ul>
+              </div>
+              <div class="flex flex-col text-left leading-none uppercase">
+                {% if author %}
+                <p class="text-gray-700 text-xs">{{ author.title }}</p>
+                {% endif %}
+                <p class="text-gray-700 text-xs">
+                  <time datetime="{{post.date}}">
+                    {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+                  </time>
+                </p>
+                <p class="flex justify-between lowercase my-2 items-center text-gray-700 text-xs"><span id="time"
+                    class="time"></span>
+                </p>
+              </div>
+              <br />
+            </div>
+          </div>
+        </div>
+    </a>
+  </div>
+
+</div>
+</div>
+
+<style>
+  .border-b {
+    border-bottom-width: 1px !important;
+  }
+</style>
+{% endif %}
\ No newline at end of file
diff --git a/templates/partials/productCard.html b/templates/partials/productCard.html
new file mode 100644
index 0000000..b70123c
--- /dev/null
+++ b/templates/partials/productCard.html
@@ -0,0 +1,75 @@
+{% if post.date %}
+{% if post.taxonomies.people %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(post.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ post.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% set content = get_page(path=author_path) %}
+{% endif %}
+{% endif %}
+
+<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
+  <div class="flex-1 border-b">
+    <a href="{{ post.permalink }}" class="block">
+        {% if post.extra.imgPath %}
+      {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md',
+      to=post.extra.imgPath)) %}
+      <div class="flex-shrink-0">
+        <img class="h-48 w-full mx-auto object-cover" src={{img_url}} alt="{{post.title ~ ' Picture'}}" />
+      </div>
+      {%endif%}
+      <div class="flex-1 bg-white p-6 flex flex-col justify-between">
+
+        <h3 class="mt-2 text-xl leading-6 font-medium text-gray-900 text-left not-italic">
+          {{ post.title }}
+        </h3>
+        {% if post.description %}
+        <p class="mt-3 text-sm font-normal text-gray-500 text-left">
+          {{ post.description }}
+        </p>
+        {% endif %}
+        <div class="article hidden">{{ post.content | safe }}</div>
+
+        <div class="w-full post-card-meta py-3">
+          <div class="avatars">
+            <div class="flex">
+              <div class="flex">
+                <ul class="list-none flex author-list mr-2 pl-0">
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <li class="author-list-item"><img alt="{{author.title}}" src="{{author_img}}"
+                      class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"></li>
+                  {% endif %}
+                </ul>
+              </div>
+              <div class="flex flex-col text-left leading-none uppercase">
+                {% if author %}
+                <p class="text-gray-700 text-xs">{{ author.title }}</p>
+                {% endif %}
+                <p class="text-gray-700 text-xs">
+                  <time datetime="{{post.date}}">
+                    {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
+                  </time>
+                </p>
+                <p class="flex justify-between lowercase my-2 items-center text-gray-700 text-xs"><span id="time"
+                    class="time"></span>
+                </p>
+              </div>
+              <br />
+            </div>
+          </div>
+        </div>
+    </a>
+  </div>
+
+</div>
+</div>
+
+<style>
+  .border-b {
+    border-bottom-width: 1px !important;
+  }
+</style>
+{% endif %}
\ No newline at end of file
diff --git a/templates/partials/productPosts.html b/templates/partials/productPosts.html
new file mode 100644
index 0000000..862f041
--- /dev/null
+++ b/templates/partials/productPosts.html
@@ -0,0 +1,70 @@
+{% block content %}
+
+<div class="text-center main-title px-0 md:w-2/3 lg:w-2/3 mx-8 md:mx-12">
+  <h1
+    class="tracking-tight text-left text-2xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+  >
+  {% set path_array = current_path | split(pat="/") %}
+  {% set taxonomy = path_array[1] %}
+  {% set item = path_array[2] %}
+    The Latest from OurPhone   
+    {% if taxonomy == "items" %} - 
+        {{item | replace(from='-', to=' ' ) | title}}
+    {% endif %}
+  </h1>
+  <div>
+    <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-3 lg:max-w-none">
+      {%- for post in paginator.pages %} 
+          {% if not post.extra.hidden %}
+            {% include "partials/productCard.html" %} 
+         {%endif%} {%- endfor %}
+    </div>
+    <hr class="mt-6" />
+    <p class="text-center text-sm mt-2 mb-16">
+      {% if paginator.previous %}
+      <a
+        class="border-transparent"
+        aria-label="First page"
+        href="{{ paginator.first }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+        "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Previous page"
+        href="{{ paginator.previous }}"
+        >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+      include "partials/icons/svgFirstPageIcon.html" %}{% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgFirstPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+      paginator.next %}
+      <a
+        class="border-transparent"
+        aria-label="Next page"
+        href="{{ paginator.next }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      <a
+        class="border-transparent"
+        aria-label="Last page"
+        href="{{ paginator.last }}"
+        >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+        "partials/icons/svgNextPageIcon.html" %}</a
+      >
+      {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+      "partials/icons/svgLastPageIcon.html" %}{% include
+      "partials/icons/svgLastPageIcon.html" %} {% endif %}
+    </p>
+  </div>
+</div>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/productSidebar.html b/templates/partials/productSidebar.html
new file mode 100644
index 0000000..e450ad7
--- /dev/null
+++ b/templates/partials/productSidebar.html
@@ -0,0 +1,38 @@
+
+<div class="mx-8 md:mx-4 flex flex-col">
+    <div class="flex flex-col mb-12 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FILTER PRODUCTS BY</h4>
+        <a id="all" class="mb-3 text-black font-normal" href="/products">All</a>
+        {% set taxonomy = get_taxonomy(kind="items") %}
+        {% set items = taxonomy.items %}
+        {% for item in items %}
+            {% set path = item.name | slugify %}
+            {% set fullpath = "/items/" ~ path %}
+            <a id="{{path}}" class="mb-3 text-black font-normal" href={{fullpath}}> {{item.name}} </a>
+        {% endfor %}
+    </div>
+
+{% set section = get_section(path="products/_index.md")%}
+
+    <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
+        <h4 class="text-base not-italic font-medium leading-6 text-gray-600 mb-6"> FEATURED POSTS</h4>
+
+        {% for page in section.pages %}
+        {% if page.extra.isFeatured %}
+            <a class="mb-3 text-blue-700" href={{page.permalink}}>{{ page.title }}</a>
+        {% endif %}
+        {% endfor %}
+        
+    </div>
+</div>
+
+<script>
+    function setActiveProduct() {
+        let activeProduct = window.location.pathname.split("/")[2]    
+        if (typeof activeProduct === "undefined") { activeLink = document.getElementById("all") }
+        else { activeLink = document.getElementById(activeProduct)}
+        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
+    }
+
+    setActiveProduct()
+</script>
\ No newline at end of file
diff --git a/templates/partials/socialLinks.html b/templates/partials/socialLinks.html
new file mode 100644
index 0000000..363222e
--- /dev/null
+++ b/templates/partials/socialLinks.html
@@ -0,0 +1,23 @@
+<div class="flex space-x-6 items-center justify-center">
+    {% for key, link in section.extra.socialLinks %}
+
+        <a href="{{link}}" target="_blank" class="text-gray-400 hover:text-gray-500">
+        <span class="sr-only">{{key}}</span>
+        {% if key == "Facebook" %}
+        {% include "partials/icons/svgFacebookIcon.html" %}
+        {% elif key == "Github" %}
+        {% include "partials/icons/svgGithubIcon.html" %}
+        {% elif key == "Instagram" %}
+        {% include "partials/icons/svgInstagramIcon.html" %}
+        {% elif key == "Twitter" %}
+        {% include "partials/icons/svgTwitterIcon.html" %}
+        {% elif key == "Dribbble" %}
+        {% include "partials/icons/svgDribbbleIcon.html" %}
+        {% elif key == "Telegram" %}
+        {% include "partials/icons/svgTelegram.html" %}
+        {% endif %}
+        </a>
+
+    {% endfor %}
+
+  </div>
\ No newline at end of file
diff --git a/templates/partials/tags.html b/templates/partials/tags.html
new file mode 100644
index 0000000..5db604a
--- /dev/null
+++ b/templates/partials/tags.html
@@ -0,0 +1,5 @@
+<div class="flex mb-4">
+    {% for tag in page.taxonomies.categories %}
+        <div class="bg-gray-200 rounded font-semibold text-xs w-auto px-2 py-1 mr-2">{{tag}}</div>
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/templates/partnerPage.html b/templates/partnerPage.html
new file mode 100644
index 0000000..705957a
--- /dev/null
+++ b/templates/partnerPage.html
@@ -0,0 +1,57 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-16 lg:w-4/6">
+  <div class="flex flex-row flex-wrap items-center mx-4 sm:mx-0">
+    <div class="w-full md:w-1/6 mx-auto sm:mx-0">
+      <img src="{{page.extra.partner_logo}}" class="
+            rounded-full
+            bg-gray-200
+            w-32
+            h-32
+            border-4 border-gray-400
+            mx-auto
+            md:mx-0
+          " />
+    </div>
+    <div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
+      <h1 class="pb-0 mb-0 mt-0 text-4xl font-medium">
+        {{ page.title }}
+      </h1>
+
+      <div class="avatars">
+        <section class="container mx-auto py-2">
+          <ul class="list-none flex author-list my-2 px-0">
+            {% if page.extra.websites %}
+            <li class="mr-2">
+              <a href="{{page.extra.websites}}" target="_blank" rel="noopener noreferrer"
+                class="text-gray-400 hover:text-black linkedin_size mx-1">
+                <i class="fa-solid fa-globe fa-2x"></i> </a>
+            </li>
+            {% endif %}
+            {% if page.extra.linkedin %}
+            <li>
+              <a href="{{page.extra.linkedin}}" target="_blank" rel="noopener noreferrer"
+                class="text-gray-400 hover:text-black linkedin_size mx-1">
+                <i class="fa-brands fa-linkedin fa-2x"></i> </a>
+            </li>
+            {% endif %}
+          </ul>
+          {% for tag in page.taxonomies.tags %}
+          <a href="{{'/tags/' ~ tag}}" class="border-1 font-light text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+              {{tag}}
+          </a>
+      {% endfor %}
+        </section>
+      </div>
+    </div>
+  </div>
+
+  <div class="pt-8 border-b mx-4 sm:-mx-4"></div>
+
+  <section class="post-content container mx-auto relative text-gray-700">
+    <div class="post-content-text text-xl">{{ page.content | safe }}</div>
+  </section>
+</div>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/people/list.html b/templates/people/list.html
new file mode 100644
index 0000000..77eee45
--- /dev/null
+++ b/templates/people/list.html
@@ -0,0 +1,84 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+
+<div class="container mx-auto">
+    {% include "partials/filter_bar.html" %}
+    
+    <div class="text-center main-title px-0 md:w-full">
+      <h1
+        class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+      >
+      {%- set section = get_section(path="people/_index.md") %}
+
+      {% set path_array = current_path | split(pat="/") %}
+      {% set taxonomy = path_array[1] %}
+      {% set category = path_array[2] %}
+        {{category | replace(from='-', to=' ' ) | title}}
+      </h1>
+      <div>
+        <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none">
+          {% for person in section.pages %} 
+            {% set page_path = person.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/") %}
+            {% set people = get_section(path="people/_index.md") %}
+            {% set pages_str = people.pages | json_encode() | as_str %}
+            {% if pages_str is containing(person.title) %}
+                {% set page = get_page(path=page_path) %}
+                {% if page.extra.private >= 0 %}
+                {% if page.title != "ThreeFold_Community"%}
+                    {% include "partials/person_card.html" %}
+                {% endif %}
+                {% endif %}
+            {% endif %}
+        {% endfor %}
+        </div>
+        <hr class="mt-6" />
+        <p class="text-center text-sm mt-2 mb-16">
+          {% if paginator.previous %}
+          <a
+            class="border-transparent"
+            aria-label="First page"
+            href="{{ paginator.first }}"
+            >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+            "partials/icons/svgPrevPageIcon.html" %}</a
+          >
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <a
+            class="border-transparent"
+            aria-label="Previous page"
+            href="{{ paginator.previous }}"
+            >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+          >
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+          include "partials/icons/svgFirstPageIcon.html" %}{% include
+          "partials/icons/svgFirstPageIcon.html" %}
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+          "partials/icons/svgFirstPageIcon.html" %}
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+          paginator.next %}
+          <a
+            class="border-transparent"
+            aria-label="Next page"
+            href="{{ paginator.next }}"
+            >{% include "partials/icons/svgNextPageIcon.html" %}</a
+          >
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <a
+            class="border-transparent"
+            aria-label="Last page"
+            href="{{ paginator.last }}"
+            >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+            "partials/icons/svgNextPageIcon.html" %}</a
+          >
+          {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+          "partials/icons/svgLastPageIcon.html" %}{% include
+          "partials/icons/svgLastPageIcon.html" %} {% endif %}
+        </p>
+      </div>
+    </div>
+</div>
+
+{% endblock content %}
diff --git a/templates/people/memberships/list.html b/templates/people/memberships/list.html
new file mode 100644
index 0000000..f628a84
--- /dev/null
+++ b/templates/people/memberships/list.html
@@ -0,0 +1,4 @@
+{% extends "index.html" %}
+
+{% block content %}
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/people/memberships/single.html b/templates/people/memberships/single.html
new file mode 100644
index 0000000..e357e75
--- /dev/null
+++ b/templates/people/memberships/single.html
@@ -0,0 +1,88 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+{% if not paginator %} 
+    {% set paginator = section %}
+{% endif %}
+
+{% set path_array = current_path | split(pat="/") %}
+{% set taxonomy = path_array[1] %}
+{% set category = path_array[2] %}
+{% if path_array | length < 3%}
+{% set category = "All" %}
+{% endif %}
+
+<div class="mt-16">
+    {% include "partials/filter_bar.html" %}
+    <div class="text-center main-title px-0 md:w-full mx-8 md:mx-12">
+        <div class="my-4 flex flex-col items-start">
+            <h1 class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal">
+            {{category | replace(from='-', to=' ' ) | title}}
+            </h1>
+            <div class="text-xl text-gray-800">
+                {{ paginator.total_pages ~ " People"}}
+            </div>
+        </div>
+
+        <hr/>
+
+        <div>
+            <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 xl:grid-cols-4 lg:max-w-none">
+                {%- for page in paginator.pages %} 
+                    {% include "partials/person_card.html" %} 
+                {%- endfor %}
+            </div>
+            <hr class="mt-6" />
+            <p class="text-center text-sm mt-2 mb-16">
+              {% if paginator.previous %}
+              <a
+                class="border-transparent"
+                aria-label="First page"
+                href="{{ paginator.first }}"
+                >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+                "partials/icons/svgPrevPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <a
+                class="border-transparent"
+                aria-label="Previous page"
+                href="{{ paginator.previous }}"
+                >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+              include "partials/icons/svgFirstPageIcon.html" %}{% include
+              "partials/icons/svgFirstPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+              "partials/icons/svgFirstPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+              paginator.next %}
+              <a
+                class="border-transparent"
+                aria-label="Next page"
+                href="{{ paginator.next }}"
+                >{% include "partials/icons/svgNextPageIcon.html" %}</a
+              >
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <a
+                class="border-transparent"
+                aria-label="Last page"
+                href="{{ paginator.last }}"
+                >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+                "partials/icons/svgNextPageIcon.html" %}</a
+              >
+              {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+              "partials/icons/svgLastPageIcon.html" %}{% include
+              "partials/icons/svgLastPageIcon.html" %} {% endif %}
+            </p>
+        </div>
+    </div>
+
+</div>
+
+{% endblock content %}
+
+
diff --git a/templates/people/news-category/list.html b/templates/people/news-category/list.html
new file mode 100644
index 0000000..f628a84
--- /dev/null
+++ b/templates/people/news-category/list.html
@@ -0,0 +1,4 @@
+{% extends "index.html" %}
+
+{% block content %}
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/people/news-category/single.html b/templates/people/news-category/single.html
new file mode 100644
index 0000000..5db2970
--- /dev/null
+++ b/templates/people/news-category/single.html
@@ -0,0 +1,14 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<main class="pt-16">
+
+    <div class="flex flex-col md:flex-row">
+        {% include "partials/newsPosts.html" %}
+        {% include "partials/newsSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+
diff --git a/templates/people/single.html b/templates/people/single.html
new file mode 100644
index 0000000..e7cff97
--- /dev/null
+++ b/templates/people/single.html
@@ -0,0 +1,55 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% set page_path = term.path ~ 'index.md' | replace(from='-', to='_') | trim_start_matches(pat="/") %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(term.name) %}
+    {% set page = get_page(path=page_path) %}
+
+
+<div class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24">
+    <div class="flex flex-row flex-wrap items-start mx-4 sm:mx-0">
+        <div class="w-full md:w-1/6 mx-auto sm:mx-0">
+            <img src="{{page.extra.imgPath}}" alt="" class="rounded bg-gray-200 w-48 border-2 border-gray-400 mx-auto md:mx-0 g-image g-image--lazy g-image--loaded my-4">
+        </div>
+        <div class="w-full md:w-5/6 text-center md:text-left md:pl-8">
+            <div class="flex flex-row items-center">
+                <h1 class="pb-0 mb-0 mt-0 text-4xl font-normal tracking-wide my-1">
+                    {{page.title}}
+                </h1>
+            </div>
+            <div class="text-gray-700 my-4">
+                {{page.content | safe }}
+            </div>
+            <div class="flex items-center">
+                <div class="flex justify-between items-center">
+                    <ul class="list-none flex author-list m-0 py-2">
+                        {% for org in page.extra.organizations %}
+                            <li>
+                                <a href="">
+                                    <img src="" alt="">
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+            {% if page.taxonomies.memberships %}
+            {% for tag in page.taxonomies.memberships %}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 font-light text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
+                </a>
+            {% endfor %}
+            {% endif %}
+        </div>
+    </div>
+    <div class="my-8">
+        <hr/>
+        <br/>
+        <hr/>
+    </div>
+</div>
+{% endif %}
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/people/tags/list.html b/templates/people/tags/list.html
new file mode 100644
index 0000000..f628a84
--- /dev/null
+++ b/templates/people/tags/list.html
@@ -0,0 +1,4 @@
+{% extends "index.html" %}
+
+{% block content %}
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/people/tags/single.html b/templates/people/tags/single.html
new file mode 100644
index 0000000..025e23e
--- /dev/null
+++ b/templates/people/tags/single.html
@@ -0,0 +1,14 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<main class="pt-16">
+
+    <div class="flex flex-col md:flex-row">
+        {% include "partials/tagsCards.html" %}
+        {% include "partials/tagsSidebar.html" %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+
diff --git a/templates/people_page.html b/templates/people_page.html
new file mode 100644
index 0000000..8e94af9
--- /dev/null
+++ b/templates/people_page.html
@@ -0,0 +1,73 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+
+<div class="container mx-auto">
+    {% include "partials/filter_bar.html" %}
+    
+    <div class="text-center main-title px-0 md:w-full">
+      <h1
+        class="tracking-tight text-5xl text-left text-2xl sm:text-3xl md:text-4xl lg:text-5xl fw-500 leading-snug font-normal mb-10"
+      >
+      {% set path_array = current_path | split(pat="/") %}
+      {% set taxonomy = path_array[1] %}
+      {% set category = path_array[2] %}
+        {{category | replace(from='-', to=' ' ) | title}}
+      </h1>
+      <div>
+        <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-2 xl:grid-cols-4 lg:max-w-none">
+          {%- for page in paginator.pages %} 
+            {% if "Engineering" == "Engineering"%}
+                {% include "partials/person_card.html" %} 
+            {%endif%} {%- endfor %}
+        </div>
+        <hr class="mt-6" />
+        <p class="text-center text-sm mt-2 mb-16">
+          {% if paginator.previous %}
+          <a
+            class="border-transparent"
+            aria-label="First page"
+            href="{{ paginator.first }}"
+            >{% include "partials/icons/svgPrevPageIcon.html" %}{% include
+            "partials/icons/svgPrevPageIcon.html" %}</a
+          >
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <a
+            class="border-transparent"
+            aria-label="Previous page"
+            href="{{ paginator.previous }}"
+            >{% include "partials/icons/svgPrevPageIcon.html" %}</a
+          >
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% else %} {%
+          include "partials/icons/svgFirstPageIcon.html" %}{% include
+          "partials/icons/svgFirstPageIcon.html" %}
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+          "partials/icons/svgFirstPageIcon.html" %}
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% endif %} {% if
+          paginator.next %}
+          <a
+            class="border-transparent"
+            aria-label="Next page"
+            href="{{ paginator.next }}"
+            >{% include "partials/icons/svgNextPageIcon.html" %}</a
+          >
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <a
+            class="border-transparent"
+            aria-label="Last page"
+            href="{{ paginator.last }}"
+            >{% include "partials/icons/svgNextPageIcon.html" %}{% include
+            "partials/icons/svgNextPageIcon.html" %}</a
+          >
+          {% else %} {% include "partials/icons/svgLastPageIcon.html" %}
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {% include
+          "partials/icons/svgLastPageIcon.html" %}{% include
+          "partials/icons/svgLastPageIcon.html" %} {% endif %}
+        </p>
+      </div>
+    </div>
+</div>
+
+{% endblock content %}
diff --git a/templates/person_page.html b/templates/person_page.html
new file mode 100644
index 0000000..df358b1
--- /dev/null
+++ b/templates/person_page.html
@@ -0,0 +1,45 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<div class="container sm:pxi-0 lg:w-5/6 mx-auto min-h-screen overflow-x-hidden pt-24">
+    <div class="flex flex-row flex-wrap items-start mx-4 sm:mx-0">
+        <div class="w-full md:w-1/6 mx-auto sm:mx-0">
+            <img src="{{page.extra.imgPath}}" alt="" class="rounded bg-gray-200 w-48 border-2 border-gray-400 mx-auto md:mx-0 g-image g-image--lazy g-image--loaded my-4">
+        </div>
+        <div class="w-full md:w-5/6 text-center md:text-left md:pl-8">
+            <div class="flex flex-row items-center">
+                <h1 class="pb-0 mb-0 mt-0 text-4xl font-normal tracking-wide my-1">
+                    {{page.title}}
+                </h1>
+            </div>
+            <div class="text-gray-700 my-4">
+                {{page.content | safe }}
+            </div>
+            <div class="flex items-center">
+                <div class="flex justify-between items-center">
+                    <ul class="list-none flex author-list m-0 py-2">
+                        {% for org in page.extra.organizations %}
+                            <li>
+                                <a href="">
+                                    <img src="" alt="">
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+            {% for tag in page.taxonomies.memberships %}
+                <a href="{{'/memberships/' ~ tag | replace(from='_', to='-' )}}" class="border-1 font-light text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full ">
+                    {{tag}}
+                </a>
+            {% endfor %}
+        </div>
+    </div>
+    <div class="my-8">
+        <hr/>
+        <br/>
+        <hr/>
+    </div>
+</div>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/positionPage.html b/templates/positionPage.html
new file mode 100644
index 0000000..ee8059d
--- /dev/null
+++ b/templates/positionPage.html
@@ -0,0 +1,31 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<!-- Default page template for blog posts and basic informative markdown files -->
+<main>
+
+{% set banner_path = config.extra.taxonomies["roles"][page.taxonomies.roles[0]].banner_path | as_str %}
+{% set styles = "background: url('/" ~ banner_path ~ "'); background-size: cover; background-position: center"  %}
+
+<div class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 -mt-6 max-w-none py-28 max-h-80" style="{{styles}}"></div>
+<div class="flex flex-col lg:flex-row md:mx-4 lg:mx-6">
+    <article class="article mx-auto lg:w-1/2 lg:mr-8 lg:mt-10">
+        <div class="pt-8 lg:pt-8 2xl:pt-24">
+            <h3 class="text-2xl font-normal my-0 text-gray-600">Our World</h3>
+            <h1 class="text-left text-5xl font-normal my-2 font-medium">
+                {{ page.title }} 
+            </h1>
+            <p class="my-4">{{page.description}}</p>
+            {% include "partials/categories.html" %}
+        </div>
+        {{ page.content | safe }}
+    </article>
+    <div class="mx-auto lg:mt-12">
+        {% include "partials/applicationForm.html"%}
+    </div>
+</div>
+    
+</div>
+</main>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/productPage.html b/templates/productPage.html
new file mode 100644
index 0000000..e93e750
--- /dev/null
+++ b/templates/productPage.html
@@ -0,0 +1,82 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% if page.taxonomies.people %}
+{% set people = get_section(path="people/_index.md") %}
+{% set pages_str = people.pages | json_encode() | as_str %}
+{% if pages_str is containing(page.taxonomies.people[0]) %}
+{% set author_path = 'people/' ~ page.taxonomies.people[0] ~ '/index.md' %}
+{% set author = get_page(path=author_path) %}
+{% endif %}
+{% endif %}
+
+<!-- Default page template for blog posts and basic informative markdown files -->
+
+{% set split = page.content | split(pat="ourphone.tf") %}
+{% if split | length < 2 %} {% set content=page.content %} {% else %} {% set content="" %} {% for part in split %} {% if
+  part is starting_with("/product") %} {% set split_part=part | split(pat='/">' ) %} {% set link=split_part[0] %} {% set
+  link=link | replace(from="/product/post" , to="/product" ) %} {% set link=link | replace(from="_" , to="-" ) %} {% set
+  rest_part=split_part | slice(start=1) | join(sep='/"' ) %} {% set part=link ~ '/">' ~ rest_part %} {% endif %} {% if
+  loop.first %} {% set_global content=part%} {% else %} {% set_global content=content ~ "ourphone.tf" ~ part%} {% endif
+  %} {% endfor %} {% endif %} <main>
+
+  <div class="container mx-auto mt-20">
+
+    <div>
+      <article class="article lg:w-4/6 mx-auto">
+        <h1 class="lg:text-5xl text-2xl font-medium leading-none mt-0  text-gray-700">
+          {{ page.title }}
+        </h1>
+
+        <h4 class="lg:text-2xl text-base text-gray-600 leading-8">
+          {{ page.description }}
+        </h4>
+        <section class="post-author-list mb-3 mx-0">
+          <div class="flex items-center">
+            <div class="flex justify-between items-center">
+              <ul class="list-none flex author-list m-0">
+                <li class="author-list-item">
+                  {% if author %}
+                  {% set author_img = get_url(path='/' ~ author.relative_path | replace(from='_', to='-') |
+                  replace(from='index.md', to=author.extra.imgPath)) %}
+                  <img src="{{author_img}}" alt="{{author.title}}" class="
+                        h-8
+                        w-8
+                        sm:h-10
+                        sm:w-10
+                        rounded-full
+                        bg-gray-200
+                        border-2 border-white
+                      " />
+                </li>
+                {% endif %}
+              </ul>
+            </div>
+
+            <div class="pl-3 flex flex-col text-xs leading-none uppercase">
+              {% if author %}
+              <a href="{{author.permalink}}" class="text-gray-700 text-xs">{{ author.title }}</a>
+              {% endif %}
+              <p class="text-gray-700 text-xs">
+                <time datetime="{{ page.date }}"> {{ page.date | date(format="%B %e, %Y", timezone="America/Chicago")
+                  }}</time><br />
+                  <span id="time"
+                    class="time"></span>
+              </p>
+            </div>
+
+          </div>
+          <div class="my-2 sharethis-inline-share-buttons"></div>
+        </section>
+        {% set img_url = get_url(path='/' ~ page.relative_path | replace(from='_', to='-') | replace(from='index.md',
+        to=page.extra.imgPath)) %}
+        <img class="mb-8 mx-auto" src={{img_url}} alt="{{page.title ~ 'Picture'}}">
+        <div>{{ content | safe }}</div>
+      </article>
+    </div>
+
+
+  </div>
+  </main>
+
+  {% endblock content %}
\ No newline at end of file
diff --git a/templates/resourcesPage.html b/templates/resourcesPage.html
new file mode 100644
index 0000000..cc7f0aa
--- /dev/null
+++ b/templates/resourcesPage.html
@@ -0,0 +1,36 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+<div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-6 px-4 text-center">
+
+  <div class="py-12">
+    <section class="
+      post-content
+      container
+      mx-auto
+      relative
+      font-serif
+      text-gray-900 text-center
+    ">
+      <img class="mx-auto w-3/4" src={{page.extra.imgPath}} />
+      <div class="post-content-text text-xl text-center mx-auto my-5">{{ page.content | safe }}</div>
+    </section>
+
+    <button class="
+      inline-block
+      bg-white
+      text-lg
+      learn-button
+      hover:bg-gray-400
+      px-12
+      py-1
+      mr-5
+      my-8
+      border-2
+      shadow
+      border-black
+      capitalize
+    "><a href="{{page.extra.link}}">{{ page.extra.button }}</a></button>
+  </div>
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/roles/list.html b/templates/roles/list.html
new file mode 100644
index 0000000..7330b1f
--- /dev/null
+++ b/templates/roles/list.html
@@ -0,0 +1,7 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+{{ terms }}
+
+{% endblock content %}
diff --git a/templates/roles/single.html b/templates/roles/single.html
new file mode 100644
index 0000000..f089d8c
--- /dev/null
+++ b/templates/roles/single.html
@@ -0,0 +1,35 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<!-- Default page template for blog posts and basic informative markdown files -->
+<main>
+
+{% set banner_path = config.extra.taxonomies["roles"][term.name].banner_path | as_str %}
+{% set styles = "background: url('/" ~ banner_path ~ "'); background-size: cover; background-position: center"  %}
+
+<div class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 -mt-6 max-w-none py-28 max-h-80" style="{{styles}}"></div>
+<div class="flex flex-col lg:flex-row md:mx-4 lg:mx-6">
+    <article class="article mx-auto lg:w-1/2 lg:mr-8 lg:mt-10">
+        <div class="pt-8 lg:pt-8 2xl:pt-24">
+            <h3 class="text-2xl font-normal my-0 text-gray-600">Our World</h3>
+            <h1 class="text-left font-normal my-2 font-medium">
+                {{ config.extra.taxonomies["roles"][term.name].title }} 
+            </h1>
+            <p class="my-4">{{config.extra.taxonomies["roles"][term.name].description}}</p>
+        </div>
+        <hr />
+        <h3 class="text-black text-lg">{{term.name}} @ Ourworld</h3>
+        {% for page in term.pages %}
+            {% include "partials/pageBox.html"%}
+        {% endfor %}
+    </article>
+    <div class="mx-auto lg:mt-12">
+        {% include "partials/applicationForm.html"%}
+    </div>
+</div>
+    
+</div>
+</main>
+
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/section.html b/templates/section.html
new file mode 100644
index 0000000..e328616
--- /dev/null
+++ b/templates/section.html
@@ -0,0 +1,11 @@
+{% extends "_default/base.html" %}
+
+{% block content %}
+
+<main class="lg:-mt-6">
+    {{ section.content | safe}}
+    <!-- <hr> -->
+    {% include "partials/page_list.html" %}
+ </main> 
+ 
+ {% endblock content %}
diff --git a/templates/shortcodes/admonition.html b/templates/shortcodes/admonition.html
new file mode 100644
index 0000000..0fff67e
--- /dev/null
+++ b/templates/shortcodes/admonition.html
@@ -0,0 +1,65 @@
+<!-- admonition shortcode for adding admonition in md-->
+
+{% set classes = "" %}
+
+{% set first_line = body | split(pat="\n") | first %}
+{% set parsed_first_line = first_line | split(pat=" ") %}
+{% set admonition = parsed_first_line | first %}
+{% set style = "" %}
+
+{% set content = body | split(pat="\n") | slice(start=2) | join(sep="\n") %}
+
+<!-- sets admonition type depending on qualifiers and modifiers 
+    hides content if doesn't adhere to admonition formatting -->
+{% if admonition == "!!!" %}
+    {% set classes = "admonition" %}
+{% elif admonition == "???" %}
+    {% set style = "collapsible closed" %}
+    {% set classes = "admonition" %}
+{% elif admonition == "???+" %}
+    {% set style = "collapsible open" %}
+    {% set classes = "admonition" %}
+{% else %}
+    {% set classes = "hidden" %}
+{% endif %}
+
+{% if "inline end" in first_line %}
+    {% set classes = classes ~ " inline end" %}
+    {% set parsed_first_line = parsed_first_line | slice(end=-2)%}
+{% elif "inline" in first_line %}
+    {% set classes = classes ~ " inline" %}
+    {% set parsed_first_line = parsed_first_line | slice(end=-1)%}
+{% endif %}
+
+{% if classes != "hidden"%}
+    {% if parsed_first_line[1] %}
+        {% set classes = classes ~ " " ~ parsed_first_line[1] %}
+    {% endif %}
+    {% if parsed_first_line[2] %}
+        {% if not parsed_first_line[2] == '""' %}
+            {% set title = parsed_first_line | slice(start=2) | join(sep=" ") %}     
+        {% endif %}
+    {% else %}
+        {% if parsed_first_line[1] %}
+            {% set title = parsed_first_line[1] | title %}
+        {% endif %}
+    {% endif %}
+{% endif %}
+
+
+{% if "collapsible" in style %}
+    <details class="{{classes}}" 
+    {% if "open" in style %} {{ "open='open'" }} {% endif %}>
+        {% if title %}
+            <summary class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</summary>
+            <p>{{ content }}</p>
+        {% endif %}
+    </details>
+{% else %}
+    <div class="{{classes}}">
+        {% if title %}
+            <div class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</div>
+        {% endif %}
+        <p>{{ content }}</p>
+    </div>
+{% endif %}
diff --git a/templates/shortcodes/banner.html b/templates/shortcodes/banner.html
new file mode 100644
index 0000000..64e540a
--- /dev/null
+++ b/templates/shortcodes/banner.html
@@ -0,0 +1,19 @@
+<div class="bg-white pb-6 sm:pb-8 lg:pb-12">
+    <!-- banner - start -->
+    <div class="relative flex flex-wrap bg-indigo-500 px-4 py-3 sm:flex-nowrap sm:items-center sm:justify-center sm:gap-3 sm:pr-8 md:px-8">
+      <div class="order-1 mb-2 inline-block w-11/12 max-w-screen-sm text-sm text-white sm:order-none sm:mb-0 sm:w-auto md:text-base">{{ banner_text }}</div>
+  
+      <a href="#" class="order-last inline-block w-full whitespace-nowrap rounded-lg bg-indigo-600 px-4 py-2 text-center text-xs font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-700 focus-visible:ring active:bg-indigo-800 sm:order-none sm:w-auto md:text-sm">{{ banner_button }}</a>
+  
+      <!-- close button - start -->
+      <div class="order-2 flex w-1/12 items-start justify-end sm:absolute sm:right-0 sm:order-none sm:mr-1 sm:w-auto xl:mr-3">
+        <button type="button" class="text-black transition duration-100 hover:text-indigo-100 active:text-indigo-200">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <!-- close button - end -->
+    </div>
+    <!-- banner - end -->
+  </div>
\ No newline at end of file
diff --git a/templates/shortcodes/button.html b/templates/shortcodes/button.html
new file mode 100644
index 0000000..56519cd
--- /dev/null
+++ b/templates/shortcodes/button.html
@@ -0,0 +1,5 @@
+
+{% set path = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"') | trim_end_matches(pat='"') %}
+<button onclick="window.location='{{path}}'" class="border-transparent flex flex-col border-2 w-full items-start rounded h-16 md:h-24 transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
+    {{ body | trim_start_matches(pat="<p>") | safe}}
+</button>
\ No newline at end of file
diff --git a/templates/shortcodes/content1.html b/templates/shortcodes/content1.html
new file mode 100644
index 0000000..12e418b
--- /dev/null
+++ b/templates/shortcodes/content1.html
@@ -0,0 +1,28 @@
+<div class="bg-white py-6 sm:py-8 lg:py-12">
+  <div class="mx-auto max-w-screen-md px-4 md:px-8">
+    <h1 class="mb-4 text-center text-2xl font-bold text-gray-800 sm:text-3xl md:mb-6">{{ content1_title }}</h1>
+
+    <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
+      {{ content1_text }}
+    </p>
+
+
+    <h2 class="mb-2 text-xl font-semibold text-gray-800 sm:text-2xl md:mb-4">{{ content1_subtitle }}</h2>
+
+    <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">{{ content1_title2 }}</p>
+
+    <ul class="mb-6 list-inside list-disc text-gray-500 sm:text-lg md:mb-8">
+      <li>{{ content1_item1 }}</li>
+      <li>{{ content1_item2 }}</li>
+      <li>{{ content1_item3 }}</li>
+    </ul>
+
+    <blockquote class="mb-6 border-l-4 pl-4 italic text-gray-500 sm:text-lg md:mb-8 md:pl-6">{{ quate_title }}</blockquote>
+
+    <div class="relative mb-6 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:mb-8">
+      <img src="{{ content1_photo }}" loading="lazy" alt="Photo by Minh Pham" class="h-full w-full object-cover object-center" />
+    </div>
+
+    
+  </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/cta.html b/templates/shortcodes/cta.html
new file mode 100644
index 0000000..7473ab9
--- /dev/null
+++ b/templates/shortcodes/cta.html
@@ -0,0 +1,23 @@
+<div class="bg-white py-6 sm:py-8 lg:py-12">
+  <div class="mx-auto max-w-screen-2xl px-4 md:px-8">
+    <div class="flex flex-col overflow-hidden rounded-lg bg-gray-900 sm:flex-row md:h-80">
+      <!-- content - start -->
+      <div class="flex w-full flex-col p-4 sm:w-1/2 sm:p-8 lg:w-2/5">
+        <h2 class="mb-4 text-xl font-bold text-white md:text-2xl lg:text-4xl">{{ cta_title}}</h2>
+
+        <p class="mb-8 max-w-md text-gray-400">{{ cta_text}}</p>
+
+        <div class="mt-auto">
+          <a href="{{ cta_link }}" class="inline-block rounded-lg bg-white px-8 py-3 text-center text-sm font-semibold text-gray-800 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-100 focus-visible:ring active:bg-gray-200 md:text-base">{{ cta_link_name }}</a>
+        </div>
+      </div>
+      <!-- content - end -->
+
+      <!-- image - start -->
+      <div class="order-first h-48 w-full bg-gray-700 sm:order-none sm:h-auto sm:w-1/2 lg:w-3/5">
+        <img src="{{ cta_img }}" loading="lazy" alt="Photo by Dom Hill" class="h-full w-full object-cover object-center" />
+      </div>
+      <!-- image - end -->
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/earn_sec.html b/templates/shortcodes/earn_sec.html
new file mode 100644
index 0000000..cc85fae
--- /dev/null
+++ b/templates/shortcodes/earn_sec.html
@@ -0,0 +1,56 @@
+<style>
+    .bg_earn {
+        background-color: #F2EDE8;
+    }
+
+    .bg-boxs {
+        background-color: #f7f4f0;
+    }
+</style>
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/1_plug_in.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All you need to get started is
+                            electricity, a network connection, and a FreeFlow Node</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/2_offer_capacity.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Provide decentralized storage and
+                            compute capacity to host your communities digital life while maintaining privacy.</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/3_earn.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Earn in the most valuable and
+                            rapidly growing economy: the Internet and cloud</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <br>
+        <button class="flex mx-auto uppercase"
+            onclick="window.open('https://threefoldfoundation.github.io/books/freeflow/network/farming/farming_reward.html', '_blank')">see
+            rewards</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/featured_stories.html b/templates/shortcodes/featured_stories.html
new file mode 100644
index 0000000..7ec1e0f
--- /dev/null
+++ b/templates/shortcodes/featured_stories.html
@@ -0,0 +1,73 @@
+<style>
+    .bg_earning {
+        background-color: #F2F2F2;
+    }
+
+    .bg_fflow_twin {
+        background-color: #EAF3F7;
+    }
+
+    .bg_CHi_green {
+        background-color: #EBFFED;
+    }
+</style>
+
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg-white">
+    <div class="absolute inset-0">
+        <div class="bg-white h-1/3 sm:h-2/3"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_earning">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/get_earn.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900">
+                            get a node and <br /><b class="font-bold">start earning</b>
+                        </h3>
+                        <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Get a FreeFlow Node and add capacity to
+                            the FreeFlow Network.</div>
+                        <button class="uppercase font-bold" onclick="window.location='/node'">know more</button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_fflow_twin">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/ff_twin.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900">
+                            GET THE <br /><b class="font-bold">FREEFLOW TWIN</b>
+                        </h3>
+                        <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Reserve your sovereign digital twin. <br>Take control over your digital life.</div>
+                        <button class="uppercase font-bold" onclick="window.location='/twin'">know more</button>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_CHi_green">
+                <div class="flex-shrink-0">
+                    <img class="h-full w-full object-cover" src="/images/chi.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900">
+                            ACQUIRE <br /><b class="font-bold">CHI</b>
+                        </h3>
+                        <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">The digital energy currency
+                            of <br>the FreeFlow network `CHI token`</div>
+                        <button class="uppercase font-bold"
+                            onclick="window.open('https://threefoldfoundation.github.io/books/freeflow/network/buy/buy_my_chi.html', '_blank')">know
+                            more</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/features.html b/templates/shortcodes/features.html
new file mode 100644
index 0000000..683eafd
--- /dev/null
+++ b/templates/shortcodes/features.html
@@ -0,0 +1,30 @@
+<div class="bg-white py-6 sm:py-8 lg:py-12">
+  <div class="mx-auto max-w-screen-2xl px-4 md:px-8">
+    <!-- text - start -->
+    <div class="mb-10 md:mb-16">
+      <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl">Our competitive advantage</h2>
+
+      <p class="mx-auto max-w-screen-md text-center text-gray-500 md:text-lg">This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random or otherwise generated.</p>
+    </div>
+    <!-- text - end -->
+    {% for item in items %}
+    <div class="grid gap-8 sm:grid-cols-2 md:gap-12 xl:grid-cols-3 xl:gap-16">
+      <!-- feature - start -->
+      <div class="flex gap-4 md:gap-6">
+        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+          </svg>
+        </div>
+
+        <div>
+          <h3 class="mb-2 text-lg font-semibold md:text-xl">{{ header}}</h3>
+          <p class="mb-2 text-gray-500">{{ text }}</p>
+          <a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">{{ link }}</a>
+        </div>
+      </div>
+      <!-- feature - end -->
+    </div>
+    {% endfor %}
+  </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/fflow_experiences.html b/templates/shortcodes/fflow_experiences.html
new file mode 100644
index 0000000..57cda9d
--- /dev/null
+++ b/templates/shortcodes/fflow_experiences.html
@@ -0,0 +1,53 @@
+<style>
+    .bg_earn3 {
+        background-color: #F9F8F6;
+    }
+
+    .bg-boxs3 {
+        background-color: #EFEDEB;
+    }
+</style>
+<h1>{{ subject }}</h1>
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn3">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs3">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/education.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">FREEFLOWING<br> EDUCATION</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All citizens can now acquire information and learn skills.</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/empowerment.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">FREEFLOWING<br> EMPOWERMENT</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All citizens can now attain the opportunity to participate in the digital economy.</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/collaboration.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">FREEFLOWING<br> COLLABORATION</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">All citizens can now work together to achieve goals and growth.</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/fflow_grid.html b/templates/shortcodes/fflow_grid.html
new file mode 100644
index 0000000..40cada5
--- /dev/null
+++ b/templates/shortcodes/fflow_grid.html
@@ -0,0 +1,52 @@
+<style>
+    .bg_earn2 {
+        background-color: #f0ece8;
+    }
+
+    .bg-boxs {
+        background-color: #F7F4F1;
+    }
+</style>
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn2">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/own_data.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">fully own<br> your data</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">The entirety of your data belogs to you instead of company or service-provider.</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/own_identy.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">unbeatable<br> privacy</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Only you have control of your data and decide who has access to it. Forever.</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/endless.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">zero<br> manipulation</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Your data can never be used for financial or commercial gains by anyone.</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/fflow_skills.html b/templates/shortcodes/fflow_skills.html
new file mode 100644
index 0000000..ea55337
--- /dev/null
+++ b/templates/shortcodes/fflow_skills.html
@@ -0,0 +1,95 @@
+<div class="container px-4 sm:px-6 lg:pb-28 lg:px-8 mx-auto">
+    
+        <div class="grid gap-3 max-w-lg mx-auto lg:grid-cols-2 lg:max-w-none">
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/meet.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Meet & Communicate</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Chat with your friends, hold meetings and and have video conferencing.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/exchange.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Exchange & Store Money</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Transact or manage your assets using the wallet features available with the Twin.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/create.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Create</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Create videos, documents or anything else you require for your daily needs.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/organize.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Organize</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Archive and organize all your data in one place without worrying about security.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/share.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Share</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Send your data and files to anyone of your choice directly without central servers.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/publish.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Publish</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Build websites, librariies or whatever else you require with the FreeFlow Twin.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/discover.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Discover</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">FInd and browse any information without being tracked or logged.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/collaborate.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Collaborate</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Work with your friends, family or collegues or projects or tasks together.</p>
+                </div>
+            </div>
+
+            <div class="flex flex-row flex-wrap mx-4 sm:mx-0 py-2">
+                <div class="w-full md:w-2/6 mx-auto sm:mx-0">
+                    <img class="mx-auto" src="/images/develop.png" alt="" />
+                </div>
+                <div class="w-full md:w-4/6 text-center md:text-left md:pl-2 justify-center">
+                        <h2 class="uppercase text-5xl">Develop & Expand</h2>
+                        <p class="leading-6 text-gray-900 text-xl max-w-sm">Develop more tools or decentralized applications for the FreeFlow Grid.</p>
+                </div>
+            </div>
+        </div>   
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/fflow_twin.html b/templates/shortcodes/fflow_twin.html
new file mode 100644
index 0000000..ceba0e7
--- /dev/null
+++ b/templates/shortcodes/fflow_twin.html
@@ -0,0 +1,53 @@
+<style>
+    .bg_earn {
+        background-color: #D9E7DF;
+    }
+
+    .bg-boxs {
+        background-color: #F7F4F1;
+    }
+</style>
+<div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg_earn">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/key.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">EVERYONE<br> HAS ACCESS</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Every member of society has access and there are no barriers to entry,.</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/partake.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">ANYONE<br> CAN PARTAKE</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Only you have control of your data and decide who has access to it.</div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div class="flex flex-col pb-10 rounded-lg shadow-lg overflow-hidden bg-boxs">
+                <div class="flex-shrink-0">
+                    <img class="mx-auto object-cover" src="/images/succeed.png" alt="" />
+                </div>
+                <div class="flex-1 p-6 flex flex-col justify-between text-center">
+                    <div class="flex-1">
+                        <h2 class="uppercase">ANYONE<br> CAN SUCCEED</h2>
+                        <div class="mt-3 leading-6 text-gray-900 text-2xl max-w-sm">Anyone can attain the opportunity to earn and to better their lives.</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/grid_stats.html b/templates/shortcodes/grid_stats.html
new file mode 100644
index 0000000..0ae595d
--- /dev/null
+++ b/templates/shortcodes/grid_stats.html
@@ -0,0 +1,78 @@
+{% set styles = "background-image: url('/images/ston_bg.png');" %}
+{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
+{% if data %}
+{% set capacity = data.totalHru + data.totalSru / (1024 * 1024 * 1024 * 1024) %}
+{% set nodes = data.nodes %}
+{% set countries = data.countries %}
+{% endif %}
+<style>
+    .bg-map {
+        background-color: #EAE8E3;
+    }
+</style>
+<div class="bg-map pb-24">
+    <div class="relative max-w-7xl mx-auto">
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 ">
+            <div class=" overflow-hidden">
+                <div class="px-2 py-16">
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0">
+                            <img src="/images/node_icon.png"  width="65" alt="">
+                        </div>
+                        <div class="ml-5 w-0 flex-1 pt-3">
+                            <dl>
+                                <dd class="flex items-baseline mb-5 ">
+                                    <div class="text-6xl advance leading-8 font-extrabold text-gray-900">
+                                        {{ nodes }}
+                                    </div>
+                                </dd>
+                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
+                                    freeflow nodes <br />deployed
+                                </dt>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class=" overflow-hidden bg-no-repeat bg-center	bg-contain	text-center" style="{{styles}}">
+                <div class="px-2 py-16">
+                    <div class="flex items-start">
+                        <div class="ml-5 w-0 flex-1 pt-3">
+                            <dl>
+                                <dd class="flex items-baseline mb-5 ">
+                                    <div class="text-6xl advance leading-8 mx-auto font-extrabold text-gray-900">
+                                        {{ countries }}
+                                    </div>
+                                </dd>
+                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
+                                    countries <br />involved
+                                </dt>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class=" overflow-hidden">
+                <div class="px-2 py-16">
+                    <div class="flex items-start">
+                        <div class="flex-shrink-0">
+                            <img src="/images/capacity_icon.png" width="65" alt="">
+                        </div>
+                        <div class="ml-5 w-0 flex-1 pt-3">
+                            <dl>
+                                <dd class="flex items-baseline mb-5 ">
+                                    <div class="text-6xl advance leading-8 font-extrabold text-gray-900">
+                                        {{ capacity | round() }}TB
+                                    </div>
+                                </dd>
+                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
+                                    capacity <br />generated
+                                </dt>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/hero.html b/templates/shortcodes/hero.html
new file mode 100644
index 0000000..2bc5ee0
--- /dev/null
+++ b/templates/shortcodes/hero.html
@@ -0,0 +1,23 @@
+<section class="flex flex-col justify-between gap-6 sm:gap-10 md:gap-16 lg:flex-row">
+  <!-- content - start -->
+  <div class="flex flex-col justify-center sm:text-center lg:py-12 lg:text-left xl:w-5/12 xl:py-24">
+    <p class="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl">{{ hero_subtitle }}</p>
+
+    <h1 class="mb-8 text-4xl font-bold text-black sm:text-5xl md:mb-12 md:text-6xl">{{ hero_title }}</h1>
+
+    <p class="mb-8 leading-relaxed text-gray-500 md:mb-12 lg:w-4/5 xl:text-lg">{{ hero_text }}</p>
+
+    <div class="flex flex-col gap-2.5 sm:flex-row sm:justify-center lg:justify-start">
+      <a href="{{ hero_link1 }}" class="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base">{{ hero_link1_name }}</a>
+
+      <a href="{{ hero_link2 }}" class="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base">{{ hero_link2_name }}</a>
+    </div>
+  </div>
+  <!-- content - end -->
+
+  <!-- image - start -->
+  <div class="h-48 overflow-hidden rounded-lg bg-gray-100 shadow-lg lg:h-auto xl:w-5/12">
+    <img src="{{ hero_img }}<" loading="lazy" alt="Photo by Fakurian Design" class="h-full w-full object-cover object-center" />
+  </div>
+  <!-- image - end -->
+</section>
\ No newline at end of file
diff --git a/templates/shortcodes/logo.html b/templates/shortcodes/logo.html
new file mode 100644
index 0000000..6686321
--- /dev/null
+++ b/templates/shortcodes/logo.html
@@ -0,0 +1,16 @@
+<div class="bg-white py-6 sm:py-8 lg:py-12">
+    <div class="mx-auto max-w-screen-2xl px-4 md:px-8">
+      <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-8 lg:text-3xl">Trusted by the best</h2>
+  
+      <div class="grid grid-cols-2 gap-6 rounded-lg bg-indigo-100 p-6 sm:h-40 sm:content-evenly md:grid-cols-4">
+        <!-- logo - start -->
+        {% for logo in logos %}
+        <div class="flex justify-center text-indigo-500">
+          <img class="w-64" src="{{ logo }}" >
+        </div>
+        {% endfor %}
+        <!-- logo - end -->
+
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/templates/shortcodes/menu.html b/templates/shortcodes/menu.html
new file mode 100644
index 0000000..167be2b
--- /dev/null
+++ b/templates/shortcodes/menu.html
@@ -0,0 +1,44 @@
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+{% set columns = body | safe | markdown | split(pat="|||") %}
+
+<!-- aligns columns depending on col number-->
+
+{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8" %}
+{% set column_classes = "flex-1 m-2 lg:m-4" %}
+
+<!-- makes row full screen width and adds background img -->
+
+<div class="{{classes}}">
+    {% for column in columns%} 
+        <!-- Hides empty columns if displayed vertically in small screen -->
+        {% if column | as_str | length < 10 %} 
+            <div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
+                {{column | split(pat="{% button() %}") | slice(end=1)}}
+                {% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
+                    {% set body = button %}
+                    {% include "shortcodes/button.html" %}               
+                {% endfor %}
+            </div>
+        {% else %}
+            <div class="{{column_classes}}">
+                {{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
+                <hr class="border-t-2 mt-2">
+                <br/>
+                {% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
+                    {% set body = button %}
+                    {% include "shortcodes/button.html" %}               
+                {% endfor %}
+            </div>
+        {% endif %}
+    {% endfor %}
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/mermaid.html b/templates/shortcodes/mermaid.html
new file mode 100644
index 0000000..7ddc2e9
--- /dev/null
+++ b/templates/shortcodes/mermaid.html
@@ -0,0 +1,3 @@
+<div class="mermaid">
+    {{ body }}
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/mycomponent.html b/templates/shortcodes/mycomponent.html
new file mode 100644
index 0000000..ceafd2d
--- /dev/null
+++ b/templates/shortcodes/mycomponent.html
@@ -0,0 +1,13 @@
+
+
+
+<div {% if class %}class="{{class}}"{% endif %}>
+    <h2> {{subject}} </h1>
+
+    {% for item in items %}
+    {{ item }}
+    {% endfor %}    
+
+    
+
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/myloop.html b/templates/shortcodes/myloop.html
new file mode 100644
index 0000000..7ff139f
--- /dev/null
+++ b/templates/shortcodes/myloop.html
@@ -0,0 +1,4 @@
+
+{% for item in items %}
+    <p>{{ item }}</p>
+{% endfor %}
diff --git a/templates/shortcodes/reviews.html b/templates/shortcodes/reviews.html
new file mode 100644
index 0000000..b74830c
--- /dev/null
+++ b/templates/shortcodes/reviews.html
@@ -0,0 +1,91 @@
+
+
+
+<div {% if class %}class="{{class}}"{% endif %}>
+    <div class="bg-white py-6 sm:py-8 lg:py-12">
+    <div class="mx-auto px-4 md:px-8">
+        <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-8 lg:text-3xl xl:mb-12">Customer Reviews</h2>
+
+        <div class="mb-4 flex items-center justify-between border-t border-b py-4">
+        <div class="flex flex-col gap-0.5">
+            <span class="block font-bold">Total</span>
+
+            <!-- stars - start -->
+            <div class="-ml-1 flex gap-0.5">
+
+
+                        
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>            
+
+            </div>
+            <!-- stars - end -->
+
+            <span class="block text-sm text-gray-500">Bases on 27 reviews</span>
+        </div>
+
+        <a href="#" class="inline-block rounded-lg border bg-white px-4 py-2 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-100 focus-visible:ring active:bg-gray-200 md:px-8 md:py-3 md:text-base">Write a review</a>
+        </div>
+
+        <div class="divide-y">
+        <!-- review - start -->
+        {# {% for item in items %} #}
+        <div class="flex flex-col gap-3 py-4 md:py-8">
+            <div>
+            <span class="block text-sm font-bold">{{ reviews_name }}</span>
+            <span class="block text-sm text-gray-500">{{ reviews_date }}</span>
+            </div>
+
+            <!-- stars - start -->
+            <div class="-ml-1 flex gap-0.5">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+            </svg>
+            </div>
+            <!-- stars - end -->
+
+            <p class="text-gray-600">{{ reviews_description }}</p>
+        </div>
+        {# {% endfor %} #}
+
+        <!-- review - end -->
+
+
+        <!-- review - end -->
+        </div>
+    </div>
+    </div>
+</div>
diff --git a/templates/shortcodes/row.html b/templates/shortcodes/row.html
new file mode 100644
index 0000000..30a34ee
--- /dev/null
+++ b/templates/shortcodes/row.html
@@ -0,0 +1,258 @@
+<!-- row shortcode 
+Shortcode used in markdown for the creation of mobile compatible vertical rows
+Divides markdown into columns by splitting content using column identifier "|||"
+Creates equal width blocks in a flex row.
+
+Parameters: 
+- style: 
+    - lean: if style is lean, the row doesn't have outer margins
+- bgPath: if bgPath is passed, the row has a full width background
+-->
+
+
+<!-- This fixes link & img paths in local, prod, and wth prefix -->
+{% if page %}
+    {% if "](" in body %}
+    {% set body_arr = body | split(pat="](") %}
+    {% set body = body_arr[0] %}
+        {% for i in body_arr %}
+            {% set prev_index = loop.index0 - 1 %}
+            {% if not loop.first %}
+            {% if "![" in body_arr[prev_index] %}
+                {% set_global body = body ~ '](' ~ page.permalink ~ i %}
+            {% else %}
+                {% if i is not starting_with("http") %}
+                    {% set base_url = get_url(path="") %}
+                    {% set_global body = body ~ '](' ~ base_url ~ i %}
+                {% else %}
+                    {% set_global body = body ~ '](' ~ i %}
+                {% endif %}
+            {% endif %}
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+{% endif %}
+
+{% set columns = body | safe | markdown | split(pat="<p>|||</p>") %}
+
+{% set row_class =  "relative flex flex-col md:flex md:flex-row flex-wrap max-w-fit overflow-hidden"%}
+
+<!-- aligns columns depending on col number-->
+{% if 2 < columns | length %}
+    {% set row_class = row_class ~ " lg:items-start" %}
+{% else %} 
+    {% set row_class = row_class ~ " items-center" %}
+{% endif %}
+
+{% set col_class = "flex-1 mb-4 md:mb-12 lg:mb-0 mx-4" %}
+
+
+{% set row_id = '' %}
+
+{% if id %}
+{% set row_id = id %}
+
+{% endif %}
+
+ <!-- reverse col at mobile -->
+
+
+ {% if reverse %}
+ {% if "rightreserve" in reverse %}
+ {% set row_class = "flex flex-col-reverse md:flex-row items-center mx-0" %}
+ {% elif "leftreserve" in reverse %}
+ {% set row_class = "flex flex-col md:flex-row items-center mx-8" %}
+     
+ {% endif %}
+ {% endif %}
+
+ 
+<!-- Padding -->
+
+{% set padding_class = " py-8 md:py-8 lg:py-24" %}
+
+{% if padding %}
+    {% if "none" in padding %}
+        {% set padding_class = " py-0" %}
+    {% elif "top" in padding %}
+        {% set padding_class = " py-0 lg:pt-24" %}
+    {% elif "bottom" in padding %}
+        {% set padding_class = " py-2 md:py-4 lg:pb-24" %}
+    {% elif "both" in padding %}
+        {% set padding_class = " py-8 md:py-4 lg:py-24" %}
+    {% endif %}
+{% endif %}
+
+{% if css %}
+    {% set padding_class = padding_class ~ " " ~ css %}
+{% endif %}
+
+{% set row_class =  row_class ~ padding_class %}
+
+
+<!-- Margins -->
+
+{% set margin_class = " mx-4 md:mx-16 lg:mx-24" %}
+
+{% if margin %}
+    {% if "none" in margin %}
+        {% set margin_class = " mx-0" %}
+    {% elif "wide" in margin %}
+        {% set margin_class = " mx-4 sm:mx-8 md:mx-12 lg:mx-16 xl:mx-20 " %}
+    {% elif "moderate" in margin %}
+        {% set margin_class = " mx-4 sm:mx-16 md:mx-20 lg:mx-28" %}
+    {% elif "narrow" in margin %}
+        {% set margin_class = " mx-4 sm:mx-20 md:mx-28 lg:mx-40" %}
+    {% elif "tight" in margin %}
+        {% set margin_class = " mx-4 sm:mx-32 md:mx-40 lg:mx-80 xl:mx-96" %}
+    {% elif "header" in margin %}
+        {% set margin_class = " mx-4 sm:mx-20 md:mx-28 lg:mx-40 my-10" %}
+    {% elif "withContainer" in margin %}
+        {% set margin_class = " mx-4 " %}
+    {% endif %}
+    {% if "lean-left" in margin %}
+        {% set margin = margin_class | replace(from=" ", to=" first:")%}
+        {% set margin_left = margin | replace(from="mx", to="-ml") %}
+        {% set margin_right = margin | replace(from="mx", to="mr") %}
+        {% set col_class = col_class ~ " md:last:px-8 lg:last:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
+        {% set row_class = row_class ~ " sm:gap-0 " %}
+    {% elif "lean-right" in margin %}
+        {% set margin = margin_class | replace(from=" ", to=" last:")%}
+        {% set margin_left = margin | replace(from="mx", to="ml") %}
+        {% set margin_right = margin | replace(from="mx", to="-mr") %}
+        {% set col_class = col_class ~ " md:first:px-8  lg:first:px-20 lg:max-w-[50%] lg:mx-0 " ~ margin_left ~ margin_right %}
+        {% set row_class = row_class ~ " sm:gap-0 " %}
+    {% endif %}
+{% endif %}
+
+{% if css %}
+    {% set margin_class = margin_class ~ " " ~ css %}
+{% endif %}
+
+{% set row_class =  row_class ~ margin_class %}
+
+   
+
+{% if style %}
+
+    {% if "center" in style %}
+        {% set row_class = row_class ~ " text-center items-center  " %}
+        {% set col_class = col_class ~ " flex-1 " %}
+    {% endif %}
+
+    {% if "right" in style %}
+        {% set row_class = row_class ~ " text-center lg:text-right md:text-right justify-center " %}
+        {% set col_class = col_class ~ " flex-1" %}
+    {% endif %}
+
+    {% if "left" in style %}
+        {% set row_class = row_class ~ " text-center lg:text-left md:text-left justify-center " %}
+        {% set col_class = col_class ~ " flex-1" %}
+    {% endif %}
+
+
+    {% if "items-end" in style %}
+        {% set row_class = row_class ~ " lg:items-end" %}
+        {% set col_class = col_class ~ " flex-1 " %}
+    {% endif %}
+
+
+
+
+     <!-- makes row semi-full screen width, strips margins -->
+    {% if "between" in style %}
+        {% set row_class = row_class ~ " lg:max-w-6xl " %}
+    {% elif "moderate" in style %}
+        {% set row_class = row_class ~ " " %}
+    {% endif %}
+
+        <!-- makes row full screen width, strips margins -->
+    {% if "narrow" in style %}
+        {% set row_class = row_class ~ " lg:max-w-3xl " %}
+    {% elif "tight" in style %}
+        {% set row_class = row_class ~ " lg:max-w-sm " %}
+    {% elif "moderate" in style %}
+        {% set row_class = row_class ~ " mx-20 " %}
+    {% endif %}
+
+    {% if "invert-color" in style %}
+
+                {% set row_class = row_class ~ " text-white lg:text-white " %}
+
+    {% endif %}
+    {% else %}
+        {% set row_class = row_class ~ " " %}
+{% endif %}
+
+{% set anchor_link = ""%}
+{% if anchor %}
+    {% set anchor_link = anchor %}
+{% endif %}
+
+
+<!-- makes row full screen width and adds background img -->
+{% set styles = ""  %}
+{% set div_class = " " %}
+{% if bgPath %}
+    {% set background_url = page.permalink ~ bgPath %}
+    {% set styles = "background: url('" ~ background_url ~ "'); background-size: cover; background-position: center;"  %}
+    {% if "#desktop" in bgPath %}
+        {% set bgStyle = false %}
+        {% set div_class = " !bg-[length:0px_0px] !bg-no-repeat lg:!bg-cover " %}
+        {% set row_class = row_class | replace(from='text-white', to='text-black') %}
+        {% if "invert-color" in style %}
+            {% if "#desktop" in bgPath %}
+                {% set row_class = row_class ~ " lg:text-white " %}
+            {% endif %}
+        {% endif %}
+    {% endif %}
+{% endif %}
+{% if bgStyle %}
+    {% if "full" in bgStyle %}
+        {% set styles = styles ~ "height: -webkit-fill-available; height: 100vh;"  %}
+    {% elif "hero" in bgStyle %}
+        {% set div_class = div_class ~ " -mt-24 pt-12 " %}
+    {% endif %}
+{% endif %}
+{% if bgColor %}
+    {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover"  %}
+    {% set row_class = row_class %}
+{% endif %}
+
+{% if class %}
+    {% set styles = "background-color: " ~ bgColor ~ "; background-size: cover"  %}
+    {% set row_class = row_class %}
+{% endif %}
+
+<!-- Cancels page margins so that rows can have separate margins -->
+{% set no_margins = " -mx-8 md:-mx-12 lg:-mx-16 xl:-mx-20" %}
+
+
+        <div id="{{anchor_link}}" class="{{'relative justify-center flex overflow-hidden ' ~ div_class }}" style="{{styles}}">
+            <div id="{{row_id}}" class="{{row_class}}" style="min-width: -webkit-fill-available; min-width: -moz-available"> 
+        
+        {% for column in columns%} 
+
+            <!-- Hides empty columns if displayed vertically in small screen -->
+            {% if column | as_str | length < 10 %} 
+                <div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1 ">
+                    {{ column | safe }}
+                </div>
+            {% else %}
+                <div class="{{col_class}}">
+                    <!-- handles mermaid markdown content display -->
+
+                    {% if "{% mermaid() %}" in column %}
+                        {% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
+                        {% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}
+                        <div class="mermaid">
+                            {{mermaid_content | safe }}
+                        </div> 
+                    {% else %}
+                        {{ column | safe }}
+                    {% endif %}
+                </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/space.html b/templates/shortcodes/space.html
new file mode 100644
index 0000000..fca83cc
--- /dev/null
+++ b/templates/shortcodes/space.html
@@ -0,0 +1,8 @@
+
+{% set height = 52 %}
+{% if size %}
+    {% if size == "small" %}
+        {% set height = 28 %}
+    {% endif %}
+{% endif %}
+<div class="h-20 lg:h-{{height}}"></div>
\ No newline at end of file
diff --git a/templates/shortcodes/team_sec.html b/templates/shortcodes/team_sec.html
new file mode 100644
index 0000000..8254c21
--- /dev/null
+++ b/templates/shortcodes/team_sec.html
@@ -0,0 +1,79 @@
+<div class="lg:my-32 flex flex-col mt-5 p-auto lg:px-40">
+    <h2 class="flex py-2 mx-auto uppercase font-bold lg:text-6xl">
+        THE TEAM
+    </h2>
+    <div class="lg:max-w-4xl text-xl text-center mb-8 mx-auto leading-relaxed">Spread across the world, our team has
+        built some of the world’s best Internet storage and cloud automation technologies since the ‘90s. With a strong
+        vision for the future, we’re now on a mission to create a peer-to-peer Internet that can host all of humanity’s
+        digital workloads via smart contract, removing all forms of centralization from global IT systems.</div>
+    <div class="flex overflow-x-scroll pb-10 scrollable">
+        <div class="flex flex-nowrap ml-10 mt-10">
+            <div class="inline-block px-3">
+                <div class="
+                box
+                max-w-xs
+                overflow-hidden
+                rounded-full
+                shadow-md
+                hover:shadow-xl
+                transition-shadow
+                duration-300
+                ease-in-out
+              ">
+                    <a href="https://threefold.io/people/adnan_fatayerji/" title="Adnan Fatayerji">
+                        <img src="https://threefold.io/assets/static/adnan_fatayerji.a68c322.7ba2b95e75c9fab15be532f16ac0d644.jpg"
+                            class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji" />
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .scrollable::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    .scrollable::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 20px;
+    }
+
+    .scrollable::-webkit-scrollbar-thumb {
+        background: linear-gradient(45deg, #70dfc9, #ee7bf7);
+        border-radius: 20px;
+    }
+
+    /* #70dfc9, #ee7bf7 */
+    .box {
+        position: relative;
+        height: 150px;
+        width: 150px;
+    }
+
+    .box::before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 50%;
+        padding: 10px;
+        background: linear-gradient(45deg, #70dfc9, #ee7bf7);
+        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: destination-out;
+        mask-composite: exclude;
+    }
+
+    .box img {
+        filter: grayscale(100%);
+        height: 130px;
+        width: 130px;
+    }
+
+    .box img:hover {
+        filter: grayscale(0);
+    }
+</style>
\ No newline at end of file
diff --git a/templates/shortcodes/youtube.html b/templates/shortcodes/youtube.html
new file mode 100644
index 0000000..e85468e
--- /dev/null
+++ b/templates/shortcodes/youtube.html
@@ -0,0 +1,8 @@
+<div {% if class %}class="{{class}}"{% endif %}>
+    <iframe
+        src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"
+        webkitallowfullscreen
+        mozallowfullscreen
+        allowfullscreen>
+    </iframe>
+</div>
\ No newline at end of file
diff --git a/templates/tags/list.html b/templates/tags/list.html
new file mode 100644
index 0000000..7330b1f
--- /dev/null
+++ b/templates/tags/list.html
@@ -0,0 +1,7 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+{{ terms }}
+
+{% endblock content %}
diff --git a/templates/tags/single.html b/templates/tags/single.html
new file mode 100644
index 0000000..cb08e72
--- /dev/null
+++ b/templates/tags/single.html
@@ -0,0 +1,12 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+{# {% set section = get_section(path="blog/_index.md")%}
+<main class="pt-16">
+    {{ section.content | safe}}
+    <hr>
+    {% include "partials/page_list.html" %}
+ </main>  #}
+ 
+ {% endblock content %}
diff --git a/templates/taxonomy_list.html b/templates/taxonomy_list.html
new file mode 100644
index 0000000..f628a84
--- /dev/null
+++ b/templates/taxonomy_list.html
@@ -0,0 +1,4 @@
+{% extends "index.html" %}
+
+{% block content %}
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/taxonomy_single.html b/templates/taxonomy_single.html
new file mode 100644
index 0000000..7b9e37c
--- /dev/null
+++ b/templates/taxonomy_single.html
@@ -0,0 +1,22 @@
+{% extends "index.html" %}
+
+{% block content %}
+
+<main class="pt-16">
+
+    <div class="flex flex-col md:flex-row">
+        {% if current_path is containing("tags") %}
+        {% include "partials/tagsCards.html" %}
+        {% include "partials/tagsSidebar.html" %}
+        {% elif current_path is containing("memberships") %}
+        {% include "partials/memberships.html" %}
+        {% elif current_path is containing("people") %}
+        {% else %}
+        {% include "partials/newsPosts.html" %}
+        {% include "partials/newsSidebar.html" %}
+        {% endif %}
+    </div>
+ </main> 
+ 
+ {% endblock content %}
+
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..1b88a9a
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,48 @@
+{
+  "build": {
+    "env": {
+      "ZOLA_VERSION": "0.14.0"
+    }
+  },
+  "github": {
+    "silent": true
+  },
+  "headers": [
+    {
+      "source": "/css/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=2678400"
+        }
+      ]
+    },
+    {
+      "source": "/images/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=2678400"
+        }
+      ]
+    },
+    {
+      "source": "/images/icons/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=2678400"
+        }
+      ]
+    },
+    {
+      "source": "/fonts/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=2678400"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file