@extends('master')



@section('header')


<style>


    .section-title {
      font-weight: 800;
      color: #0b0c39;
    }
    .desc-text {
      color: #555;
    }
    .stat-card {
      background: #fff;
      border: 1px solid #dee2e6;
      padding: 30px;
      text-align: center;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.03);
      transition: 0.3s ease;
    }
    .stat-number {
      font-size: 32px;
      font-weight: bold;
      color: #32c36c;
    }
    .support-card {
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: 10px;
      padding: 30px;
      text-align: center;
      transition: 0.3s ease;
    }
    .support-card:hover {
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }
    .support-card h5 {
      font-weight: 700;
      color: #0b0c39;
    }
    .support-card p {
      color: #555;
    }
    .support-btn {
      margin-top: 15px;
    }



    i.fas.fa-phone-alt {
    transform: none !important;
}






    .section-title {
      font-weight: 800;
      color: #0b0c39;
    }
    .desc-text {
      color: #555;
    }
    .feature-card {
      border: 1px solid #dce0e6;
      border-radius: 8px;
      padding: 25px;
      background-color: #fff;
      text-align: center;
      height: 100%;
      position: relative;
    }
    .feature-card::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 30px;
      border-top: 6px solid #32c36c;
      border-right: 6px solid #32c36c;
      border-top-right-radius: 8px;
    }
    .feature-card h6 {
      font-weight: 700;
      margin-top: 15px;
      color: #0b0c39;
    }
    .form-container {
      background: #fff;
      padding: 25px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
    }











.mt-10{margin-top:10px;}
    .section-title {
      text-align: center;
      margin-bottom: 30px;
    }

    .section-title h2 {
      font-weight: bold;
      color: #00003b;
    }

    .plugin-box {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
      padding: 10px;
      margin-bottom: 30px;
      position: relative;
      height: 420px;
      border-bottom: 4px solid #FB4646;
      transition: all 0.3s ease-in-out;
    }

    .plugin-box:hover {
      transform: translateY(-5px);
    }

    .plugin-box h5 {
      font-weight: bold;
      color: #09023d;
    }

    .plugin-box p {
      font-size: 14px;
      color: #555;
    }

    .plugin-icon {
      font-size: 32px;
      color: #22c55e;
      margin-bottom: 15px;
      display: block;
    }

    .plugin-number {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 50px;
      color: #f3f3f3;
      font-weight: bold;
    }

    .plugin-box>p{
        font-size: 16px;
    }

    .process-card {
      border: 1px solid #c6f4d3;
      border-radius: 10px;
      padding: 20px;
      position: relative;
      transition: box-shadow 0.3s;
    }

    .process-card:hover {
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }

    .process-icon {
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #ffffff;
      border: 1px solid #c6f4d3;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .process-icon img {
      width: 20px;
      height: 20px;
    }

    .process-card h5 {
      font-weight: 700;
      color: #0b002b;
    }

    .process-card p {
      color: #666;
      margin-top: 10px;
      font-size: 0.95rem;
    }
  </style>






@endsection






@section('content')






	<!-- Page Header End -->
<div class="main-wrapper">


<div
    style="background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
           url('{{ asset('frontend/img/bac.jpg') }}') no-repeat center center;
           background-size: cover;
           padding: 115px;"
    class="page-header">

		<div class="container">
			<div class="row align-items-center justify-content-center">
				<div class="col-lg-12">
					<!-- Page Header Box Start -->

						<h1 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;text-align: center;color: white;">  CUSTOMER PORTAL

</h1>

	<h5 class="wow fadeInUp mobilehide" style="color: white;text-align: center;">

<b>


With SconexSoft’s Customer Portal Product,</b> your business becomes more accessible, responsive, and customer-friendly for the customers. Offer transparency, convenience, and speed—everything your customers expect in the digital era.


    </h5>

					<!-- Page Header Box End -->
				</div>
			</div>
		</div>
	</div>
























<div class="container py-5">
  <div class="section-title">
    <h2> Benefits of Our Product Customer Portal</h2>
    <p>
Our Customer Portal is designed to enhance customer experience, improve communication, and simplify support processes. It serves as a secure and personalized digital gateway where your customers can access information, raise tickets, track requests, and interact with your business—anytime, anywhere.
</p>
  </div>

  <div class="row">
    <!-- Card 1 -->

    @php
 $portalFeatures = [
    [
        'icon' => '📊',
        'title' => 'Personalized Dashboard',
        'desc' => '
        The portal presents a personalized dashboard that shows relevant information—recent activity, open tickets, pending orders, important documents, and notifications—all in one place.',
        'number' => '01',
    ],
    [
        'icon' => '🕒',
        'title' => '24/7 Support Access',
        'desc' => 'Customers can log support tickets, track resolutions, and interact with support agents, and receive resolution updates—all within the portal.',
        'number' => '02',
    ],
    [
        'icon' => '🔐',
        'title' => 'Secure Document Management',
        'desc' => 'Our portal allows for safe cloud storage, access, and sharing of documents such as invoices, agreements, product manuals, and reports. With role-based access and audit trails, users can upload and retrieve documents with complete confidence in data security and version control.',
        'number' => '03',
    ],
    [
        'icon' => '📦',
        'title' => 'Order & Service Request Tracking',
        'desc' => 'Customers can easily monitor the status of their product orders, service requests, or subscriptions. From initial request to final delivery, all stages are transparently displayed, improving trust and reducing the need for manual status updates through calls or emails.',
        'number' => '04',
    ],
    [
        'icon' => '📚',
        'title' => 'Knowledge Base & Self-Help',
        'desc' => 'A robust knowledge base is integrated into the portal, offering articles, tutorials, FAQs, video guides, and troubleshooting content. This empowers customers to find answers quickly without contacting support, improving resolution times and reducing help desk workload.',
        'number' => '05',
    ],
    [
        'icon' => '🛡️',
        'title' => 'Role-Based Access & User Management',
        'desc' => 'Organizations can manage user access with precision. Assign specific roles (Admin, Manager, User) and permissions to ensure that team members only access what theyre authorized to see. This enhances security and enables structured internal usage of the portal.',
        'number' => '06',
    ],
    [
        'icon' => '🔔',
        'title' => 'Real-Time Alerts & Notifications',
        'desc' => 'Stay ahead of the curve with instant notifications via email, SMS, or in-app messages. Customers are promptly notified about ticket updates, document uploads, due payments, delivery changes, or service schedules, ensuring transparency and proactive engagement.',
        'number' => '07',
    ],
    [
        'icon' => '📈',
        'title' => 'Analytics & Reports',
        'desc' => 'The portal features built-in analytics that offer insights into customer behaviour, ticket volumes, service response times, and satisfaction levels. Businesses can also generate downloadable reports to support decision-making and performance tracking.',
        'number' => '08',
    ],
];


@endphp


    <!-- Card 2 -->

<style>
.service-details-list {
    background-color: #2e2e2e;
    color: #fff;
    padding: 18px 20px;
    border-radius: 8px;
    list-style: none; /* remove default bullets */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 15px;
    line-height: 1.6;
}

.service-details-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.service-details-list li::before {
    content: '•'; /* bullet symbol */
    color: #00d8ff; /* teal/light blue bullet */
    font-size: 18px;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 2px;
}

</style>


  @foreach ($portalFeatures as $service)
        <div class="col-md-6 col-lg-4  mt-10">
            <div class="plugin-box h-100 p-4 shadow-sm position-relative" style='height:auto !important;'>
                <span class="plugin-icon d-block mb-2" style="font-size: 30px;">{{ $service['icon'] }}</span>
                <h5 class="fw-bold">{{ $service['title'] }}</h5>
                <p class="mt-10">{{ $service['desc'] }}</p>



                <span class="plugin-number position-absolute top-0 end-0 p-2 text-muted" style="font-size: 18px;">{{ $service['number'] }}</span>
            </div>
        </div>
    @endforeach
</div>






    </div>




<section style="background-color: #03003d; padding:40px 0;">
  <div class="container">
    <div class="row align-items-center text-white">
      <!-- Left Column -->
      <div class="col-md-6 mb-4 mb-md-0">
        <h2 class="fw-bold text-white">Why Choose Us</h2>
        <p class="mt-3">

Our software development engineers are highly skilled, trained and educated. We strongly believe that recruiting top talent is the key to impeccable implementation of projects as well as customer satisfaction with the results.
        </p>
        <a href="{{ url('contactus') }}" class="btn btn-outline-light mt-3">Hire Us</a>
      </div>

      <!-- Right Column -->
      <div class="col-md-6" >
        <div class="" style=" background: radial-gradient(circle at top left, #C5172E 0%, #38040e 100%);padding: 16% 11% !important;border-radius: 3%;">
          <h4 class="fw-bold text-" style="font-size: 1.9em;color: white;">
            Why SconexSoft is the best suited for Customer Portal Product?</h4>
          <p class="mt-3 text-" style="font-size: 19px;">



Our mission is to empower businesses and individuals through innovative and reliable customer interaction solutions.




             </p>
          <a href="{{ url('contactus') }}" class="btn btn-dark mt-3">Set A Meeting</a>
        </div>
      </div>
    </div>
  </div>
</section>

</div>










<section class="py-5" style="background-color: #f5f7f9;">
  <div class="container" style="padding: 2% 4%;">
    <div class="row align-items-start g-4">
      <!-- Left: Text Section -->
      <div class="col-lg-5">
        <h6 class="text-danger mb-2"> CUSTOMER PORTAL </h6>
        <h3 class="fw-bold text-dark mb-3" style='font-size:22px;'>Customer Portal Services</h3>
        <p class="text-muted">

Our vision is to be a leading customer enhancement company that empowers businesses worldwide with innovative solutions, cutting-edge technologies, and exceptional customer experiences.
        </p>
      </div>

      <!-- Right: Cards Grid -->
      <div class="col-lg-7">
        <div class="row g-3">
          <!-- Card 1 -->
              <!-- Card 3 -->
        <div class="col-md-6">



     <div class="position-relative smalbox-wrapper"> <!-- NEW wrapper -->

    <!-- Floating Icon -->
    <div class="position-absolute top-0 start-0 translate-middle-y ms-3" style="margin-left: -22px; z-index: 999;">
      <div class="bg-white shadow rounded-3 p-2 d-flex align-items-center justify-content-center"
           style="width: 40px; height: 40px;">
        <img src="https://img.icons8.com/fluency-systems-regular/24/0e1133/module.png" alt="Icon">
      </div>
    </div>

    <!-- Main Card -->
    <div class="smalbox bg-white p-4 pt-5 rounded-3 shadow-sm h-100 smalbox-inner">
     <h6 class="fw-bold text-dark">Research  </h6>
      <p class="td mb-0">
Clearly outline the requirements and functionalities you need for your plugin.    </p>
    </div>

  </div>




</div>

          <!-- Card 2 -->

      <!-- Card 3 -->
        <div class="col-md-6">


              <div class="position-relative smalbox-wrapper"> <!-- NEW wrapper -->

    <!-- Floating Icon -->
    <div class="position-absolute top-0 start-0 translate-middle-y ms-3" style="margin-left: -22px; z-index: 999;">
      <div class="bg-white shadow rounded-3 p-2 d-flex align-items-center justify-content-center"
           style="width: 40px; height: 40px;">
        <img src="https://img.icons8.com/fluency-systems-regular/24/0e1133/module.png" alt="Icon">
      </div>
    </div>

    <!-- Main Card -->
    <div class="smalbox bg-white p-4 pt-5 rounded-3 shadow-sm h-100 smalbox-inner">
     <h6 class="fw-bold text-dark">Budget Considerations </h6>
      <p class="td mb-0">
We Keep in mind that the lowest cost may not always translate to the best quality.      </p>
    </div>

  </div>





</div>




        </div>

      </div>







      <!-- Card 3 -->
        <div class="col-md-3">




     <div class="position-relative smalbox-wrapper"> <!-- NEW wrapper -->

    <!-- Floating Icon -->
    <div class="position-absolute top-0 start-0 translate-middle-y ms-3" style="margin-left: -22px; z-index: 999;">
      <div class="bg-white shadow rounded-3 p-2 d-flex align-items-center justify-content-center"
           style="width: 40px; height: 40px;">
        <img src="https://img.icons8.com/fluency-systems-regular/24/0e1133/module.png" alt="Icon">
      </div>
    </div>

    <!-- Main Card -->
    <div class="smalbox bg-white p-4 pt-5 rounded-3 shadow-sm h-100 smalbox-inner">

    <h6 class="fw-bold text-dark">Project Management</h6>
      <p class="td mb-0"  style="font-size: 14px;margin-top: 6px;" >
We well-defined timeline and effective project management contribute to timely delivery.      </p>
    </div>

  </div>











</div>






      <!-- Card 3 -->
        <div class="col-md-3">

     <div class="position-relative smalbox-wrapper"> <!-- NEW wrapper -->

    <!-- Floating Icon -->
    <div class="position-absolute top-0 start-0 translate-middle-y ms-3" style="margin-left: -22px; z-index: 999;">
      <div class="bg-white shadow rounded-3 p-2 d-flex align-items-center justify-content-center"
           style="width: 40px; height: 40px;">
        <img src="https://img.icons8.com/fluency-systems-regular/24/0e1133/module.png" alt="Icon">
      </div>
    </div>

    <!-- Main Card -->
    <div class="smalbox bg-white p-4 pt-5 rounded-3 shadow-sm h-100 smalbox-inner">
<h6 class="fw-bold text-dark">Maintenance </h6>
    <p class="td mb-0"  style="font-size: 14px;margin-top: 6px;" >
We offer support for bug fixes, updates, and any issues that may arise after the plugin is deployed.
</p>
    </div>

  </div>











</div>



      <!-- Card 3 -->
        <div class="col-md-3">


     <div class="position-relative smalbox-wrapper"> <!-- NEW wrapper -->

    <!-- Floating Icon -->
    <div class="position-absolute top-0 start-0 translate-middle-y ms-3" style="margin-left: -22px; z-index: 999;">
      <div class="bg-white shadow rounded-3 p-2 d-flex align-items-center justify-content-center"
           style="width: 40px; height: 40px;">
        <img src="https://img.icons8.com/fluency-systems-regular/24/0e1133/module.png" alt="Icon">
      </div>
    </div>

    <!-- Main Card -->
    <div class="smalbox bg-white p-4 pt-5 rounded-3 shadow-sm h-100 smalbox-inner">
      <h6 class="fw-bold text-dark">Security Features </h6>
    <p class="td mb-0"  style="font-size: 14px;margin-top: 6px;" >
We offer after sale support for limited time and ensure 100% security of plugin.     </p>
    </div>

  </div>









</div>













      <!-- Card 3 -->
        <div class="col-md-3">





     <div class="position-relative smalbox-wrapper"> <!-- NEW wrapper -->

    <!-- Floating Icon -->
    <div class="position-absolute top-0 start-0 translate-middle-y ms-3" style="margin-left: -22px; z-index: 999;">
      <div class="bg-white shadow rounded-3 p-2 d-flex align-items-center justify-content-center"
           style="width: 40px; height: 40px;">
        <img src="https://img.icons8.com/fluency-systems-regular/24/0e1133/module.png" alt="Icon">
      </div>
    </div>

    <!-- Main Card -->
    <div class="smalbox bg-white p-4 pt-5 rounded-3 shadow-sm h-100 smalbox-inner">
        <h6 class="fw-bold text-dark">Documentation </h6>
    <p class="td mb-0"  style="font-size: 14px;margin-top: 6px;" >
We provide full documentations for the product, like how it developed and use.
      </p>
    </div>

  </div>




</div>







    </div>
  </div>
</section>

<!-- Optional Hover Effect CSS -->
<style>
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  }
</style>








<section class="expert_plugin pb-100 pt-100" style="padding: 4% 22px;">
        <div class="container-fluid desktop_padding">
            <div class="row g-5 align-items-center">
                <div class="col-md-6">
                    <div class="expert_plugin_thumbs">
                        <img src="{{ asset('frontend/img/customer-portal.svg') }}" alt="Frontend" class="mb-3  plugin-box scroll-animate floating-start">

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="section-header">
                        <p class="plugin_benifits_subheading wow fadeInUp inline-animation" style="color: #FB4646;font-weight: bold;">CUSTOMER PORTAL</p>
                        <h2 class="text wow fadeInUp inline-animation">Expert Customer Portal Solution</h2>

                        <p class="wow fadeInUp inline-animation" data-wow-duration="0.5s" data-wow-delay="0.5s" style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.5s; animation-name: fadeInUp;margin-top:11px;">



SconexSoft Customer Portal is more than just a support tool—it's a strategic asset to build trust, increase transparency, and foster long-term relationships. Whether you operate in retail, logistics, finance, or any service-based industry, SconexSoft ensures a smooth, digital-first customer experience.
<br>
<br>
SconexSoft company expert team built a Customer Portal product that bring beautiful web and app experience to life using a proven methodology and cutting-edge technology base to build customized responsive cross-browser, cross-platform. We follow a standardized layout across the site to keep it simple for users.






</p>
                    </div>
                </div>
            </div>
        </div>
    </section>





  <style>
    .team-section {
      background-color: #f8fafc;
    }
    .team-heading {
      font-weight: 800;
      color: #0b0c39;
    }
    .team-subtitle {
      color: #32c36c;
      font-weight: 600;
    }
    .team-paragraph {
      color: #555;
      font-size: 16px;
    }
    .team-box {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0,0,0,0.03);
      height: 100%;
      transition: all 0.3s;
    }
    .team-box h6 {
      font-weight: 700;
      color: #0b0c39;
      margin-bottom: 8px;
    }
    .team-image-grid img {
      width: 100%;
      border-radius: 6px;
      object-fit: cover;
    }
  </style>



@include('components.partners')



@include('components.appservices')






@include('components.servicecommon')






@endsection