# Documentation

## SOFTNEWS - Modern News Website Next.js Template

A modern, responsive news website template built with Next.js 15.5.3, React 19, and Tailwind CSS 4. Features a clean design, optimized performance, and mobile-first approach perfect for news websites, blogs, and content-driven platforms.

- Template Name: SOFTNEWS - Modern News Website Next.js Template
- Author: TheSuperSoft
- Framework: Next.js 15.5.3
- UI Library: React 19

- Created: October 1, 2025
- Version: 1.0.0
- CSS Framework: Tailwind CSS 4
- Language: TypeScript 5

If you have any questions that are beyond the scope of this help file, Please feel free to contact us via Support Page

# Installation

Follow the steps below to setup your SOFTNEWS template:

### Prerequisites

- Node.js: 18.0 or higher
- npm: 9.0 or higher (or yarn/pnpm/bun)
- Docker: (optional) For containerized deployment

### Method 1: Local Development

1. Extract the downloaded template files
2. Navigate to the `softnews-files` directory using command line (terminal/powershell)
3. Install dependencies by running:

       npm install

4. Start the development server:

       npm run dev

5. In your browser navigate to http://localhost:3000
6. That's all! Now you should see your SOFTNEWS website

# Docker Setup

SOFTNEWS comes with Docker support for easy deployment:

### Quick Start with Docker Compose

1. Navigate to the `softnews-files` directory
2. Copy environment file:

       cp .env.example .env

3. Configure port in `.env` file (optional):

       PORT=3000  # Change to your preferred port

4. Build and run with Docker Compose:

       docker-compose up -d

5. Access the application at http://localhost:3000

### Docker Commands

    # Build and start
    npm run docker:up

    # View logs
    npm run docker:logs

    # Stop container
    npm run docker:down

# Configuration

### Environment Variables

Configure your SOFTNEWS application using environment variables in the `.env` file:

    # Port configuration
    PORT=3000

    # Next.js configuration
    NEXT_PUBLIC_APP_NAME=SOFTNEWS
    NEXT_PUBLIC_APP_VERSION=1.0.0

    # Environment
    NODE_ENV=development

Variable | Default | Description
--- | --- | ---
`PORT` | 3000 | Port number for the application
`NODE_ENV` | production | Environment mode
`NEXT_PUBLIC_APP_NAME` | SOFTNEWS | Application name
`NEXT_PUBLIC_APP_VERSION` | 1.0.0 | Application version

## Project Structure

SOFTNEWS follows the Next.js 15 App Router structure with organized components and utilities:

### 📁 Root Directory Structure

    softnews-files/
    ├── src/                      # Source code directory
    │   ├── app/                  # Next.js App Router pages
    │   ├── components/          # Reusable components
    │   ├── contexts/            # React contexts
    │   ├── data/                # Static data files
    │   ├── hooks/               # Custom React hooks
    │   └── utils/               # Utility functions
    ├── public/                  # Static assets
    │   └── assets/             # Images, fonts, videos
    ├── docker-compose.yml      # Docker Compose configuration
    ├── Dockerfile             # Docker image configuration
    ├── package.json           # Dependencies and scripts
    ├── tailwind.config.js     # Tailwind CSS configuration
    ├── tsconfig.json          # TypeScript configuration
    ├── next.config.ts         # Next.js configuration
    ├── postcss.config.mjs     # PostCSS configuration
    └── eslint.config.mjs      # ESLint configuration

### 📂 Components Structure

    src/components/
    ├── ui/                     # Reusable UI components
    │   ├── Navigation.tsx     # Main navigation component
    │   ├── GlobalLoader.tsx   # Loading spinner component
    │   ├── Footer.tsx         # Footer component
    │   └── ...                # Other UI components
    ├── FeaturedArticles.tsx   # Featured articles section
    ├── LatestNews.tsx         # Latest news section
    ├── Newsletter.tsx         # Newsletter subscription
    ├── SearchResults.tsx      # Search results display
    ├── InternationalSection.tsx # International news
    └── ...                    # Other feature components

### 📄 Pages Structure (App Router)

    src/app/
    ├── (routes)/              # Route groups
    │   ├── about/            # About page
    │   ├── contact/          # Contact page
    │   ├── team/             # Team page
    │   ├── author/           # Author page
    │   ├── video-news/       # Video news page
    │   ├── coming-soon/      # Coming soon page
    │   ├── 404/              # Custom 404 page
    │   └── [category]/       # Dynamic category pages
    │       └── [slug]/       # Dynamic article pages
    ├── globals.css           # Global styles
    ├── layout.tsx            # Root layout
    ├── page.tsx              # Homepage
    ├── loading.tsx           # Global loading UI
    ├── error.tsx             # Error boundary
    ├── not-found.tsx         # 404 page
    └── favicon.ico           # Favicon file

### 📊 Data Structure

    src/data/
    ├── articles.json         # Sample articles data
    ├── categories.json       # News categories
    ├── navigation.json       # Navigation configuration
    ├── navigationSettings.json # Navigation settings
    ├── team.json            # Team members data
    └── ...                  # Other data files

### 🖼️ Assets Structure

    public/assets/
    ├── img/
    │   ├── icons/           # Icons and logos
    │   │   ├── logo.png     # Main logo
    │   │   └── favicon.ico  # Favicon
    │   ├── news/            # News article images
    │   ├── team/            # Team member photos
    │   └── ...              # Other images
    ├── videos/              # Video files
    └── fonts/               # Custom fonts (if any)

## Features

SOFTNEWS is packed with modern features for building professional news websites.

#### 🚀 Performance Features

- Next.js 15.5.3 with App Router
- React 19 with modern hooks
- Image optimization (automatic WebP)
- Font optimization (Geist fonts)
- Code splitting and lazy loading
- Static Site Generation (SSG)

#### 🎨 Design Features

- Tailwind CSS 4 utility-first styling
- Fully responsive design
- Mobile-first approach
- Clean and modern UI
- Dark/Light theme support
- Custom CSS variables

#### 📱 User Experience

- Real-time search functionality
- Contact forms with validation
- Math captcha spam protection
- Loading states and transitions
- Error handling and 404 pages
- Accessibility (WCAG compliant)

#### 🛠️ Developer Features

- TypeScript 5 for type safety
- ESLint 9 for code quality
- Docker support for deployment
- Environment configuration
- Hot reload development
- Production-ready builds

## Pages & Components

SOFTNEWS includes a comprehensive set of pages and components for news websites:

### 📄 Available Pages

- Homepage - Main landing page with featured articles and latest news
- Category Pages - Dynamic category-based content filtering
- News Details - Individual article pages with full content and comments
- Video News - Dedicated page for video content and news
- Author Page - Author profiles and their published articles
- About Us - Company information and mission

- Team Page - Team member profiles and roles
- Contact Us - Contact form with validation and location info
- 404 Error Page - Custom error handling and navigation
- Coming Soon - Maintenance or launch countdown page
- Search Results - Dynamic search functionality with filters

### 🗂️ Navigation Structure

    // Navigation Configuration
    {
      "navigationItems": [
        {
          "name": "Home",
          "href": "/",
          "hasDropdown": false
        },
        {
          "name": "Categories",
          "href": "#",
          "hasDropdown": false,
          "useCategories": true
        },
        {
          "name": "Pages",
          "href": "#",
          "hasDropdown": true,
          "dropdownItems": [
            { "name": "Video News", "href": "/video-news" },
            { "name": "Author", "href": "/author" },
            { "name": "404 Error", "href": "/404" },
            { "name": "Coming Soon", "href": "/coming-soon" },
            { "name": "About Us", "href": "/about" },
            { "name": "Team", "href": "/team" },
            { "name": "Contact Us", "href": "/contact" }
          ]
        }
      ]
    }

### 🧩 Key Components

    // Example React Component Structure
    import React from 'react'

    function NewsCard({ article, featured = false }) {
      return (
        <article className={`
          bg-white rounded-lg shadow-md overflow-hidden
          ${featured ? 'md:flex' : ''}
        `}>
          <div className="aspect-video bg-gray-200">
            <img
              src={article.image}
              alt={article.title}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="p-6">
            <h3 className="text-xl font-bold mb-2">
              {article.title}
            </h3>
            <p className="text-gray-600 mb-4">
              {article.excerpt}
            </p>
            <div className="flex justify-between items-center">
              <span className="text-sm text-gray-500">
                {article.date}
              </span>
              <span className="text-sm font-medium text-green-600">
                {article.category}
              </span>
            </div>
          </div>
        </article>
      )
    }

    export default NewsCard

### 📝 Page Features

#### 🏠 Core Pages

- Homepage: Featured articles, latest news, trending topics
- Categories: Dynamic category navigation and filtering
- News Details: Full article content, related articles, comments
- Video News: Video content display and streaming
- Search: Real-time search with advanced filters

#### 📞 Information Pages

- About Us: Company story and mission statement
- Team: Staff profiles and expertise areas
- Contact: Contact form with math captcha
- Author: Journalist profiles and article history

### 🎨 Special Pages

- 404 Error: Custom error page with navigation options
- Coming Soon: Countdown timer and subscription form

- Dynamic Categories: Auto-generated from categories.json
- Responsive Design: All pages optimized for mobile

## Customization

### 🖼️ Logo & Favicon Customization

#### 📍 Logo Files Location

Your logo files are located in: `public/assets/img/icons/`

#### 🎨 Changing the Logo

1. Prepare your logo:
   - Format: PNG, SVG, or JPG
   - Recommended size: 200x60px (or proportional)
   - Background: Transparent (for PNG/SVG)
2. Replace the file:

       # Replace the main logo
       public/assets/img/icons/logo.png

3. Update references (if filename changes):

       // In Navigation component (src/components/ui/Navigation.tsx)
       <img
         src="/assets/img/icons/your-new-logo.png"
         alt="Your Brand"
         className="h-8 w-auto"
       />

#### 🔖 Changing the Favicon

1. Prepare your favicon:
   - Format: ICO (recommended) or PNG
   - Size: 32x32px or 16x16px
   - Name: `favicon.ico`
2. Replace the favicon:

       # Method 1: Replace in app directory (Next.js 13+)
       src/app/favicon.ico

       # Method 2: Replace in public directory
       public/assets/img/icons/favicon.ico

3. Clear browser cache:

   After replacing, clear your browser cache or use incognito mode to see changes

#### 🔧 Advanced Logo Configuration

    // Multiple logo variants for different uses
    public/assets/img/icons/
    ├── logo.png              # Main logo (light backgrounds)
    ├── logo-dark.png         # Dark variant (dark backgrounds)
    ├── logo-mobile.png       # Mobile optimized version
    ├── favicon.ico           # Browser favicon
    └── apple-touch-icon.png  # Apple device icon (180x180px)

### 🎨 Styling with Tailwind CSS

SOFTNEWS uses Tailwind CSS 4 for styling. You can customize the design by:

    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: {
            primary: {
              50: '#f0fdf4',
              500: '#16a34a',  // Your current green primary
              900: '#14532d',
            }
          },
          fontFamily: {
            'sans': ['Geist', 'system-ui', 'sans-serif'],
          }
        }
      }
    }

### 📝 Content Management

Update content by editing JSON files in the `src/data/` directory:

    // src/data/articles.json
    {
      "featured": [
        {
          "id": 1,
          "title": "Your News Title",
          "excerpt": "Brief description of the article...",
          "image": "/assets/img/news/news-1.jpg",
          "category": "Technology",
          "date": "2025-01-01",
          "author": "John Doe"
        }
      ]
    }

### 🖼️ Images and Assets

Replace placeholder images in the `public/assets/` directory with your own content:

    # Image guidelines
    - News images: 800x600px or 16:9 aspect ratio
    - Team photos: 400x400px (square)
    - Category icons: 64x64px
    - Optimize images for web (use WebP when possible)

### 🌈 Color Theme Customization

To change the primary color theme from green to your brand color:

1. Update Tailwind config:

       // Replace green-600 (#16a34a) with your color
       colors: {
         primary: {
           500: '#your-color',     // Main brand color
           600: '#darker-shade',   // Hover states
           700: '#darkest-shade'   // Active states
         }
       }

2. Update data files:

       // src/data/navigationSettings.json
       {
         "primaryColor": "your-color-name"
       }

## Deployment

### 🚀 Production Build

    # Build the application
    npm run build

    # Start production server
    npm start

### 🐳 Docker Deployment

    # Build and deploy with Docker
    docker-compose up -d

    # Or use npm scripts
    npm run docker:up

### ☁️ Cloud Deployment

- Vercel: Connect your GitHub repo to Vercel for automatic deployments
- Netlify: Drag and drop your build folder or connect via Git
- AWS/Google Cloud: Use Docker containers for cloud deployment

### 📊 Performance Metrics

Metric | Score | Description
--- | --- | ---
First Load Time | < 1.5s | Initial page load performance
Lighthouse Score | 95+ | Overall performance rating
Bundle Size | ~102KB | Gzipped JavaScript bundle
SEO Score | 100/100 | Search engine optimization

## Dependencies

SOFTNEWS uses modern, lightweight dependencies for optimal performance:

### 🔧 Core Dependencies

- Next.js 15.5.3 - React framework with App Router
- React 19.1.0 - Latest React with modern features
- React DOM 19.1.0 - React DOM bindings
- @heroicons/react 2.2.0 - Beautiful SVG icons

### 🛠️ Development Dependencies

- TypeScript 5 - Type-safe JavaScript development
- Tailwind CSS 4 - Utility-first CSS framework
- ESLint 9 - Code linting and quality assurance
- PostCSS - CSS processing and optimization
- @types/node - Node.js type definitions
- @types/react - React type definitions
- @types/react-dom - React DOM type definitions

### 📦 Package.json Scripts

    {
      "scripts": {
        "dev": "next dev -p ${PORT:-3000}",
        "build": "next build",
        "start": "next start -p ${PORT:-3000}",
        "lint": "eslint",
        "docker:build": "docker-compose build",
        "docker:up": "docker-compose up -d",
        "docker:down": "docker-compose down",
        "docker:logs": "docker-compose logs -f"
      }
    }

## Changelog

### Version 1.0.0 - Current Version (October 1, 2025)

#### 🎉 Initial Release Features:

- ✅ Next.js 15.5.3 with App Router
- ✅ React 19 with latest features
- ✅ Tailwind CSS 4 for styling
- ✅ TypeScript 5 for type safety
- ✅ Responsive design for all devices
- ✅ SEO optimized pages and meta tags
- ✅ Image optimization with Next.js Image
- ✅ Font optimization with Geist fonts
- ✅ Contact forms with validation
- ✅ Search functionality
- ✅ Loading states and error handling
- ✅ Docker support for deployment
- ✅ Environment configuration
- ✅ Production-ready build optimization
- ✅ Accessibility (WCAG compliant)

## Source & Credits

#### 🖼️ Images:

- Unsplash - https://unsplash.com/
- Placeholder images for demo purposes only

#### 🎨 Icons:

- Heroicons - https://heroicons.com/
- Tailwind CSS built-in icons

#### 🚀 Frameworks & Libraries:

- Next.js - https://nextjs.org/
- React - https://react.dev/
- Tailwind CSS - https://tailwindcss.com/
- TypeScript - https://www.typescriptlang.org/

#### 🔤 Fonts:

- Geist Font Family - https://vercel.com/font

## Support

If this documentation doesn't answer your questions, please feel free to contact us:

#### 📧 Get Support

Contact Support

We are available during business hours and respond to all inquiries within 12-24 hours on weekdays.

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

#### Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.