<?php
$page_title = "Open Journal System (OJS) - RSIS International";
include 'include/header.php'; 

?>



<!-- Add Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- Custom Styles -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
   
    :root {
        --primary: #5b21b6;
        --primary-light: #7c3aed;
        --primary-dark: #4c1d95;
        --secondary: #0ea5e9;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
        --dark: #1e293b;
        --light: #f8fafc;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-800: #1f2937;
        --gray-900: #111827;
    }
   
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
   
    body {
        font-family: 'Inter', sans-serif;
        color: var(--gray-900);
        line-height: 1.6;
        background-color: var(--gray-50);
    }
   
    .font-poppins {
        font-family: 'Poppins', sans-serif;
    }
   
    .font-inter {
        font-family: 'Inter', sans-serif;
    }
   
    /* Container */
    .container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1rem;
    }
   
    /* Hero Section */
    .hero-section {
        background: white;
        border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
   
    .hero-content {
        padding: 3rem 0;
    }
   
    .hero-icon {
        width: 64px;
        height: 64px;
        background: var(--primary);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(91, 33, 182, 0.2);
    }
   
    .hero-icon i {
        font-size: 2rem;
        color: white;
    }
   
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.375rem 0.875rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }
   
    .badge-purple {
        background: #f3e8ff;
        color: var(--primary);
    }
   
    .badge-blue {
        background: #dbeafe;
        color: var(--secondary);
    }

    .badge-green {
        background: #d1fae5;
        color: var(--success);
    }
   
    .hero-title {
        font-size: 3rem;
        font-weight: 800;
        color: var(--primary);
        margin: 1rem 0 0.5rem;
    }
   
    .hero-description {
        color: var(--gray-600);
        font-size: 1.125rem;
        max-width: 48rem;
    }
   
    /* Layout */
    .main-layout {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2.5rem 0;
    }
   
    @media (min-width: 1024px) {
        .main-layout {
            flex-direction: row;
        }
    }
   
    .sidebar {
        width: 100%;
    }
   
    @media (min-width: 1024px) {
        .sidebar {
            width: 25%;
            flex-shrink: 0;
        }
    }
   
    .main-content {
        width: 100%;
    }
   
    @media (min-width: 1024px) {
        .main-content {
            width: 75%;
        }
    }
   
    /* Card */
    .card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
    }
   
    .card:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
   
    .card-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        background: var(--gray-50);
    }
   
    .card-header-purple {
        background: var(--primary);
        color: white;
        border: none;
    }
   
    .card-header-blue {
        background: var(--secondary);
        color: white;
        border: none;
    }
   
    .card-header-orange {
        background: var(--warning);
        color: white;
        border: none;
    }
   
    .card-title {
        font-size: 1.25rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
   
    .card-body {
        padding: 0;
    }
   
    /* Navigation */
    .nav-list {
        list-style: none;
    }
   
    .nav-item {
        position: relative;
        border-bottom: 1px solid var(--gray-100);
    }
   
    .nav-item:last-child {
        border-bottom: none;
    }
   
    .nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        color: var(--gray-700);
        text-decoration: none;
        transition: all 0.2s ease;
        font-weight: 500;
        position: relative;
    }
   
    .nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--primary);
        transform: scaleY(0);
        transition: transform 0.2s ease;
    }
   
    .nav-link:hover,
    .nav-item.active .nav-link {
        background: #faf5ff;
        color: var(--primary);
    }
   
    .nav-link:hover::before,
    .nav-item.active .nav-link::before {
        transform: scaleY(1);
    }
   
    .nav-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: white;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }
   
    .nav-link:hover .nav-icon {
        transform: scale(1.1);
    }
   
    .icon-purple { background: var(--primary); }
    .icon-blue { background: var(--secondary); }
    .icon-green { background: var(--success); }
    .icon-orange { background: var(--warning); }
    .icon-red { background: var(--danger); }
   
    /* Stats Card */
    .stats-card {
        background: var(--primary);
        border-radius: 16px;
        padding: 1.5rem;
        color: white;
        margin-top: 1.5rem;
    }
   
    .stats-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
   
    .stats-header i {
        font-size: 2rem;
    }
   
    .stats-label {
        font-size: 0.875rem;
        opacity: 0.9;
    }
   
    .stats-value {
        font-size: 2rem;
        font-weight: 700;
    }
   
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-top: 1rem;
    }
   
    .stats-item {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 0.875rem;
        backdrop-filter: blur(10px);
    }
   
    .stats-item-label {
        font-size: 0.75rem;
        opacity: 0.9;
    }
   
    .stats-item-value {
        font-size: 1.25rem;
        font-weight: 700;
    }
   
    /* Content Section */
    .content-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 2.5rem;
    }
   
    .section-heading {
        font-size: 2rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 3px solid var(--primary);
        display: inline-block;
    }
   
    .intro-text {
        background: var(--gray-50);
        border-left: 4px solid var(--primary);
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 2.5rem;
        color: var(--gray-700);
        font-size: 1.0625rem;
        line-height: 1.8;
    }

    /* Feature Cards */
    .features-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }

    .feature-card {
        background: white;
        border: 2px solid var(--gray-200);
        border-radius: 16px;
        padding: 2rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary);
        transform: scaleY(0);
        transition: transform 0.3s ease;
    }

    .feature-card:hover {
        border-color: var(--primary);
        box-shadow: 0 8px 24px rgba(91, 33, 182, 0.12);
        transform: translateY(-4px);
    }

    .feature-card:hover::before {
        transform: scaleY(1);
    }

    .feature-header {
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .feature-number {
        width: 56px;
        height: 56px;
        background: var(--primary);
        color: white;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 800;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(91, 33, 182, 0.2);
    }

    .feature-title-wrapper {
        flex: 1;
    }

    .feature-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.5rem;
    }

    .feature-icon-group {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .feature-mini-icon {
        width: 32px;
        height: 32px;
        background: var(--gray-100);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }

    .feature-card:hover .feature-mini-icon {
        background: #f3e8ff;
        transform: scale(1.1);
    }

    .feature-content {
        color: var(--gray-600);
        line-height: 1.8;
        font-size: 1rem;
    }

    .feature-content ul {
        list-style: none;
        margin-top: 1rem;
        padding-left: 0;
    }

    .feature-content ul li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 0.75rem;
        color: var(--gray-700);
    }

    .feature-content ul li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.5rem;
        width: 6px;
        height: 6px;
        background: var(--primary);
        border-radius: 50%;
    }

    /* Contact Section */
    .contact-section {
        background: var(--secondary);
        border-radius: 16px;
        padding: 2.5rem;
        margin-top: 3rem;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .contact-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 400px;
        height: 400px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50%;
    }

    .contact-content {
        position: relative;
        z-index: 1;
    }

    .contact-header {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .contact-icon {
        width: 64px;
        height: 64px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
    }

    .contact-title {
        font-size: 1.75rem;
        font-weight: 700;
    }

    .contact-text {
        font-size: 1.125rem;
        line-height: 1.8;
        opacity: 0.95;
        margin-bottom: 1.5rem;
    }

    .contact-email {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        background: white;
        color: var(--secondary);
        padding: 1rem 1.75rem;
        border-radius: 12px;
        font-weight: 600;
        font-size: 1.125rem;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .contact-email:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

    .contact-email i {
        font-size: 1.25rem;
    }
   
    /* Utility Classes */
    .text-center { text-align: center; }
    .mb-1 { margin-bottom: 0.25rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 0.75rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .mt-4 { margin-top: 1rem; }
    .mt-6 { margin-top: 1.5rem; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .gap-2 { gap: 0.5rem; }
    .gap-3 { gap: 0.75rem; }
    .gap-4 { gap: 1rem; }
</style>

<main class="font-inter">
    <!-- Hero Section -->
    <div class="hero-section">
        <div class="container">
            <div class="hero-content">
                <div class="flex items-center gap-4 mb-4">
                    <div class="hero-icon">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <div>
                        <div class="flex items-center gap-2 mb-3">
                            <span class="badge badge-purple">
                                <i class="fas fa-server"></i>
                                Publishing Platform
                            </span>
                            <span class="badge badge-blue">
                                <i class="fas fa-unlock-alt"></i>
                                Open Access
                            </span>
                            <span class="badge badge-green">
                                <i class="fas fa-check-circle"></i>
                                User-Friendly
                            </span>
                        </div>
                        <h1 class="hero-title font-poppins">
                            Open Journal System (OJS)
                        </h1>
                    </div>
                </div>
                <p class="hero-description">
                    Streamlining the publication process and enhancing research accessibility through our advanced Open Journal System.
                </p>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="container">
        <div class="main-layout">
            <!-- Left Sidebar -->
            <?php include 'include/sidebar.php'; ?>

            <!-- Right Content Area -->
            <section class="main-content">
                <div class="content-card">
                    <h2 class="section-heading font-poppins">Open Journal System (OJS)</h2>
                    
                    <div class="intro-text">
                        The RSIS utilizes the Open Journal System (OJS) to streamline the publication process and enhance the accessibility of research. Our commitment to open access ensures that all articles are freely available to readers worldwide, promoting the dissemination of knowledge and fostering scholarly communication.
                    </div>

                    <!-- Features Grid -->
                    <div class="features-grid">
                        <!-- Feature 1 -->
                        <div class="feature-card">
                            <div class="feature-header">
                                <div class="feature-number">1</div>
                                <div class="feature-title-wrapper">
                                    <h3 class="feature-title">User-Friendly Submission Process</h3>
                                    <div class="feature-icon-group">
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-upload"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-mouse-pointer"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-check"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="feature-content">
                                <p>Authors can easily submit manuscripts through our intuitive online platform. The OJS system guides authors through each step of the submission process, ensuring that all necessary information and documents are provided.</p>
                            </div>
                        </div>

                        <!-- Feature 2 -->
                        <div class="feature-card">
                            <div class="feature-header">
                                <div class="feature-number">2</div>
                                <div class="feature-title-wrapper">
                                    <h3 class="feature-title">Peer Review Management</h3>
                                    <div class="feature-icon-group">
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-user-check"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-tasks"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="feature-content">
                                <p>The OJS facilitates a robust peer review process, allowing editors to assign reviewers, manage feedback, and track the status of submissions efficiently. This system enhances the quality of published research by ensuring thorough evaluations.</p>
                            </div>
                        </div>

                        <!-- Feature 3 -->
                        <div class="feature-card">
                            <div class="feature-header">
                                <div class="feature-number">3</div>
                                <div class="feature-title-wrapper">
                                    <h3 class="feature-title">Article Tracking and Notifications</h3>
                                    <div class="feature-icon-group">
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-clock"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-bell"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-sync"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="feature-content">
                                <p>Authors and reviewers can track the status of submissions in real-time. The OJS sends automated notifications at key stages of the publication process, keeping all parties informed and engaged.</p>
                            </div>
                        </div>

                        <!-- Feature 4 -->
                        <div class="feature-card">
                            <div class="feature-header">
                                <div class="feature-number">4</div>
                                <div class="feature-title-wrapper">
                                    <h3 class="feature-title">Open Access Publishing</h3>
                                    <div class="feature-icon-group">
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-unlock-alt"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-globe"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-hand-holding-heart"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="feature-content">
                                <p>All articles published in IJRSI are available for free to all users, ensuring that research is accessible without financial barriers. This commitment to open access supports the global exchange of knowledge and encourages collaboration among researchers.</p>
                            </div>
                        </div>

                        <!-- Feature 5 -->
                        <div class="feature-card">
                            <div class="feature-header">
                                <div class="feature-number">5</div>
                                <div class="feature-title-wrapper">
                                    <h3 class="feature-title">Archiving and Indexing</h3>
                                    <div class="feature-icon-group">
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-archive"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-search"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-chart-line"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="feature-content">
                                <p>The OJS ensures that all published articles are securely archived and indexed, making them easily discoverable through search engines and academic databases. This increases the visibility of research and enhances its impact within the scholarly community.</p>
                            </div>
                        </div>

                        <!-- Feature 6 -->
                        <div class="feature-card">
                            <div class="feature-header">
                                <div class="feature-number">6</div>
                                <div class="feature-title-wrapper">
                                    <h3 class="feature-title">Support and Resources</h3>
                                    <div class="feature-icon-group">
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-life-ring"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-book-open"></i>
                                        </div>
                                        <div class="feature-mini-icon">
                                            <i class="fas fa-question-circle"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="feature-content">
                                <p>We provide comprehensive support for authors and reviewers, including guidelines for manuscript preparation, tips for successful submissions, and answers to common queries about the OJS platform.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Section -->
                    <div class="contact-section">
                        <div class="contact-content">
                            <div class="contact-header">
                                <div class="contact-icon">
                                    <i class="fas fa-headset"></i>
                                </div>
                                <h3 class="contact-title">Need Assistance?</h3>
                            </div>
                            <p class="contact-text">
                                At IJRSI, we are dedicated to promoting open access and providing a seamless experience for authors, reviewers, and readers. If you have any questions about our Open Journal System or need assistance, please don't hesitate to contact us.
                            </p>
                            <a href="mailto:editorialoffice@rsis-international.org" class="contact-email">
                                <i class="fas fa-envelope"></i>
                                <span>editorialoffice@rsis-international.org</span>
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</main>

<?php
include 'include/footer.php'; 
?>
