Skip to main content

​
🧩 Tech Stack

  • React 18 + TypeScript
  • Vite 5 for lightning-fast dev/build
  • Tailwind CSS 3 for styling
  • Lucide Icons for crisp SVG icons
  • Optional: Vercel Analytics for basic traffic insights

​
✨ Features

  • Modern UI/UX: Animated hero, gradient blobs, subtle motion
  • Models Showcase: Categorized model sections with feature badges
  • Pricing: Simple plans with highlighted “Most Popular” option
  • Responsive & Accessible: Mobile-first, ARIA labels, keyboard-friendly
  • Type-safe Data: Strongly typed models and pricing data sources

​
🗂️ Project Structure

anyllm-landing/
  ├─ src/
  │  ├─ components/
  │  │  ├─ Navbar.tsx
  │  │  ├─ Hero.tsx
  │  │  ├─ ModelSection.tsx
  │  │  ├─ ModelCategory.tsx
  │  │  ├─ ModelCard.tsx
  │  │  ├─ ModelFeatureBadge.tsx
  │  │  ├─ PricingSection.tsx
  │  │  └─ PricingCard.tsx
  │  ├─ data/
  │  │  ├─ models.ts
  │  │  └─ pricing.ts
  │  ├─ styles/
  │  │  └─ animations.css
  │  ├─ assets/
  │  ├─ App.tsx
  │  ├─ main.tsx
  │  └─ index.css
  ├─ tailwind.config.js
  ├─ vite.config.ts
  ├─ eslint.config.js
  ├─ tsconfig*.json
  └─ index.html

​
🧰 Getting Started

Prerequisites:
  • Node.js 18+ and npm
Install dependencies: 
npm install
Start the dev server: 
npm run dev
Build for production: 
npm run build
Preview the build locally: 
npm run preview
Lint the code: 
npm run lint

​
🧱 Data Model (TypeScript)

Models and pricing are defined as typed data sources: 
// src/data/models.ts
export type ModelFeature = 'reasoning' | 'image' | 'search' | 'code';

export interface Model {
  name: string;
  description: string;
  context: string; // e.g. "128K context"
  features: ModelFeature[];
}

export interface ModelCategory {
  provider: string;
  description: string;
  models: Model[];
}

export interface ModelSection {
  title: string;
  description: string;
  categories: ModelCategory[];
}

// src/data/pricing.ts
export interface PricingPlan {
  name: string;
  price: string;      // "$0", "$5.99", …
  features: string[]; // bullets
  isPopular?: boolean;
}

​
🎨 Styling & Animations

  • Tailwind utilities are used throughout for layout and theming.
  • Custom animations live in src/styles/animations.css (fade-in, pulse-size, blob, sequential highlights).
  • Extra Tailwind keyframes are also extended in tailwind.config.js.

​
♿ Accessibility

  • Semantic landmarks and ARIA labels on nav, section, and footer.
  • Buttons for interactive icons (e.g., GitHub) with aria-label.
  • Focusable, keyboard-friendly interactions and sufficient color contrast.

​
🛠️ Scripts

  • npm run dev — start Vite dev server
  • npm run build — production build
  • npm run preview — preview built assets
  • npm run lint — run ESLint (TypeScript + React rules)

​
🚢 Deployment

  • Vercel: import the repo, framework preset “Vite”, default build is npm run build, output dist/.
  • Netlify: set build npm run build, publish directory dist/.
  • GitHub Pages: build locally and push dist/ to a gh-pages branch (or use an action).

​
🧪 Quality

  • ESLint with React hooks and refresh rules
  • TypeScript strict typing on data and components

​
🙏 Acknowledgements

  • Logos and trademarks belong to their respective owners (OpenAI, Google, Meta, Alibaba, Mistral, DeepSeek, SDAIA).
  • Icons by lucide-react.

​
💬 Feedback

Spotted a bug or have a feature idea? Open an issue or submit a PR — contributions are welcome! 🎉