# Swastik Universe

A professional, SEO-optimized, responsive single-page landing website for Swastik Group of Companies built with Next.js 14, TypeScript, and Tailwind CSS.

## Features

- **Next.js 14 App Router**: Modern React framework with server components
- **TypeScript**: Type-safe development
- **Tailwind CSS**: Utility-first styling with custom brand colors
- **SEO Optimized**: Comprehensive meta tags, structured data, and semantic HTML
- **Responsive Design**: Mobile-first approach for all screen sizes
- **Smooth Scrolling**: Seamless navigation between sections
- **Sticky Navbar**: Always accessible navigation
- **Performance**: Lazy loading images, optimized assets

## Project Structure

```
swastik/
├── app/
│   ├── layout.tsx          # Root layout with SEO metadata
│   ├── page.tsx            # Main landing page
│   └── globals.css         # Global styles and CSS variables
├── components/
│   ├── Navbar.tsx          # Sticky navigation with mobile menu
│   ├── Hero.tsx            # Hero section with background image
│   ├── About.tsx           # About section with Vision & Mission
│   ├── AtAGlance.tsx       # Stats section with animations
│   ├── Companies.tsx       # Company portfolio grid with images
│   ├── Footer.tsx          # Footer with contact information
│   ├── SectionHeading.tsx  # Reusable heading component
│   └── StructuredData.tsx  # JSON-LD structured data for SEO
├── public/
│   ├── companies/          # Company images
│   ├── robots.txt          # Search engine crawler instructions
│   └── sitemap.xml         # XML sitemap for SEO
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.js
```

## SEO Features

### Meta Tags

- Comprehensive title and description tags
- 20+ targeted keywords for search optimization
- Open Graph tags for social media sharing
- Twitter Card tags for Twitter sharing
- Geo-location tags for Mwanza, Tanzania
- Language and regional targeting

### Structured Data (JSON-LD)

- Organization schema with all company details
- Website schema
- Breadcrumb navigation schema
- Contact information schema
- Sub-organization schemas for all 5 companies

### Technical SEO

- Semantic HTML5 elements (section, article, nav, footer)
- Proper heading hierarchy (H1, H2, H3)
- Descriptive alt text for all images
- Title attributes on images
- Lazy loading for images
- Aria labels for accessibility
- robots.txt file
- XML sitemap with image data
- Mobile-friendly responsive design
- Fast loading times

### Keywords Targeted

- Swastik Group, Swastik Universe
- Tanzania business, East Africa mining
- Gold trading Tanzania, precious minerals
- Kingjada Hotels, hospitality Tanzania
- Mwanza Tanzania, Saba Saba
- Pharmaceutical Tanzania, power generation
- Mining companies Tanzania, commodity trading
- Tanzania India trade, sustainable business

## Getting Started

### Installation

```bash
npm install
```

### Development

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser.

### Build for Production

```bash
npm run build
npm start
```

## Design System

### Colors

- **Primary Red**: `#8B1E1E` (deep red for headings, buttons, accents)
- **Background**: `#FAFAFA` (off-white)
- **Text**: `#2D2D2D` (charcoal)

### Typography

- System fonts for optimal performance
- Responsive font sizes using Tailwind's utilities

### Spacing

- Consistent section padding: `py-16` to `py-20`
- Max width container: `max-w-6xl` / `max-w-7xl`

## Sections

1. **Navbar**: Sticky navigation with smooth scroll links
2. **Hero**: Full-screen hero with background image and CTA
3. **About**: Company overview with Vision & Mission cards
4. **At a Glance**: 5 animated stat cards showcasing key highlights
5. **Companies**: Grid of 5 portfolio companies with images
6. **Footer/Contact**: Combined footer with contact information

## Companies Featured

1. **Kingjada Hotels & Apartments Ltd** - Hospitality in Tanzania
2. **Swastik Trading Limited** - Gold and precious minerals trading
3. **Moro Power Limited** - Power and energy business
4. **New Pharmaceuticalls Ltd** - Pharmaceutical business
5. **Mosan Mining Limited** - Mining operations

## Technologies

- Next.js 14+
- React 18
- TypeScript 5
- Tailwind CSS 3
- PostCSS
- Autoprefixer

## SEO Checklist

✅ Meta title and description
✅ Keywords optimization
✅ Open Graph tags
✅ Twitter Card tags
✅ Structured data (JSON-LD)
✅ Semantic HTML
✅ Alt text for images
✅ Heading hierarchy
✅ robots.txt
✅ sitemap.xml
✅ Mobile responsive
✅ Fast loading
✅ Accessibility (ARIA labels)
✅ Geo-location tags
✅ Schema.org markup

## Deployment

This site is ready to deploy to:

- Vercel (recommended for Next.js)
- Netlify
- AWS Amplify
- Any Node.js hosting platform

## License

© 2026 Swastik Group. All rights reserved.