feat: new docs structure (5/n)

.github/workflows/validate.yml

@@ -4,7 +4,6 @@ on:
   workflow_dispatch:
   pull_request:
 
-
 defaults:
   run:
     shell: bash
@@ -16,9 +15,19 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn
+        run: yarn install --frozen-lockfile
 
       - name: Build docs
-        run: yarn build
+        env:
+          NODE_OPTIONS: '--max-old-space-size=4096'
+        run: yarn build

components/ChooseVM/CollapsibleSection.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Collapse, Button, Box, Text } from '@mantine/core';
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
+
+interface CollapsibleSectionProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({ title, children }) => {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <Box mb="md">
+      <Button 
+        fullWidth
+        variant="light"
+        color="#001B2A"
+        onClick={() => setOpened(!opened)}
+        rightSection={opened ? <IconChevronUp size={16} /> : <IconChevronDown size={16} />}
+        styles={{
+          root: {
+            borderRadius: '8px',
+            transition: 'all 0.3s ease',
+            backgroundColor: '#001B2A',
+            color: '#ECEDEE',
+            '&:hover': {
+              backgroundColor: '#9E1F19',
+            },
+          },
+          inner: {
+            justifyContent: 'space-between',
+          },
+        }}
+      >
+        <Text fw={500}>{title}</Text>
+      </Button>
+
+      <Collapse in={opened}>
+        <Box mt="sm" p="md" style={{ borderRadius: '0 0 8px 8px', backgroundColor: '#001B2A', borderColor: '#9E1F19', borderWidth: '1px', borderStyle: 'solid' }}>
+          {children}
+        </Box>
+      </Collapse>
+    </Box>
+  );
+};
+
+export default CollapsibleSection;

components/ChooseVM/ToolList.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Card, Text, Group, Badge, List, ThemeIcon } from '@mantine/core';
+import { IconCheck } from '@tabler/icons-react';
+
+interface VMCardProps {
+  title: string;
+  description: string;
+  features: string[];
+  ecosystemSize?: string;
+  difficulty?: string;
+}
+
+const VMCard: React.FC<VMCardProps> = ({
+  title,
+  description,
+  features,
+  ecosystemSize,
+  difficulty,
+}) => {
+  return (
+    <Card
+      shadow="sm"
+      padding="lg"
+      radius="md"
+      withBorder
+      style={{
+        backgroundColor: '#1A1B1E',
+        borderColor: '#2C2E33',
+      }}
+    >
+      <Card.Section withBorder inheritPadding py="xs">
+        <Group justify="apart" mb="xs">
+          <Group>
+            <Text fw={700} size="xl" color="#ECEDEE">{title}</Text>
+            {ecosystemSize && (
+              <Badge color="blue" variant="light">
+                {ecosystemSize}
+              </Badge>
+            )}
+          </Group>
+          {difficulty && (
+            <Badge color="green" variant="light">
+              {difficulty}
+            </Badge>
+          )}
+        </Group>
+        <Text size="sm" color="#8CABA9">
+          {description}
+        </Text>
+      </Card.Section>
+
+      <List
+        spacing="sm"
+        size="sm"
+        mt="md"
+        icon={
+          <ThemeIcon color="#9E1F19" size={20} radius="xl">
+            <IconCheck size={12} />
+          </ThemeIcon>
+        }
+      >
+        {features.map((feature, index) => (
+          <List.Item key={index}>
+            <Text color="#8CABA9">{feature}</Text>
+          </List.Item>
+        ))}
+      </List>
+    </Card>
+  );
+};
+
+export default VMCard;

components/ChooseVM/VMCard.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Card, Text, List, ThemeIcon, Group, Badge, Box } from '@mantine/core';
+import { IconCheck, IconAlertTriangle, IconUsersGroup } from '@tabler/icons-react';
+
+interface VMCardProps {
+  title: string;
+  benefits: string[];
+  considerations: string[];
+  useCases: string[];
+  description?: string;
+  documentation?: string;
+  ecosystemSize?: 'Large' | 'Medium' | 'Growing';
+}
+
+const VMCard: React.FC<VMCardProps> = ({ 
+  title, 
+  benefits, 
+  considerations, 
+  useCases,
+  description,
+  documentation,
+  ecosystemSize 
+}) => {
+  return (
+    <Card 
+      shadow="sm" 
+      p="lg" 
+      radius="md" 
+      withBorder 
+      style={{ 
+        backgroundColor: '#001B2A',
+        border: '1px solid #9E1F19',
+        transition: 'transform 0.2s ease',
+        '&:hover': {
+          transform: 'translateY(-2px)'
+        }
+      }}
+    >
+      <Card.Section withBorder inheritPadding py="xs">
+        <Group justify="apart" mb="xs">
+          <Group>
+            <Text fw={700} size="xl" color="#ECEDEE">{title}</Text>
+            {ecosystemSize && (
+              <Badge 
+                color={ecosystemSize === 'Large' ? 'green' : ecosystemSize === 'Medium' ? 'yellow' : 'blue'} 
+                variant="light"
+              >
+                {ecosystemSize} Ecosystem
+              </Badge>
+            )}
+          </Group>
+          <Badge color="#9E1F19" variant="filled">Virtual Machine</Badge>
+        </Group>
+        {description && (
+          <Text size="sm" color="#8CABA9" mt="xs">
+            {description}
+          </Text>
+        )}
+      </Card.Section>
+
+      <Box my="md">
+        <Text fw={700} mb="xs" color="#ECEDEE">Key Benefits</Text>
+        <List 
+          spacing="sm"
+          size="sm" 
+          icon={
+            <ThemeIcon color="#8CABA9" size={24} radius="xl">
+              <IconCheck size={16} />
+            </ThemeIcon>
+          }
+        >
+          {benefits.map((benefit, index) => (
+            <List.Item key={index} color="#ECEDEE">{benefit}</List.Item>
+          ))}
+        </List>
+      </Box>
+
+      <Box my="md">
+        <Text fw={700} mb="xs" color="#ECEDEE">Important Considerations</Text>
+        <List 
+          spacing="sm"
+          size="sm" 
+          icon={
+            <ThemeIcon color="#9E1F19" size={24} radius="xl">
+              <IconAlertTriangle size={16} />
+            </ThemeIcon>
+          }
+        >
+          {considerations.map((consideration, index) => (
+            <List.Item key={index} color="#ECEDEE">{consideration}</List.Item>
+          ))}
+        </List>
+      </Box>
+
+      <Box my="md">
+        <Text fw={700} mb="xs" color="#ECEDEE">Ideal Use Cases</Text>
+        <List 
+          spacing="sm"
+          size="sm" 
+          icon={
+            <ThemeIcon color="#8CABA9" size={24} radius="xl">
+              <IconUsersGroup size={16} />
+            </ThemeIcon>
+          }
+        >
+          {useCases.map((useCase, index) => (
+            <List.Item key={index} color="#ECEDEE">{useCase}</List.Item>
+          ))}
+        </List>
+      </Box>
+
+      {documentation && (
+        <Card.Section withBorder inheritPadding py="xs" mt="md">
+          <Text 
+            component="a" 
+            href={documentation}
+            target="_blank"
+            rel="noopener noreferrer"
+            color="#8CABA9"
+            size="sm"
+            style={{ textDecoration: 'none' }}
+          >
+            View Documentation →
+          </Text>
+        </Card.Section>
+      )}
+    </Card>
+  );
+};
+
+export default VMCard;

components/DocCard/DocCardsGrid.tsx

@@ -7,8 +7,8 @@ const DocCardsGrid = ({ data = [] }) => {
   }
 
   return (
-    <div className="container mx-auto px-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+    <div className="container mx-auto px-4 py-8">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {data.map((doc) => (
           <DocCard key={doc.id} doc={doc} />
         ))}

components/Homepage/BuildIntro.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Title,
+  Text,
+  Button,
+  useMantineTheme,
+} from '@mantine/core';
+import { IconArrowRight, IconChevronDown } from '@tabler/icons-react';
+import v2BannerImg from '../../public/assets/sei-temp-gradient.png';
+import styles from '../../styles/BuildIntro.module.css';
+
+interface BuildIntroProps {
+  onScrollToDocs?: () => void;
+  title: string;
+  subtitle: string;
+  descriptions?: string[];
+  primaryButtonText?: string;
+  primaryButtonLink?: string;
+  secondaryButtonText?: string;
+  secondaryButtonLink?: string;
+  scrollText?: string;
+}
+
+const BuildIntro: React.FC<BuildIntroProps> = ({
+  onScrollToDocs,
+  title,
+  subtitle,
+  descriptions = [],
+  primaryButtonText,
+  primaryButtonLink,
+  secondaryButtonText,
+  secondaryButtonLink,
+  scrollText = "Scroll down",
+}) => {
+  const theme = useMantineTheme();
+  const [activeDescription, setActiveDescription] = useState(0);
+
+  useEffect(() => {
+    if (descriptions.length > 1) {
+      const interval = setInterval(() => {
+        setActiveDescription((prev) => (prev + 1) % descriptions.length);
+      }, 4000);
+      return () => clearInterval(interval);
+    }
+  }, [descriptions]);
+
+  return (
+    <section
+      className={styles.container}
+      style={{ backgroundImage: `url(${v2BannerImg.src})` }}
+    >
+      <div className={styles.overlay} />
+      <div className={styles.content}>
+        <Title order={1} className={styles.title}>
+          {title}
+        </Title>
+        <Text className={styles.subtitle}>{subtitle}</Text>
+        {descriptions.length > 0 && (
+          <Text className={styles.description}>
+            {descriptions[activeDescription]}
+          </Text>
+        )}
+        {(primaryButtonText || secondaryButtonText) && (
+          <div className={styles.buttonContainer}>
+            {primaryButtonText && primaryButtonLink && (
+              <Button
+                variant="filled"
+                color="red"
+                size="md"
+                component="a"
+                href={primaryButtonLink}
+                leftSection={<IconArrowRight size={18} />}
+              >
+                {primaryButtonText}
+              </Button>
+            )}
+            {secondaryButtonText && secondaryButtonLink && (
+              <Button
+                variant="outline"
+                color="gray"
+                size="md"
+                component="a"
+                href={secondaryButtonLink}
+              >
+                {secondaryButtonText}
+              </Button>
+            )}
+          </div>
+        )}
+        {onScrollToDocs && (
+          <div className={styles.scroll} onClick={onScrollToDocs}>
+            <Text className={styles.scrollText}>{scrollText}</Text>
+            <IconChevronDown size={28} />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default BuildIntro;