Added styles on how it works page

Raccoon254 · May 28, 2024 · 8e9a0ba · 8e9a0ba
1 parent 87acfbe
commit 8e9a0ba
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 7 deletions.
diff --git a/app/Http/Controllers/PagesController.php b/app/Http/Controllers/PagesController.php
@@ -20,7 +20,46 @@ public function contact(): View
 
     public function howItWorks(): View
     {
-        return view('static.how-it-works');
+        $steps = [
+            [
+                'icon' => 'fas fa-clipboard-list',
+                'color' => 'blue-500',
+                'title' => 'Kickstart Your Journey',
+                'description' => 'Begin your academic journey with us by filling out our secure order form. Provide us with detailed instructions, your deadline, and any additional requirements for your paper.',
+            ],
+            [
+                'icon' => 'fas fa-user-edit',
+                'color' => 'green-500',
+                'title' => 'Expert Matchmaking',
+                'description' => 'Our team of seasoned writers will review your order. We will assign the most qualified writer based on their expertise and subject area to ensure the best fit.',
+            ],
+            [
+                'icon' => 'fas fa-file-alt',
+                'color' => 'yellow-500',
+                'title' => 'Crafting Your Paper',
+                'description' => 'Your assigned writer will dive deep into research and craft a well-written, plagiarism-free paper tailored to your requirements. They will adhere strictly to your instructions and academic standards.',
+            ],
+            [
+                'icon' => 'fas fa-check-double',
+                'color' => 'red-500',
+                'title' => 'Quality Check',
+                'description' => 'Our rigorous quality assurance process ensures that your paper meets the highest standards before delivery. This includes meticulous proofreading, formatting, and compliance with your instructions.',
+            ],
+            [
+                'icon' => 'fas fa-download',
+                'color' => 'purple-500',
+                'title' => 'Delivery & Support',
+                'description' => 'Your completed paper will be delivered to you before the deadline. Our support team is available round the clock to assist you with any questions or concerns.',
+            ],
+            [
+                'icon' => 'fas fa-sync-alt',
+                'color' => 'orange-500',
+                'title' => 'Revisions On Demand',
+                'description' => 'We offer unlimited revisions to ensure your complete satisfaction with the final product. If you need any changes or adjustments, simply request a revision, and we will take care of it promptly.',
+            ],
+        ];
+
+        return view('static.how-it-works', ['steps' => $steps]);
     }
 
     public function services(): View

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -68,6 +68,10 @@ input:-webkit-autofill {
     @apply bg-blue-500 text-white px-4 py-2 rounded-md transition-all duration-300 ease-in-out hover:bg-blue-600;
 }
 
+.custom-btn-ghost{
+    @apply bg-blue-200 text-blue-600 px-4 py-2 rounded-md transition-all duration-300 ease-in-out hover:bg-blue-100;
+}
+
 .custom-danger-btn{
     @apply bg-red-500 text-white px-4 py-2 rounded-md transition-all duration-300 ease-in-out hover:bg-red-600;
 }
diff --git a/resources/views/static/how-it-works.blade.php b/resources/views/static/how-it-works.blade.php
@@ -9,20 +9,26 @@
             <p class="text-lg text-black/50">Follow these simple steps to get your academic writing needs covered.</p>
         </div>
 
-        <div class="flex flex-col md:flex-row md:items-center md:justify-center" data-aos="fade-up"
+        <div class="flex flex-col md:flex-row md:justify-center" data-aos="fade-up"
              data-aos-delay="200">
             <div class="md:w-1/2">
-                <ol class="space-y-16">
+                <ol class="space-y-14">
                     @foreach($steps as $step)
-                        <li data-aos="fade-up" data-aos-delay="300">
+                        <li class="ring-1 ring-gray-100 shadow-md p-3 rounded-2xl" data-aos="fade-up" data-aos-delay="100">
                             <div class="flex items-center">
                                 <div
-                                    class="flex items-center justify-center w-12 h-12 bg-{{ $step['color'] }}-100 text-{{ $step['color'] }}-500 rounded-full mr-4">
-                                    <i class="{{ $step['icon'] }}"></i>
+                                    class="flex items-center justify-center ring ring-inset ring-{{ $step['color'] }} w-12 h-12 bg-gray-100 text-{{ $step['color'] }}-500 rounded-full mr-4">
+                                    <i class="{{ $step['icon'] }} text-{{ $step['color'] }}"></i>
                                 </div>
                                 <h3 class="text-xl font-bold text-black/90">{{ $step['title'] }}</h3>
                             </div>
-                            <p class="text-black/50 ml-16">{{ $step['description'] }}</p>
+                            <div class="pl-16 space-y-4">
+                                <p class="text-black/50">{{ $step['description'] }}</p>
+                                <button class="custom-btn-ghost bg-gray-200 min-w-20">
+                                    Learn More
+                                    <i class="fas fa-arrow-right text-{{ $step['color'] }}-500"></i>
+                                </button>
+                            </div>
                         </li>
                     @endforeach
                 </ol>