# Build and start
npm run docker:up

# View logs
npm run docker:logs

# Stop container
npm run docker:down

# Port configuration
PORT=3000

# Next.js configuration
NEXT_PUBLIC_APP_NAME=SOFTNEWS
NEXT_PUBLIC_APP_VERSION=1.0.0

# Environment
NODE_ENV=development

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

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

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

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

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)

// 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" }
      ]
    }
  ]
}

// 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

// 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)

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

// 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"
    }
  ]
}

# 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)

# Build the application
npm run build

# Start production server
npm start

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

# Or use npm scripts
npm run docker:up

• 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

• 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

{
  "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"
  }
}