THC 857 create index page template, THC 855 Create footer (#295)

src/components/Cards/CategoryCard.astro

@@ -1,15 +1,17 @@
 ---
 import type { ChildLink } from "@utils/helpers/navigation/types";
 
+import "./category-card.css";
+
 interface CategoryCardProps {
   child: ChildLink;
 }
 
 const { child } = Astro.props as CategoryCardProps;
 ---
 
-<div class="xs:w-full lg:w-[calc(33.3%-8px)] h-auto min-h-[144px]">
-  <a href={"/" + child.slug}>
+<div class="category xs:w-full lg:w-[calc(33.3%-8px)] h-auto min-h-[144px]">
+  <a href={`/${child.slug}`}>
     <div
       class="h-full px-4 pt-4 pb-6 justify-center relative rounded-lg border border-card hover:shadow-lg"
     >

src/components/Cards/TopCategoryCard.astro

@@ -0,0 +1,34 @@
+---
+import "./category-card.css";
+
+interface TopCategoryProps {
+  category: {
+    title: string;
+    icon: string;
+    iconAlt: string;
+    link: string;
+  };
+}
+
+const { category } = Astro.props as TopCategoryProps;
+---
+
+<div
+  class="category flex w-full h-full max-w-[234px] min-h-[235px] border-4 border-[#F4F6F9] rounded-lg cursor-pointer hover:shadow-lg"
+>
+  <a
+    class="flex flex-col w-full hover:text-link-active no-underline"
+    href={category.link}
+  >
+    <div class="flex justify-center items-center min-h-[150px]">
+      <div class="flex justify-center items-center h-[111px] w-[111px]">
+        <img src={category.icon} alt={category.iconAlt} />
+      </div>
+    </div>
+    <div
+      class="flex justify-center items-center grow max-h-[89px] text-heading-3 bg-[#F4F6F9] font-semibold"
+    >
+      {category.title}
+    </div>
+  </a>
+</div>

src/components/PageContent/article.css → src/components/Cards/category-card.css

@@ -1,4 +1,4 @@
-.article-categories a {
+div .category a {
   color: black;
   text-decoration: none;
   &:hover {

src/components/HeadSEO.astro

@@ -2,7 +2,7 @@
 import type { CollectionEntry } from "astro:content";
 import { SITE, OPEN_GRAPH } from "../consts";
 
-type Props = { canonicalUrl: URL } & CollectionEntry<"docs">["data"];
+type Props = Partial<{ canonicalUrl: URL } & CollectionEntry<"docs">["data"]>;
 
 const { ogLocale, image, title, description, canonicalUrl } = Astro.props;
 const formattedContentTitle = `${title} 🚀 ${SITE.title}`;

src/components/Layout/Footer/ContactSupportBlock/ContactSupportButton/index.astro

@@ -0,0 +1,14 @@
+---
+import { HELP_CENTER_LINK } from "src/consts";
+
+import type { IWithLanguage } from "src/types/WithLanguage";
+
+const { language, contentLevel } = Astro.props as IWithLanguage;
+---
+
+<a
+  href={`${HELP_CENTER_LINK}${language}/support`}
+  class="footer-link flex items-center justify-center px-3 min-h-[39px] text-white bg-link-active rounded-[7.5px] border-2 border-white cursor-pointer min-w-[206px] text-[17px] font-medium hover:bg-[#324ed9]"
+>
+  {contentLevel ? "Contact Us" : "Contact Support"}
+</a>

src/components/Layout/Footer/ContactSupportBlock/index.astro

@@ -0,0 +1,15 @@
+---
+import ContactSupportButton from "./ContactSupportButton/index.astro";
+
+import type { ContactSupportBlockProps } from "./types";
+
+const { language } = Astro.props as ContactSupportBlockProps;
+---
+
+<div
+  class="sm:h-20 xs:py-4 sm:py-0 bg-blue-light rounded-lg flex xs:flex-col sm:flex-row justify-center items-center"
+>
+  Can't find what you're looking for?<ContactSupportButton
+    language={language}
+  />
+</div>

src/components/Layout/Footer/ContactSupportBlock/types.ts

@@ -0,0 +1,3 @@
+export interface ContactSupportBlockProps {
+  language: string;
+}