[WIP][TZD-260024] Feature: Research & White Papers Section

.astro/content.d.ts

@@ -147,6 +147,14 @@ declare module 'astro:content' {
   rendered?: RenderedContent;
   filePath?: string;
 }>;
+"research": Record<string, {
+  id: string;
+  body?: string;
+  collection: "research";
+  data: InferEntrySchema<"research">;
+  rendered?: RenderedContent;
+  filePath?: string;
+}>;
 
 	};
 
@@ -177,6 +185,6 @@ declare module 'astro:content' {
 		LiveContentConfig['collections'][C]['loader']
 	>;
 
-	export type ContentConfig = typeof import("../src/content.config.js");
+	export type ContentConfig = typeof import("./../src/content.config.js");
 	export type LiveContentConfig = never;
 }

domain.code-workspace

@@ -72,9 +72,9 @@
       "javascript": "javascriptreact"
     },
     "eslint.options": {
-      "extensions": [ ".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".astro" ]
+      "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".astro"]
     },
-    "eslint.validate": [ "mdx", "markdown", "javascript", "javascriptreact", "typescript", "typescriptreact", "astro" ],
+    "eslint.validate": ["mdx", "markdown", "javascript", "javascriptreact", "typescript", "typescriptreact", "astro"],
     "explorer.compactFolders": false,
     "explorer.confirmDelete": false,
     "explorer.confirmDragAndDrop": false,
@@ -111,7 +111,7 @@
     },
     "git.autofetch": true,
     "git.branchPrefix": "feature/",
-    "git.branchProtection": [ "develop", "main" ],
+    "git.branchProtection": ["develop", "main"],
     "git.branchRandomName.enable": true,
     "git.confirmSync": false,
     "git.enableCommitSigning": false,
@@ -122,7 +122,7 @@
     "js/ts.implicitProjectConfig.checkJs": true,
     "peacock.affectSideBarBorder": true,
     "peacock.color": "#010010",
-    "prettier.documentSelectors": [ "**/*.astro" ],
+    "prettier.documentSelectors": ["**/*.astro"],
     "prettier.printWidth": 120,
     "prettier.quoteProps": "consistent",
     "prettier.singleQuote": false,
@@ -148,13 +148,7 @@
       "*.log": "default"
     },
     "zenMode.centerLayout": false,
-    "cSpell.words": [
-      "Boisu",
-      "brandvault",
-      "Poorna",
-      "Socie",
-      "withastro"
-    ],
+    "cSpell.words": ["Boisu", "brandvault", "Poorna", "Socie", "withastro"],
     "workbench.editor.limit.excludeDirty": true,
     "workbench.colorCustomizations": {
       "activityBar.activeBackground": "#040043",
@@ -177,6 +171,6 @@
       "titleBar.inactiveForeground": "#e7e7e799",
       "tab.activeBorder": "#040043"
     },
-    "folder-color.pathColors": [ ]
+    "folder-color.pathColors": []
   }
 }

src/assets/styles/footer.css

@@ -9,4 +9,4 @@
 
 .footer__nav--item {
   @apply underline underline-offset-2 hover:text-blue-600 dark:text-sky-500 dark:hover:text-blue-600;
-}
+}

src/components/research/CalloutBox.astro

@@ -0,0 +1,17 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<div class="border-foreground/10 bg-background my-8 rounded-2xl border p-6 shadow-sm">
+  <h3 class="mb-3 text-xl font-bold text-amber-700 dark:text-amber-300">
+    {title}
+  </h3>
+
+  <div class="text-foreground/80 leading-8">
+    <slot />
+  </div>
+</div>

src/components/research/DataCard.astro

@@ -0,0 +1,21 @@
+---
+interface Props {
+  title: string;
+  value: string;
+  description?: string;
+}
+
+const { title, value, description } = Astro.props;
+---
+
+<div class="border-foreground/10 bg-background my-8 rounded-2xl border p-6 shadow-sm">
+  <h3 class="text-foreground text-lg font-semibold">
+    {title}
+  </h3>
+
+  <p class="mt-3 text-3xl font-bold text-brandBlue">
+    {value}
+  </p>
+
+  {description && <p class="text-foreground/70 mt-3">{description}</p>}
+</div>

src/components/research/GraphPlaceholder.astro

@@ -0,0 +1,21 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<div class="border-foreground/20 bg-foreground/5 my-10 rounded-2xl border-2 border-dashed p-10 text-center">
+  <h3 class="text-xl font-bold">
+    {title}
+  </h3>
+
+  <div class="mt-8 flex h-52 items-end justify-center gap-4">
+    <div class="h-20 w-8 rounded bg-blue-300"></div>
+    <div class="h-28 w-8 rounded bg-blue-400"></div>
+    <div class="h-36 w-8 rounded bg-blue-500"></div>
+    <div class="h-44 w-8 rounded bg-blue-600"></div>
+    <div class="h-52 w-8 rounded bg-blue-700"></div>
+  </div>
+</div>

src/components/research/ResearchQuote.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  quote: string;
+  author?: string;
+}
+
+const { quote, author } = Astro.props;
+---
+
+<blockquote class="my-8 rounded-2xl border-l-4 border-brandBlue bg-brandBlue/5 p-6 italic">
+  <p class="text-foreground text-lg">
+    “{quote}”
+  </p>
+
+  {author && <footer class="text-foreground/70 mt-4 text-sm font-semibold">— {author}</footer>}
+</blockquote>

src/components/research/StatisticBlock.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+  value: string;
+  label: string;
+}
+
+const { value, label } = Astro.props;
+---
+
+<div class="rounded-2xl border border-cyan-500/20 bg-brandBlue/5 p-6 text-center shadow-sm">
+  <h3 class="text-4xl font-bold text-brandBlue">
+    {value}
+  </h3>
+
+  <p class="text-foreground/70 mt-2 text-lg">
+    {label}
+  </p>
+</div>

src/components/research/Timeline.astro

@@ -0,0 +1,32 @@
+---
+interface Item {
+  year: string;
+  title: string;
+}
+
+interface Props {
+  items: Item[];
+}
+
+const { items } = Astro.props;
+---
+
+<div class="my-10">
+  {
+    items.map((item, index) => (
+      <div class="relative flex gap-6 pb-10">
+        <div class="relative flex flex-col items-center">
+          <div class="h-4 w-4 rounded-full bg-blue-600" />
+
+          {index !== items.length - 1 && <div class="mt-1 h-full w-[2px] bg-blue-600" />}
+        </div>
+
+        <div>
+          <p class="text-sm font-semibold text-blue-600">{item.year}</p>
+
+          <h3 class="mt-1 text-xl font-bold">{item.title}</h3>
+        </div>
+      </div>
+    ))
+  }
+</div>

src/content.config.ts

@@ -32,7 +32,25 @@ const blog = defineCollection({
   })
 });
 
+const research = defineCollection({
+  loader: glob({
+    pattern: "**/*.{md,mdx}",
+    base: "./src/content/research"
+  }),
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    author: z.string(),
+    date: z.date(),
+    tags: z.array(z.string()).default([]),
+    category: z.string(),
+    featured: z.boolean().default(false),
+    image: z.string().optional()
+  })
+});
+
 export const collections = {
   articles,
-  blog
+  blog,
+  research
 };