🌍 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:

🖥️ 1Afrika IT - Innovation & Technology
🎭 1Afrika Entertainment - Music, Film & Arts
🩺 1Afrika Health - Wellness & Healthcare
👗 1Afrika Fashion - Style & Design
📚 Cultural Encyclopedia - History & Heritage
👥 Peoples & Languages - Ethnic Groups & Linguistics
🗺️ Geography & Nature - Landscapes & Biodiversity
🌍 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: info@1afrika.com
Phone: +237652591206
Location: Buea, Cameroon, Africa