@extends('user.public.layout')

@section('title', 'PRO EARN | How It Works')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>

:root {
  --primary:#0052ff;
  --primary-gradient:linear-gradient(135deg,#001f60 0%,#0052ff 50%,#00a2ff 100%);
  --primary-light:rgba(0,82,255,.08);
  --text:#0a192f;
  --muted:#64748b;
  --border:#cbd5e1;
}


.public-screen{
    min-height:100vh;
    background:
    radial-gradient(circle at top right,rgba(0,82,255,.06),transparent 40%),
    radial-gradient(circle at bottom left,rgba(0,162,255,.06),transparent 40%),
    #f8fafc;

    padding:40px 16px;
}


.public-container{
    width:100%;
    max-width:900px;
    margin:auto;
}


.public-card{

    background:#fff;

    border:1px solid rgba(0,82,255,.08);

    border-radius:24px;

    padding:35px 30px;

    box-shadow:
    0 15px 35px rgba(0,31,96,.06),
    0 1px 3px rgba(0,0,0,.02);

}


@media(max-width:600px){

.public-card{

padding:25px 20px;

}

}


.page-header{

text-align:center;

margin-bottom:35px;

}


.page-icon{

width:80px;
height:80px;

border-radius:22px;

background:var(--primary-gradient);

display:flex;

align-items:center;

justify-content:center;

margin:auto;

color:white;

font-size:32px;

box-shadow:0 12px 24px rgba(0,82,255,.25);

}


.page-header h1{

font-size:28px;

font-weight:800;

color:var(--text);

margin-top:20px;

}


.page-header p{

color:var(--muted);

font-weight:600;

}


.section-box{

background:#f8fafc;

border:1px solid var(--border);

border-radius:18px;

padding:22px;

margin-bottom:20px;

}


.section-box h2{

font-size:20px;

font-weight:800;

color:var(--text);

margin-bottom:12px;

}


.section-box p,
.section-box li{

color:var(--muted);

font-size:15px;

line-height:1.8;

font-weight:600;

}


.step{

display:flex;

gap:15px;

margin-bottom:15px;

}


.step-number{

min-width:38px;

height:38px;

background:var(--primary-gradient);

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

}


.footer-note{

text-align:center;

margin-top:25px;

font-size:13px;

color:#94a3b8;

font-weight:700;

}


</style>


<div class="public-screen">

<div class="public-container">

<div class="public-card">


<div class="page-header">

<div class="page-icon">

<i class="fa-solid fa-lightbulb"></i>

</div>


<h1>PRO EARN কিভাবে কাজ করে?</h1>

<p>
ডিজিটাল সার্ভিস, রিসেলিং এবং অনলাইন সুবিধা ব্যবহারের সহজ পদ্ধতি
</p>


</div>



<div class="section-box">

<h2>
PRO EARN সম্পর্কে
</h2>


<p>

PRO EARN একটি ডিজিটাল সার্ভিস প্ল্যাটফর্ম যেখানে ব্যবহারকারীরা বিভিন্ন অনলাইন সুবিধা, রিসেলিং সেবা এবং ডিজিটাল কার্যক্রম ব্যবহার করতে পারেন।

</p>


</div>




<div class="section-box">


<h2>
কাজ করার ধাপসমূহ
</h2>



<div class="step">

<div class="step-number">
1
</div>

<p>
প্রথমে PRO EARN এ একটি অ্যাকাউন্ট তৈরি করুন।
</p>

</div>



<div class="step">

<div class="step-number">
2
</div>

<p>
আপনার প্রয়োজন অনুযায়ী উপলব্ধ ডিজিটাল সার্ভিস নির্বাচন করুন।
</p>

</div>



<div class="step">

<div class="step-number">
3
</div>

<p>
রিসেলিং বা অন্যান্য অনুমোদিত কার্যক্রমের মাধ্যমে প্ল্যাটফর্ম ব্যবহার করুন।
</p>

</div>



<div class="step">

<div class="step-number">
4
</div>

<p>
আপনার কার্যক্রম অনুযায়ী প্রযোজ্য কমিশন বা সুবিধা গ্রহণ করুন।
</p>

</div>



</div>





<div class="section-box">


<h2>
রিসেলিং সুবিধা
</h2>


<p>

ব্যবহারকারীরা PRO EARN এর নির্ধারিত পণ্য বা ডিজিটাল সার্ভিস প্রচার ও বিক্রয়ের মাধ্যমে অতিরিক্ত সুযোগ তৈরি করতে পারেন।

</p>


</div>




<div class="section-box">


<h2>
গুরুত্বপূর্ণ বিষয়
</h2>


<ul>

<li>
PRO EARN কোনো নিশ্চিত বা গ্যারান্টিযুক্ত আয়ের প্রতিশ্রুতি দেয় না।
</li>


<li>
ব্যবহারকারীর ফলাফল নির্ভর করে তার কাজ, দক্ষতা এবং ব্যবহারের উপর।
</li>


<li>
সব ধরনের কার্যক্রম নিয়ম ও নীতিমালা অনুসরণ করে পরিচালিত হয়।
</li>


</ul>


</div>



<div class="footer-note">

© {{date('Y')}} PRO EARN

</div>



</div>

</div>

</div>


@endsection