🌍 1Afrika Platform - Book-Like Encyclopedia

The 1Afrika Platform is a unified web application built with Next.js and TypeScript that presents African culture, values, and heritage through a book-like digital experience. It serves as a comprehensive encyclopedia and digital hub across various domains.

📖 Book-Like Design

The application features a book cover design as requested by stakeholders:

Cover Page Features

• Yearly Updatable Image: Background image that can be changed annually
• Concept Name & Logo: Prominent display of "1Afrika" with globe icon
• Subtitle: "Encyclopedia of African Heritage"
• ENTER Button: Clean, prominent button to access the main content
• Edition Year: Shows current year (2025 Edition)

Main Encyclopedia Page

• Panoramic African Landscape: Full-width image showcasing Africa's diverse landscapes
• Organized Link Buttons: 8 main sections arranged in a clean grid layout
• Responsive Design: Works seamlessly on desktop and mobile devices

🏗️ Atomic Component Structure

The application follows atomic design principles with reusable components:

Core Components

• BookCover.tsx - Book cover page with yearly-updatable image
• MainEncyclopedia.tsx - Main encyclopedia page with panoramic image and sections
• PanoramicImage.tsx - Reusable panoramic image component
• EncyclopediaSection.tsx - Individual encyclopedia section cards
• StatisticsSection.tsx - Statistics display component

Data Management

• lib/data.ts - Centralized data for all encyclopedia sections and content
• Easy to update yearly images, content, and statistics

🎯 Core Departments

The platform is organized into 8 main sections:

1. 🖥️ 1Afrika IT - Innovation & Technology
2. 🎭 1Afrika Entertainment - Music, Film & Arts
3. 🩺 1Afrika Health - Wellness & Healthcare
4. 👗 1Afrika Fashion - Style & Design
5. 📚 Cultural Encyclopedia - History & Heritage
6. 👥 Peoples & Languages - Ethnic Groups & Linguistics
7. 🗺️ Geography & Nature - Landscapes & Biodiversity
8. 🌍 Global Impact - Africa's World Influence

🚀 Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui with Radix UI primitives
• Animations: Framer Motion
• Icons: Lucide React
• State Management: React hooks

🛠️ Getting Started

Prerequisites

• Node.js (v18+ recommended)
• npm or yarn

Installation

git clone https://github.com/G4EVA-dev/1Afrika.git
cd 1afrika
npm install

Running the Development Server

npm run dev

Open your browser and navigate to http://localhost:3000

📁 Project Structure

1afrika/
├── app/
│   ├── page.tsx              # Main page with book cover logic
│   ├── layout.tsx            # Root layout
│   └── globals.css           # Global styles
├── components/
│   ├── BookCover.tsx         # Book cover component
│   ├── MainEncyclopedia.tsx  # Main encyclopedia page
│   ├── PanoramicImage.tsx    # Panoramic image component
│   ├── EncyclopediaSection.tsx # Individual section cards
│   ├── StatisticsSection.tsx # Statistics display
│   └── ui/                   # shadcn/ui components
├── lib/
│   ├── data.ts               # Centralized data
│   └── utils.ts              # Utility functions
└── public/                   # Static assets

🎨 Design Features

Book Cover Experience

• Smooth Animations: Framer Motion animations for engaging transitions
• Yearly Updates: Easy image replacement for annual updates
• Professional Typography: Clean, readable text hierarchy
• Responsive Design: Works on all device sizes

Encyclopedia Layout

• Panoramic Hero: Stunning African landscape imagery
• Color-Coded Sections: Each department has its own color theme
• Interactive Cards: Hover effects and smooth transitions
• Statistics Display: Key African facts and figures

🔧 Customization

Updating Yearly Image

Edit lib/data.ts:

export const bookCoverData = {
  yearlyImage: "/new-yearly-image.jpg", // Update this path
  // ... other data
};

Adding New Sections

Add to encyclopediaSections array in lib/data.ts:

{
  icon: <NewIcon className="h-6 w-6" />,
  title: "New Section",
  description: "Section Description",
  content: "Section content...",
  color: "bg-new-color-500 hover:bg-new-color-600",
  borderColor: "border-new-color-200",
  href: "/new-section"
}

🤝 Contributing

1. Clone the Repository

git clone https://github.com/G4EVA-dev/1Afrika.git

2. Create a Feature Branch

git checkout -b feature/your-feature-name

3. Make Your Changes

Follow atomic design principles and maintain component reusability.

4. Commit and Push

git commit -m "feat: add new feature"
git push origin feature/your-feature-name

5. Create a Pull Request

Go to the original repository and open a Pull Request from your branch.

🧹 Code Standards

• Use Conventional Commits messages
• Use TypeScript for all files (.ts, .tsx)
• Follow atomic design principles
• Use Tailwind CSS for styling
• Use semantic HTML and accessibility best practices
• Format code with Prettier and ESLint

📞 Contact

• Email: [email protected]
• Phone: +237652591206
• Location: Buea, Cameroon, Africa

---

© 2025 1Afrika Encyclopedia. All rights reserved.