Skip to content

improvements.md

Latest commit

 

History

History
315 lines (218 loc) · 6.18 KB

improvements.md

File metadata and controls

315 lines (218 loc) · 6.18 KB

Improvements for ZamAI/zamai.github.io

Perfect — here’s the full set for ZamAI/zamai.github.io

Better README.md

# ZamAI

Official public website for **ZamAI** — the home of **Zeerak**, the flagship AI assistant by ZamAI.

## Live Site
- https://zamai.dev

## Overview
ZamAI is the public-facing organization and ecosystem behind Zeerak and future AI products, tools, and digital experiences.

This repository contains the public website and brand presence for ZamAI.

## Brand Structure
- **ZamAI** → parent organization, ecosystem, and public identity
- **Zeerak** → flagship AI assistant by ZamAI

## Repository Purpose
This repository is intended for:
- the ZamAI landing page
- public brand presence
- public-facing product messaging
- future docs, showcase pages, and ecosystem pages

This repository does **not** contain Zeerak’s private core implementation.

## Tech Stack
- HTML
- Tailwind CSS via CDN
- Vanilla JavaScript
- GitHub Pages

## Domain
Custom domain:
- `zamai.dev`

## Deployment
The site is deployed via **GitHub Pages** from the root of the default branch.

## Structure
```text
.
├── index.html
├── CNAME
├── README.md
├── assets/
│   ├── favicon.svg
│   ├── logo.svg
│   └── og-image.png
```

## Notes
- Zeerak is presented publicly as the flagship assistant by ZamAI.
- Core Zeerak source code remains private.
- Public-facing product, brand, and ecosystem assets live here.

Clean repo folder structure

Use this:

zamai.github.io/
├── index.html
├── CNAME
├── README.md
└── assets/
    ├── favicon.svg
    ├── logo.svg
    └── og-image.png

If you want to expand later:

zamai.github.io/
├── index.html
├── CNAME
├── README.md
├── assets/
│   ├── favicon.svg
│   ├── logo.svg
│   ├── og-image.png
│   └── social-preview.png
├── pages/
│   ├── zeerak.html
│   ├── about.html
│   └── contact.html
└── scripts/
    └── main.js

For now, keep it simple:

  • index.html
  • CNAME
  • README.md
  • assets/

Logo setup

You need two lightweight brand assets first:

1. logo.svg

This can be a clean ZamAI logo for future reuse.

<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="zamaiGradient" x1="32" y1="32" x2="224" y2="224" gradientUnits="userSpaceOnUse">
      <stop stop-color="#3B82F6"/>
      <stop offset="0.5" stop-color="#22D3EE"/>
      <stop offset="1" stop-color="#8B5CF6"/>
    </linearGradient>
  </defs>
  <rect x="24" y="24" width="208" height="208" rx="56" fill="#020617"/>
  <rect x="28" y="28" width="200" height="200" rx="52" stroke="url(#zamaiGradient)" stroke-width="8"/>
  <path d="M80 78H176V94L108 162H176V178H80V162L148 94H80V78Z" fill="url(#zamaiGradient)"/>
</svg>

2. favicon.svg

Use a simplified Z mark.

<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="favGradient" x1="8" y1="8" x2="56" y2="56" gradientUnits="userSpaceOnUse">
      <stop stop-color="#3B82F6"/>
      <stop offset="0.5" stop-color="#22D3EE"/>
      <stop offset="1" stop-color="#8B5CF6"/>
    </linearGradient>
  </defs>
  <rect x="4" y="4" width="56" height="56" rx="18" fill="#020617"/>
  <rect x="5.5" y="5.5" width="53" height="53" rx="16.5" stroke="url(#favGradient)" stroke-width="3"/>
  <path d="M18 18H46V22L25 42H46V46H18V42L39 22H18V18Z" fill="url(#favGradient)"/>
</svg>

How to use the logo/favicon in index.html

Add these inside <head>:

<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg" />
<link rel="apple-touch-icon" href="/assets/favicon.svg" />

If you want to display the logo in the nav later, replace the text block with an image like:

<img src="/assets/logo.svg" alt="ZamAI logo" class="h-10 w-10" />

For now, your text-based nav is already good, so favicon matters more immediately.

OG image plan

You need an image for link previews on:

  • X / Twitter
  • LinkedIn
  • Discord
  • Slack
  • WhatsApp
  • GitHub social previews

Recommended file

Create:

assets/og-image.png

Recommended size

Use:

1200 x 630 px

This is the safest standard for Open Graph.

What the OG image should contain

Use this layout:

Background

  • dark premium background
  • subtle blue/cyan/violet glow
  • slight grid texture if possible

Main text

Big headline:

  • ZamAI

Subheadline:

  • Home of Zeerak or
  • Zeerak, the flagship AI assistant by ZamAI

Small supporting line

  • AI products, tools, and digital experiences

Visual

  • a glowing Z
  • or your logo mark
  • or a premium mock terminal/chat card

Colors

Use your brand palette:

  • #020617
  • #3B82F6
  • #22D3EE
  • #8B5CF6
  • white text

Suggested OG image copy

Option 1

ZamAI
Home of Zeerak

Option 2

Zeerak by ZamAI
The flagship AI assistant

Option 3

ZamAI
AI products, tools, and intelligent experiences

Update your meta tags

Once assets/og-image.png exists, use:

<meta property="og:image" content="https://zamai.dev/assets/og-image.png" />
<meta name="twitter:image" content="https://zamai.dev/assets/og-image.png" />
<meta name="twitter:card" content="summary_large_image" />

Your current page should include both og:image and twitter:image.

My recommendation for immediate next files

Create these now:

README.md

Use the version above

assets/favicon.svg

Use the SVG above

assets/logo.svg

Use the SVG above

assets/og-image.png

Create later if you want, but plan for it now

Best next step

If you want, I can now give you a fully updated index.html head section with:

  • favicon
  • OG tags
  • Twitter tags
  • cleaner SEO meta tags

Or I can generate:

  • a simple SVG-based OG image as code
  • or a full polished repo starter pack with all file contents together.