src/components/widgets/Content2.astro

@@ -0,0 +1,107 @@
+---
+import type { Content as Props } from '~/types';
+import Headline from '../ui/Headline.astro';
+import WidgetWrapper from '../ui/WidgetWrapper.astro';
+import Image from '~/components/common/Image.astro';
+import Button from '~/components/ui/Button.astro';
+import ItemGrid from '../ui/ItemGrid.astro';
+import type { CallToAction } from '~/types';
+
+export interface Props {
+  id?: string;
+  title?: string;
+  title2?: string;
+  subtitle?: string;
+  tagline?: string;
+  content?: string;
+  actions?: string | CallToAction[];
+  image?: string | unknown; // TODO: find HTMLElementProps
+}
+
+
+const {
+  title = await Astro.slots.render('title'),
+  subtitle = await Astro.slots.render('subtitle'),
+  tagline,
+  content = await Astro.slots.render('content'),
+  callToAction,
+  items = [],
+  columns,
+  image = await Astro.slots.render('image'),
+  isReversed = false,
+  isAfterContent = false,
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props;
+---
+
+<WidgetWrapper
+  id={id}
+  isDark={isDark}
+  containerClass={`max-w-7xl mx-auto ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container ?? ''}`}
+  bg={bg}
+>
+  <Headline
+    title={title}
+    subtitle={subtitle}
+    tagline={tagline}
+    classes={{
+      container: 'max-w-xl sm:mx-auto lg:max-w-2xl',
+      title: 'text-4xl md:text-5xl font-bold tracking-tighter mb-4 font-heading',
+      subtitle: 'max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400',
+    }}
+  />
+  <div class="mx-auto max-w-7xl p-4 md:px-8">
+    <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
+      <div class="md:basis-1/2 self-center">
+        {content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}
+
+        {
+          callToAction && (
+            <div class="mt-[-40px] mb-8 text-primary">
+              <Button variant="link" {...callToAction} />
+            </div>
+          )
+        }
+
+        <ItemGrid
+          items={items}
+          columns={columns}
+          defaultIcon="tabler:link"
+          classes={{
+            container: `gap-y-4 md:gap-y-8`,
+            panel: 'max-w-none',
+            title: 'text-lg font-medium leading-6 dark:text-white ml-2 rtl:ml-0 rtl:mr-2',
+            description: 'text-muted dark:text-slate-400 ml-2 rtl:ml-0 rtl:mr-2',
+            icon: 'flex h-7 w-7 items-center justify-center rounded-full bg-blue-600 dark:bg-blue-700 text-gray-50 p-1',
+            action: 'text-lg font-medium leading-6 dark:text-white ml-2 rtl:ml-0 rtl:mr-2',
+          }}
+        />
+      </div>
+      <div aria-hidden="true" class="mt-10 md:mt-0 md:basis-1/2">
+        {
+          image && (
+            <div class="relative m-auto max-w-4xl">
+              {typeof image === 'string' ? (
+                <Fragment set:html={image} />
+              ) : (
+                <Image
+                  class="mx-auto w-full rounded-lg bg-gray-500 shadow-lg"
+                  width={500}
+                  height={500}
+                  widths={[400, 768]}
+                  sizes="(max-width: 768px) 100vw, 432px"
+                  layout="responsive"
+                  {...image}
+                />
+              )}
+            </div>
+          )
+        }
+      </div>
+    </div>
+  </div>
+</WidgetWrapper>

src/navigation.js

@@ -6,6 +6,10 @@ export const headerData = {
       text: 'Technology',
       href: getPermalink('/technology'),
     },
+    {
+      text: 'Builders',
+      href: getPermalink('/builders'),
+    },
     {
       text: 'Farming',
       href: getPermalink('/farming'),
@@ -29,6 +33,7 @@ export const footerData = {
       links: [
         { text: 'Home', href: '/' },
         { text: 'Technology', href: '/technology' },
+        { text: 'Builders', href: '/builders' },
         { text: 'About', href: '/about' },
       ],
     },

src/pages/builders.astro

@@ -0,0 +1,100 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+
+import Hero from '~/components/widgets/Hero.astro';
+
+import INCAStats from './incastats.astro'
+import Partners from './partners.astro'
+import Purpose from './purpose.astro'
+import Content2 from '~/components/widgets/Content2.astro';
+
+const metadata = {
+  title: 'Builders',
+  ignoreTitleTemplate: true,
+};
+---
+
+<Layout metadata={metadata}>
+
+  <!-- Hero Widget ******************* -->
+
+  <Hero
+    id="about"
+    tagline="Builders"
+    image={{
+      src: '~/assets/images/builders_temp.webp',
+      alt: 'Caos Image',
+    }}
+  >
+    <Fragment slot="title">
+      Meet the Builders of the Grid!
+    </Fragment>
+
+    <Fragment slot="subtitle">
+      <span class="font-semibold">Project INCA</span> is proud of its many partnerships<br> providing a thriving ecosystem of like-minded individuals <br>and innovative products and services<br></span
+      >
+    </Fragment>
+  </Hero>
+
+
+
+  <!-- Content Widget **************** -->
+
+  <Content2
+    link="~/assets/images/mission.jpg"
+    id="mission"
+    columns={3}
+    items={[
+      {
+        description: '<a href= "/elastio">Read More</a>',
+      },
+    ]}
+    image={{
+      src: '~/assets/images/elastio.png',
+      alt: 'Colorful Image',
+      loading: 'eager',
+    }}
+  >
+    <Fragment slot="content">
+      <h2 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Elastio</h2>
+      <p>
+        Elestio is an innovative platform dedicated to providing cutting-edge decentralized applications (dApps) and services to users worldwide. With a focus on accessibility, security, and user empowerment, Elestio aims to revolutionize the way individuals interact with decentralized technologies.
+      </p>
+    </Fragment>
+
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </Content2>
+
+  <Content2
+    isReversed
+    link="~/assets/images/mission.jpg"
+    id="mission"
+    columns={3}
+    items={[
+      {
+        description: '<a href= "/sikana">Read More</a>',
+      },
+    ]}
+    image={{
+      src: '~/assets/images/sikana.png',
+      alt: 'Colorful Image',
+      loading: 'eager',
+    }}
+  >
+    <Fragment slot="content">
+      <h2 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Sikana</h2>
+      <p>
+        Sikana, a platform dedicated to providing education for all, has delivered over 400 million lessons through free educational videos. However, the platform has faced financial challenges in hosting its content at scale. In collaboration with ThreeFold, Sikana aims to overcome these challenges and further its mission of providing accessible education by creating local content in native languages and hosting it on local infrastructure. This partnership will empower communities worldwide with knowledge and skills, irrespective of their financial or geographical limitations.
+      </p>
+    </Fragment>
+
+    <Fragment slot="bg">
+      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
+    </Fragment>
+  </Content2>
+
+</Layout>
+
+

src/pages/elastio.md

@@ -0,0 +1,9 @@
+---
+layout: ~/layouts/MarkdownLayout.astro
+---
+
+# Elastio Project
+
+![](~/assets/images/elastio.png)
+
+We present the Elastio builder on the INCA grid.

src/pages/sikana.md

@@ -0,0 +1,9 @@
+---
+layout: ~/layouts/MarkdownLayout.astro
+---
+
+# Sikana Project
+
+![](~/assets/images/sikana.png)
+
+Sikana, a platform dedicated to providing education for all, has delivered over 400 million lessons through free educational videos. However, the platform has faced financial challenges in hosting its content at scale. In collaboration with ThreeFold, Sikana aims to overcome these challenges and further its mission of providing accessible education by creating local content in native languages and hosting it on local infrastructure. This partnership will empower communities worldwide with knowledge and skills, irrespective of their financial or geographical limitations.