Merge pull request #88 from blackportal-ai/add-brand-page

Add brand page

src/components/icons/SevallaLogo.tsx

@@ -15,9 +15,9 @@ export default function SevallaLogo({ className }: Props) {
     >
       <path
         className="fill-[#f97316]"
-        fill-rule="evenodd"
+        fillRule="evenodd"
         d="M33.901 0c-18.225 0-33 14.775-33 33v120c0 18.225 14.775 33 33 33h126c18.226 0 33-14.775 33-33V33c0-18.225-14.774-33-33-33h-126zM116 41H73v23H51v17.721a10 10 0 003.095 7.234L73 107H51v22h22v23h43v-23h22v-17.721a10 10 0 00-3.095-7.234L116 86h22V64h-22V41zm0 23v22H83c-5.523 0-10-4.477-10-10V64h43zm0 65H73v-22h33c5.523 0 10 4.477 10 10v12z"
-        clip-rule="evenodd"
+        clipRule="evenodd"
       ></path>
       <path
         className="fill-black dark:fill-white"

src/components/sections/brand/BrandList/index.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@/components/ui/Button';
+import { Card, CardHeader } from '@/components/ui/Card';
+import { Link } from '@/components/ui/Link';
+import type { BrandItem } from '@/types/brand';
+
+type Props = {
+  title: string;
+  logos: BrandItem[];
+};
+
+export default function BrandList({ title, logos }: Props) {
+  return (
+    <section className="py-20">
+      <div className="container">
+        <h2 className="mb-6 text-center text-3xl font-bold">{title}</h2>
+
+        <ul className="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
+          {logos.map((logo) => (
+            <li key={logo.variants.svg.src}>
+              <Card>
+                <CardHeader className="space-y-4">
+                  <div className="flex items-center justify-center rounded-xl bg-zinc-200 p-6 dark:bg-zinc-800">
+                    <img className="h-12" src={logo.variants.svg.src} alt="" />
+                  </div>
+
+                  <hr />
+
+                  <div className="flex items-center justify-center">
+                    <Button variant="ghost" asChild>
+                      <Link href={logo.variants.svg.src}>SVG</Link>
+                    </Button>
+                  </div>
+                </CardHeader>
+              </Card>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}

src/components/sections/brand/BrandMessage/index.tsx

@@ -0,0 +1,15 @@
+import { useTypewriter } from '@/hooks/use-typewriter';
+
+const text = 'We are happy to have introduced you to our brands.';
+
+export default function BrandMessage() {
+  const displayText = useTypewriter(text, 60);
+
+  return (
+    <div className="container py-20">
+      <h1 className="mx-auto min-h-36 max-w-3xl text-3xl font-bold md:min-h-28 md:text-4xl">
+        {displayText}
+      </h1>
+    </div>
+  );
+}

src/data/brand.ts

@@ -0,0 +1,73 @@
+import type { BrandItem } from '@/types/brand';
+
+export const blackPortalLogos: BrandItem[] = [
+  {
+    variants: {
+      svg: {
+        src: 'https://raw.githubusercontent.com/blackportal-ai/resources/13519fab43fc21cd189473955922f83c37927319/blackportal/logo/blackportal_black_logo.svg',
+      },
+    },
+  },
+  {
+    variants: {
+      svg: {
+        src: 'https://raw.githubusercontent.com/blackportal-ai/resources/13519fab43fc21cd189473955922f83c37927319/blackportal/logo/blackportal_white_logo.svg',
+      },
+    },
+  },
+  {
+    variants: {
+      svg: {
+        src: 'https://raw.githubusercontent.com/blackportal-ai/resources/13519fab43fc21cd189473955922f83c37927319/blackportal/logo/blackportal_black_icon.svg',
+      },
+    },
+  },
+  {
+    variants: {
+      svg: {
+        src: 'https://raw.githubusercontent.com/blackportal-ai/resources/13519fab43fc21cd189473955922f83c37927319/blackportal/logo/blackportal_white_icon.svg',
+      },
+    },
+  },
+];
+
+export const deltaLogos: BrandItem[] = [
+  {
+    variants: {
+      svg: {
+        src: 'https://raw.githubusercontent.com/blackportal-ai/resources/13519fab43fc21cd189473955922f83c37927319/delta/logo/%CE%94_black_logo.svg',
+      },
+    },
+  },
+  {
+    variants: {
+      svg: {
+        src: 'https://raw.githubusercontent.com/blackportal-ai/resources/13519fab43fc21cd189473955922f83c37927319/delta/logo/%CE%94_white_logo.svg',
+      },
+    },
+  },
+  {
+    variants: {
+      svg: {
+        src: 'https://raw.githubusercontent.com/blackportal-ai/resources/13519fab43fc21cd189473955922f83c37927319/delta/logo/%CE%94_black_icon.svg',
+      },
+    },
+  },
+  {
+    variants: {
+      svg: {
+        src: 'https://raw.githubusercontent.com/blackportal-ai/resources/13519fab43fc21cd189473955922f83c37927319/delta/logo/%CE%94_white_icon.svg',
+      },
+    },
+  },
+];
+
+export const nebulaLogos: BrandItem[] = [
+  {
+    variants: {
+      svg: {
+        src: 'https://raw.githubusercontent.com/blackportal-ai/resources/13519fab43fc21cd189473955922f83c37927319/nebula/logo/nebula.svg',
+      },
+    },
+  },
+];

src/data/footer-links.ts

@@ -5,6 +5,10 @@ export const footerCompanyLinks: MenuItem[] = [
     title: 'Sponsors',
     href: '/sponsors',
   },
+  {
+    title: 'Brand',
+    href: '/brand',
+  },
   {
     title: 'About',
     href: '/about',

src/pages/brand.astro

@@ -0,0 +1,14 @@
+---
+import BrandList from '@/components/sections/brand/BrandList';
+import BrandMessage from '@/components/sections/brand/BrandMessage';
+import { blackPortalLogos, deltaLogos, nebulaLogos } from '@/data/brand';
+import Layout from '@/layouts/Layout.astro';
+---
+
+<Layout title="Brand">
+  <BrandMessage client:load />
+
+  <BrandList title="BlackPortal Logo" logos={blackPortalLogos} />
+  <BrandList title="Delta Logo" logos={deltaLogos} />
+  <BrandList title="Nebula Logo" logos={nebulaLogos} />
+</Layout>

src/types/brand.ts

@@ -0,0 +1,11 @@
+type BrandItemVariantKeys = 'svg';
+
+type BrandItemVariantValue = {
+  src: string;
+};
+
+type BrandItemVariant = Record<BrandItemVariantKeys, BrandItemVariantValue>;
+
+export type BrandItem = {
+  variants: BrandItemVariant;
+};