PageSourceSearch

https://shsselect.com/

html shsselect.com collected 2026-10-02 04:10:37 UTC 114,294 bytes, 1,587 lines download raw bytes

1<!DOCTYPE html>
2<html class="h-full scroll-smooth" lang="en">
3  <head>
4    <title>SHS Select - Your Guide to Senior High School Selection | SHS Select</title><meta name="description" content="Make confident senior high school selections with SHS Select. Expert guidance for students, parents, and teachers to find the perfect school match in Ghana."><meta name="keywords" content="shs selection, school choice, ghana shs, senior high school, category a schools, category b schools, category c schools, education ghana"><meta property="og:site_name" content="SHS Select"><meta property="og:type" content="website"><meta property="og:url" content="https://shsselect.com/"><meta property="og:title" content="SHS Select - Your Trusted Guide to Senior High School Selection"><meta property="og:description" content="Make informed decisions about your Senior High School selection. Browse schools by category, region, or programme. Easy and guided selection process."><meta property="og:image" content="https://shsselect.com/assets/shs-select-featured-image-4efea778.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:type" content="image/png"><meta property="og:image:alt" content="SHS Select - Choose Your Perfect Senior High School"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@shsselect"><meta name="twitter:image" content="https://shsselect.com/assets/shs-select-featured-image-4efea778.png">
5    
6    <meta name="viewport" content="width=device-width,initial-scale=1">
7    <meta name="csrf-param" content="authenticity_token" />
8<meta name="csrf-token" content="ZzZnWdi1dmfhLtgmJrEgAZJbyxKVwtOPV-K2vPopyHUoLk7VuerbNlFByHW2B13oyroLaEkmWjc4pe2PYBAZUA" />
9    
10
11    <!-- Favicons -->
12    <link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-chrome-192x192.png">
13    <link rel="icon" type="image/png" sizes="512x512" href="/favicons/android-chrome-512x512.png">
14    <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png">
15    <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
16    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
17    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
18
19    <!-- Space Grotesk Font -->
20    <link rel="preconnect" href="https://fonts.googleapis.com">
21    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
23
24    <link rel="stylesheet" href="https://shsselect.com/assets/tailwind-65eeaa15.css" data-turbo-track="reload" />
25    <link rel="stylesheet" href="https://shsselect.com/assets/application-8b441ae0.css" data-turbo-track="reload" />
26    
26<script type="importmap" data-turbo-track="reload">{
27  "imports": {
28    "application": "https://shsselect.com/assets/application-bfcdf840.js",
29    "@hotwired/turbo-rails": "https://shsselect.com/assets/turbo.min-9fd88cd5.js",
30    "@hotwired/stimulus": "https://shsselect.com/assets/stimulus.min-4b1e420e.js",
31    "@hotwired/stimulus-loading": "https://shsselect.com/assets/stimulus-loading-1fc53fe7.js",
32    "flowbite": "https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.turbo.min.js",
33    "controllers/academic_profile_controller": "https://shsselect.com/assets/controllers/academic_profile_controller-9d71b892.js",
34    "controllers/admin_sidebar_controller": "https://shsselect.com/assets/controllers/admin_sidebar_controller-7f2ecc34.js",
35    "controllers/aggregate_calculator_controller": "https://shsselect.com/assets/controllers/aggregate_calculator_controller-6d388043.js",
36    "controllers/application": "https://shsselect.com/assets/controllers/application-3affb389.js",
37    "controllers/bulk_delete_controller": "https://shsselect.com/assets/controllers/bulk_delete_controller-236ecec6.js",
38    "controllers/celebration_controller": "https://shsselect.com/assets/controllers/celebration_controller-2ed1e44a.js",
39    "controllers/clipboard_controller": "https://shsselect.com/assets/controllers/clipboard_controller-a7497dce.js",
40    "controllers/collapse_controller": "https://shsselect.com/assets/controllers/collapse_controller-10b9063b.js",
41    "controllers/counter_controller": "https://shsselect.com/assets/controllers/counter_controller-86454f89.js",
42    "controllers/customer_map_controller": "https://shsselect.com/assets/controllers/customer_map_controller-a9bf16a9.js",
43    "controllers/dark_mode_controller": "https://shsselect.com/assets/controllers/dark_mode_controller-042f26a0.js",
44    "controllers/demo_registration_controller": "https://shsselect.com/assets/controllers/demo_registration_controller-1f521d6b.js",
45    "controllers/demo_selection_controller": "https://shsselect.com/assets/controllers/demo_selection_controller-81c774a0.js",
46    "controllers/directory_search_controller": "https://shsselect.com/assets/controllers/directory_search_controller-375a335c.js",
47    "controllers/edit_window_controller": "https://shsselect.com/assets/controllers/edit_window_controller-c8600e8b.js",
48    "controllers/exclusive_select_controller": "https://shsselect.com/assets/controllers/exclusive_select_controller-5141c617.js",
49    "controllers/gated_scroll_controller": "https://shsselect.com/assets/controllers/gated_scroll_controller-4133fe52.js",
50    "controllers/geolocation_controller": "https://shsselect.com/assets/controllers/geolocation_controller-55628242.js",
51    "controllers/hello_controller": "https://shsselect.com/assets/controllers/hello_controller-708796bd.js",
52    "controllers": "https://shsselect.com/assets/controllers/index-ee64e1f1.js",
53    "controllers/location_capture_controller": "https://shsselect.com/assets/controllers/location_capture_controller-94326169.js",
54    "controllers/map_controller": "https://shsselect.com/assets/controllers/map_controller-fcf888cb.js",
55    "controllers/mobile_menu_controller": "https://shsselect.com/assets/controllers/mobile_menu_controller-2c513f16.js",
56    "controllers/payment_controller": "https://shsselect.com/assets/controllers/payment_controller-f0fabf92.js",
57    "controllers/payment_status_checker_controller": "https://shsselect.com/assets/controllers/payment_status_checker_controller-929d8ebc.js",
58    "controllers/phone_format_controller": "https://shsselect.com/assets/controllers/phone_format_controller-0407895f.js",
59    "controllers/phone_verification_controller": "https://shsselect.com/assets/controllers/phone_verification_controller-a7563b03.js",
60    "controllers/radio_selector_controller": "https://shsselect.com/assets/controllers/radio_selector_controller-3c5e9fd9.js",
61    "controllers/region_district_controller": "https://shsselect.com/assets/controllers/region_district_controller-c33a0f41.js",
62    "controllers/registration_form_controller": "https://shsselect.com/assets/controllers/registration_form_controller-b24cd64a.js",
63    "controllers/school_search_controller": "https://shsselect.com/assets/controllers/school_search_controller-6173dbeb.js",
64    "controllers/scroll_into_view_controller": "https://shsselect.com/assets/controllers/scroll_into_view_controller-2038debb.js",
65    "controllers/selection_controller": "https://shsselect.com/assets/controllers/selection_controller-3b4b8c2d.js",
66    "controllers/suggestions_controller": "https://shsselect.com/assets/controllers/suggestions_controller-1ee9eb8c.js",
67    "controllers/wizard_controller": "https://shsselect.com/assets/controllers/wizard_controller-32a451f2.js",
68    "services/selection_api_service": "https://shsselect.com/assets/services/selection_api_service-34c87b37.js",
69    "utils/debounce": "https://shsselect.com/assets/utils/debounce-f2224a17.js",
70    "utils/dropdown_helper": "https://shsselect.com/assets/utils/dropdown_helper-bf2672bc.js"
71  }
72}</script>
72
73<link rel="modulepreload" href="https://shsselect.com/assets/application-bfcdf840.js">
74<link rel="modulepreload" href="https://shsselect.com/assets/turbo.min-9fd88cd5.js">
75<link rel="modulepreload" href="https://shsselect.com/assets/stimulus.min-4b1e420e.js">
76<link rel="modulepreload" href="https://shsselect.com/assets/stimulus-loading-1fc53fe7.js">
77<link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.turbo.min.js">
78<link rel="modulepreload" href="https://shsselect.com/assets/controllers/academic_profile_controller-9d71b892.js">
79<link rel="modulepreload" href="https://shsselect.com/assets/controllers/admin_sidebar_controller-7f2ecc34.js">
80<link rel="modulepreload" href="https://shsselect.com/assets/controllers/aggregate_calculator_controller-6d388043.js">
81<link rel="modulepreload" href="https://shsselect.com/assets/controllers/application-3affb389.js">
82<link rel="modulepreload" href="https://shsselect.com/assets/controllers/bulk_delete_controller-236ecec6.js">
83<link rel="modulepreload" href="https://shsselect.com/assets/controllers/celebration_controller-2ed1e44a.js">
84<link rel="modulepreload" href="https://shsselect.com/assets/controllers/clipboard_controller-a7497dce.js">
85<link rel="modulepreload" href="https://shsselect.com/assets/controllers/collapse_controller-10b9063b.js">
86<link rel="modulepreload" href="https://shsselect.com/assets/controllers/counter_controller-86454f89.js">
87<link rel="modulepreload" href="https://shsselect.com/assets/controllers/customer_map_controller-a9bf16a9.js">
88<link rel="modulepreload" href="https://shsselect.com/assets/controllers/dark_mode_controller-042f26a0.js">
89<link rel="modulepreload" href="https://shsselect.com/assets/controllers/demo_registration_controller-1f521d6b.js">
90<link rel="modulepreload" href="https://shsselect.com/assets/controllers/demo_selection_controller-81c774a0.js">
91<link rel="modulepreload" href="https://shsselect.com/assets/controllers/directory_search_controller-375a335c.js">
92<link rel="modulepreload" href="https://shsselect.com/assets/controllers/edit_window_controller-c8600e8b.js">
93<link rel="modulepreload" href="https://shsselect.com/assets/controllers/exclusive_select_controller-5141c617.js">
94<link rel="modulepreload" href="https://shsselect.com/assets/controllers/gated_scroll_controller-4133fe52.js">
95<link rel="modulepreload" href="https://shsselect.com/assets/controllers/geolocation_controller-55628242.js">
96<link rel="modulepreload" href="https://shsselect.com/assets/controllers/hello_controller-708796bd.js">
97<link rel="modulepreload" href="https://shsselect.com/assets/controllers/index-ee64e1f1.js">
98<link rel="modulepreload" href="https://shsselect.com/assets/controllers/location_capture_controller-94326169.js">
99<link rel="modulepreload" href="https://shsselect.com/assets/controllers/map_controller-fcf888cb.js">
100<link rel="modulepreload" href="https://shsselect.com/assets/controllers/mobile_menu_controller-2c513f16.js">
101<link rel="modulepreload" href="https://shsselect.com/assets/controllers/payment_controller-f0fabf92.js">
102<link rel="modulepreload" href="https://shsselect.com/assets/controllers/payment_status_checker_controller-929d8ebc.js">
103<link rel="modulepreload" href="https://shsselect.com/assets/controllers/phone_format_controller-0407895f.js">
104<link rel="modulepreload" href="https://shsselect.com/assets/controllers/phone_verification_controller-a7563b03.js">
105<link rel="modulepreload" href="https://shsselect.com/assets/controllers/radio_selector_controller-3c5e9fd9.js">
106<link rel="modulepreload" href="https://shsselect.com/assets/controllers/region_district_controller-c33a0f41.js">
107<link rel="modulepreload" href="https://shsselect.com/assets/controllers/registration_form_controller-b24cd64a.js">
108<link rel="modulepreload" href="https://shsselect.com/assets/controllers/school_search_controller-6173dbeb.js">
109<link rel="modulepreload" href="https://shsselect.com/assets/controllers/scroll_into_view_controller-2038debb.js">
110<link rel="modulepreload" href="https://shsselect.com/assets/controllers/selection_controller-3b4b8c2d.js">
111<link rel="modulepreload" href="https://shsselect.com/assets/controllers/suggestions_controller-1ee9eb8c.js">
112<link rel="modulepreload" href="https://shsselect.com/assets/controllers/wizard_controller-32a451f2.js">
113<link rel="modulepreload" href="https://shsselect.com/assets/services/selection_api_service-34c87b37.js">
114<link rel="modulepreload" href="https://shsselect.com/assets/utils/debounce-f2224a17.js">
115<link rel="modulepreload" href="https://shsselect.com/assets/utils/dropdown_helper-bf2672bc.js">
116<script type="module">import "application"</script>
116
117    
118    <style>
119      body {
120        font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
121        line-height: 1.5;
122        /* color: #1a202c; */ /* Removed to allow Tailwind dark mode text color */
123      }
124      
125      h1, h2, h3, h4, h5, h6 {
126        line-height: 1.25;
127        letter-spacing: -0.025em;
128      }
129    </style>
130    
131    
132
133    <!-- Yandex.Metrika counter -->
134    
134<script type="text/javascript" >
vendor: 430 bytes, lines 134-141
134
135       (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
136       m[i].l=1*new Date();
137       for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
138       k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
139       (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
140
141       ym(
141101903273
vendor: 147 bytes, lines 141-147
141, "init", {
142            clickmap:true,
143            trackLinks:true,
144            accurateTrackBounce:true,
145            webvisor:true
146       });
147    
147</script>
147
148    <noscript><div><img src="https://mc.yandex.ru/watch/101903273" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
149    <!-- /Yandex.Metrika counter -->
150
151    <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 151-152
151
152    <script async src="https://www.googletagmanager.com/gtag/js?id=
152G-NDGQGB6XQ1
vendor: 16 bytes, lines 152-153
152"></script>
153    
153<script>
154      
vendor: 150 bytes, lines 154-158
154window.dataLayer = window.dataLayer || [];
155      function gtag(){dataLayer.push(arguments);}
156      gtag('js', new Date());
157    
158      gtag('config', '
158G-NDGQGB6XQ1
vendor: 8 bytes, lines 158-159
158');
159    
159</script>
159
160    <!-- /Google tag (gtag.js) -->
161
162    <!-- Google Ads Conversion Tracking -->
vendor: 68 bytes, lines 162-163
162
163    <script async src="https://www.googletagmanager.com/gtag/js?id=
163AW-16862969153
vendor: 16 bytes, lines 163-164
163"></script>
164    
164<script>
165      
vendor: 146 bytes, lines 165-169
165window.dataLayer = window.dataLayer || [];
166      function gtag(){dataLayer.push(arguments);}
167      gtag('js', new Date());
168
169      gtag('config', '
169AW-16862969153
vendor: 8 bytes, lines 169-170
169');
170    
170</script>
170
171    <!-- /Google Ads Conversion Tracking -->
172  </head>
173
174  <body class="h-full font-sans antialiased bg-background text-gray-800 dark:bg-background-dark dark:text-slate-200">
175        <div id="customNoticeBanner" class="bg-gradient-to-r from-indigo-700 via-purple-700 to-indigo-800 text-white shadow-md transition-all duration-300 relative z-40 border-b border-indigo-600/40">
176    <div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between text-sm font-medium px-4 py-3 sm:py-2.5 gap-3">
177      
178      <!-- Message and Link -->
179      <div class="flex-grow flex flex-col sm:flex-row items-center justify-center sm:justify-start gap-2.5 min-w-0 text-center sm:text-left">
180        <!-- Glowing Info Indicator -->
181        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-white/20 text-white flex-shrink-0 animate-pulse">
182          <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
183            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
184          </svg>
185        </span>
186        <span class="tracking-wide leading-relaxed">
187          SHSselect is not affiliated with GES or any Government Institution. We help you to make your selections according to the guidelines for selection.
188        </span>
189      </div>
190
191      <!-- Action Button Area -->
192      <div class="flex items-center justify-center gap-3.5 flex-shrink-0 w-full sm:w-auto">
193      </div>
194
195    </div>
196  </div>
197
198      
199    <div class="min-h-screen flex flex-col bg-linear-to-br from-surface via-surface to-surface-secondary dark:from-transparent dark:via-transparent dark:to-transparent">
200      <!-- Header with dynamic background -->
201
202<header class="bg-linear-to-r from-primary-700 via-primary-600 to-primary-700 dark:bg-linear-to-r dark:from-slate-800 dark:via-slate-800 dark:to-slate-900 shadow-md relative overflow-visible z-30" data-controller="mobile-menu dark-mode">
203  <!-- Animated gradient overlay -->
204  <div class="absolute inset-0 bg-linear-to-r from-primary-700/30 via-primary-600/30 to-primary-700/30 animate-gradient-x dark:hidden"></div>
205  
206  <div class="relative bg-linear-to-b from-white/10 to-transparent dark:from-white/5 dark:to-transparent backdrop-blur-sm">
207    <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
208      <div class="flex justify-between h-16 md:h-20">
209        <!-- Logo -->
210        <a class="flex items-center group" href="/">
211          <div class="bg-white/20 dark:bg-slate-700/40 p-2 rounded-lg backdrop-blur-sm transform transition duration-200 group-hover:bg-white/30 dark:group-hover:bg-slate-600/50">
212            <img class="h-8 w-auto dark:invert" alt="SHS Select Logo" src="https://shsselect.com/assets/shs-select-logo-47e4132e.png" />
213          </div>
214</a>
215        <!-- Desktop Navigation Links -->
216        <div class="hidden sm:flex sm:items-center sm:space-x-3">
217
218          <a class="border-transparent text-white dark:text-slate-200 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-slate-700/40
219                inline-flex items-center px-4 py-2 text-sm font-medium transition duration-200 rounded-lg" href="/bece-school-selection-2026">2026 Selection Guide</a>
220
221          <a class="border-transparent text-white dark:text-slate-200 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-slate-700/40
222                inline-flex items-center px-4 py-2 text-sm font-medium transition duration-200 rounded-lg" href="/selections/search">Already Paid?</a>
223
224          <div class="relative group">
225            <button type="button"
226                    class="border-transparent text-white dark:text-slate-200 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-slate-700/40 inline-flex items-center px-4 py-2 text-sm font-medium transition duration-200 rounded-lg"
227                    aria-haspopup="true">
228              <span>Schools</span>
229              <svg class="ml-2 h-4 w-4 transition-transform duration-200 group-hover:rotate-180 group-focus-within:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
230                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
231              </svg>
232            </button>
233
234            <div class="invisible absolute right-0 top-full z-50 mt-2 w-56 rounded-lg border border-white/20 bg-white py-2 opacity-0 shadow-xl ring-1 ring-black/5 transition-all duration-150 group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100 dark:border-slate-700 dark:bg-slate-800">
235              <a class="block px-4 py-2 text-sm font-medium text-gray-700 hover:bg-primary-50 hover:text-primary-700 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white" href="/schools">All Schools</a>
236              <a class="block px-4 py-2 text-sm font-medium text-gray-700 hover:bg-primary-50 hover:text-primary-700 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white" href="/directory">School Directory</a>
237              <a class="block px-4 py-2 text-sm font-medium text-gray-700 hover:bg-primary-50 hover:text-primary-700 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white" href="/programmes">Programmes</a>
238              <a class="block px-4 py-2 text-sm font-medium text-gray-700 hover:bg-primary-50 hover:text-primary-700 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white" href="/map">Map of SHS</a>
239              <a class="block px-4 py-2 text-sm font-medium text-gray-700 hover:bg-primary-50 hover:text-primary-700 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white" href="/rankings">2026 Best SHS Ranking</a>
240              <a class="block px-4 py-2 text-sm font-medium text-gray-700 hover:bg-primary-50 hover:text-primary-700 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-white" href="/rankings/technical-institutes">2026 Best TVET Ranking</a>
241            </div>
242          </div>
243          
244          <a class="border-transparent text-white dark:text-slate-200 hover:text-white dark:hover:text-white hover:bg-white/10 dark:hover:bg-slate-700/40 
245                inline-flex items-center px-4 py-2 text-sm font-medium transition duration-200 rounded-lg" href="/how-it-works">How It Works</a>
246
247          <!-- Dark Mode Toggle (Desktop) -->
248          <div class="ml-2">
249            <button data-action="dark-mode#toggle" title="Toggle dark mode" class="p-2 rounded-lg text-white dark:text-slate-300 hover:bg-white/20 dark:hover:bg-slate-700/50 transition duration-200">
250              <svg data-dark-mode-target="iconSun" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
250<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m8.66-15.66l-.707.707M4.04 19.96l-.707.707M21 12h-1M4 12H3m15.66 8.66l-.707-.707M4.747 4.747l-.707-.707M12 5.5A6.5 6.5 0 1012 18.5 6.5 6.5 0 0012 5.5z"></path></svg>
251              <svg data-dark-mode-target="iconMoon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
252            </button>
253          </div>
254        </div>
255
256        <!-- Mobile menu button and Dark mode toggle for mobile -->
257        <div class="flex items-center sm:hidden">
258          <!-- Dark Mode Toggle (Mobile Text) -->
259          <button data-action="dark-mode#toggle" 
260                  class="p-2 mr-2 rounded-lg text-xs text-white dark:text-slate-300 hover:bg-white/20 dark:hover:bg-slate-700/50 transition duration-200">
261            <span data-dark-mode-target="toggleText"></span>
262          </button>
263
264          <button type="button" 
265                  class="inline-flex items-center justify-center p-2 rounded-lg text-white dark:text-slate-200 hover:text-white dark:hover:text-white hover:bg-white/20 dark:hover:bg-slate-700/50 transition duration-200 focus:outline-none focus:ring-2 focus:ring-white/60 dark:focus:ring-slate-500/60"
266                  data-action="mobile-menu#toggleMenu"
267                  aria-controls="mobile-menu" 
268                  aria-expanded="false">
269            <span class="sr-only">Open main menu</span>
270            <!-- Animated hamburger icon -->
271            <div class="relative w-6 h-6">
272              <span data-mobile-menu-target="menuIcon" class="absolute inset-0 transform transition-transform duration-300 flex items-center justify-center">
273                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
274                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
275                </svg>
276              </span>
277              <span data-mobile-menu-target="closeIcon" class="absolute inset-0 transform transition-transform duration-300 rotate-180 opacity-0 flex items-center justify-center">
278                <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
279                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
280                </svg>
281              </span>
282            </div>
283          </button>
284        </div>
285      </div>
286
287      <!-- Mobile menu with slide and fade animation -->
288      <div class="sm:hidden hidden transform transition-all duration-300 ease-in-out opacity-0 -translate-y-2" 
289           data-mobile-menu-target="menu"
290           data-transition-enter="transition ease-out duration-200"
291           data-transition-enter-start="opacity-0 -translate-y-2"
292           data-transition-enter-end="opacity-100 translate-y-0"
293           data-transition-leave="transition ease-in duration-150"
294           data-transition-leave-start="opacity-100 translate-y-0"
295           data-transition-leave-end="opacity-0 -translate-y-2">
296        <div class="pt-2 pb-3 space-y-1 bg-white/10 dark:bg-slate-700/50 backdrop-blur-md rounded-lg mt-2 mb-2">
297
298          <a class="text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white 
299                block px-4 py-3 text-base font-medium transition duration-200 first:rounded-t-lg last:rounded-b-lg" href="/bece-school-selection-2026">2026 Selection Guide</a>
300
301          <a class="text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white 
302                block px-4 py-3 text-base font-medium transition duration-200 first:rounded-t-lg last:rounded-b-lg" href="/choose-shs-schools-2026">Choose SHS Schools</a>
303
304          <a class="text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white
305                block px-4 py-3 text-base font-medium transition duration-200 first:rounded-t-lg last:rounded-b-lg" href="/school-placement-2026">School Placement 2026</a>
306
307          <a class="text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white
308                block px-4 py-3 text-base font-medium transition duration-200 first:rounded-t-lg last:rounded-b-lg" href="/bece-aggregate-calculator">BECE Aggregate Calculator</a>
309
310          <div class="px-4 pt-4 pb-1 text-xs font-semibold uppercase tracking-wide text-white/60 dark:text-slate-400">Explore Schools</div>
311
312          <a class="block px-4 py-3 text-base font-medium text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white transition duration-200" href="/schools">All Schools</a>
313          <a class="block px-4 py-3 text-base font-medium text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white transition duration-200" href="/programmes">Programmes</a>
314          <a class="block px-4 py-3 text-base font-medium text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white transition duration-200" href="/directory">Directory</a>
315          <a class="block px-4 py-3 text-base font-medium text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white transition duration-200" href="/map">Map of SHS</a>
316          <a class="block px-4 py-3 text-base font-medium text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white transition duration-200" href="/rankings">2026 Best SHS Ranking</a>
317          <a class="block px-4 py-3 text-base font-medium text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white transition duration-200" href="/rankings/technical-institutes">2026 Best TVET Ranking</a>
318
319          <div class="px-4 pt-4 pb-1 text-xs font-semibold uppercase tracking-wide text-white/60 dark:text-slate-400">My Selection</div>
320
321          <a class="text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white 
322                block px-4 py-3 text-base font-medium transition duration-200 first:rounded-t-lg last:rounded-b-lg" href="/selections/search">Already Paid? Find My Selection</a>
323
324          <a class="text-white dark:text-slate-200 hover:bg-white/15 dark:hover:bg-slate-600/50 hover:text-white dark:hover:text-white 
325                block px-4 py-3 text-base font-medium transition duration-200 first:rounded-t-lg last:rounded-b-lg" href="/how-it-works">How It Works</a>
326
327          <!-- Dark Mode Toggle (Mobile - inside menu, if preferred over outside) -->
328        </div>
329      </div>
330    </nav>
331  </div>
332</header> 
333
334      
335      <!-- Secondary Menu - render conditionally for relevant pages -->
336      
337      <main class="flex-grow">
338        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
339          <div id="flash" class="mb-3 sm:mb-4">
340            
341 
342          </div>
343          <div class="bg-surface dark:bg-slate-800 rounded-lg shadow-sm border dark:border-slate-700">
344            
345<style>
346  html {
347    scroll-behavior: smooth;
348  }
349</style>
350
351<div class="flex flex-col py-2 sm:px-6 lg:px-8 bg-linear-to-b from-white to-gray-50 dark:bg-linear-to-b dark:from-slate-900 dark:to-slate-800">
352  <div class="mt-4 sm:mx-auto sm:w-full sm:max-w-lg">
353    <h1 class="text-4xl md:text-5xl font-bold text-center text-slate-700 dark:text-slate-100 mb-4">Accurate, Grade-Based SHS Selection for 2026 BECE Students</h1>
354    <div class="space-y-4 text-center mb-6">
355      <p class="text-lg text-gray-600 dark:text-gray-300 max-w-md mx-auto">
356        We help you choose your 
357        <span class="relative inline-block">
358          <span class="absolute inset-0 bg-linear-to-r from-yellow-100 via-yellow-200 to-yellow-100 dark:from-yellow-700/50 dark:via-yellow-600/50 dark:to-yellow-700/50 rounded-lg transform -skew-x-6"></span>
359          <span class="relative text-yellow-600 dark:text-yellow-400 font-bold after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-[3px] after:w-full after:bg-yellow-500 dark:after:bg-yellow-500">1st Choice</span>
360        </span> 
361        and other schools in the correct order to 
362        <span class="relative inline-block">
363          <span class="absolute inset-0 bg-linear-to-r from-blue-50 via-indigo-100 to-purple-50 dark:from-blue-900/30 dark:via-indigo-800/30 dark:to-purple-900/30 rounded-lg"></span>
364          <span class="relative text-indigo-700 dark:text-indigo-300 font-bold after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-[3px] after:w-full after:bg-indigo-500 dark:after:bg-indigo-500">meet GES requirements</span>
365        </span>
366      </p>
367      <a class="inline-flex items-center justify-center text-sm font-semibold text-primary-700 hover:text-primary-800 hover:underline dark:text-primary-300 dark:hover:text-primary-200" href="/bece-school-selection-2026">Read the 2026 BECE school selection guide</a>
368      <div class="flex flex-col items-center">
369        <span class="text-primary-600 dark:text-primary-400 font-medium">Prepare your school list now</span>
370        <svg class="w-6 h-6 text-primary-600 dark:text-primary-400 mt-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
371          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
372        </svg>
373      </div>
374    </div>
375  </div>
376
377  <div class="mt-1 sm:mx-auto sm:w-full sm:max-w-md">
378    <div id="registration-form" class="bg-surface dark:bg-slate-800 py-4 px-4 shadow-lg hover:shadow-xl transition-shadow duration-300 sm:rounded-lg sm:px-10 border border-surface-accent dark:border-slate-700 relative">
379      <p class="mb-4 text-center text-sm leading-6 text-gray-600 dark:text-slate-300">
380        Enter your details. We will help you choose schools that match GES/CSSPS requirements, your preferred programme, location, and boarding/day preference.
381      </p>
382      <form class="space-y-4" data-controller="registration-form" data-action="turbo:submit-end-&gt;registration-form#handleSubmit" action="/customers" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="ROna-4uzrqfNCp2OfKftQU3P9ggcZSs07rwxdTuhieQ2UmuTkbtGSJBEFNDVwLOJwpOjY7ucKKNvwGDvyJD7_A" autocomplete="off" />
383        
384        <!-- Server-side Errors -->
385
386        <!-- Your Phone Number Field -->
387        <div data-controller="phone-format">
388          <label class="block text-sm font-medium text-slate-700 dark:text-slate-300" for="customer_phone_number">Your Phone Number</label>
389          <div class="mt-1 relative rounded-md shadow-sm">
390            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
391              <span class="text-gray-500 dark:text-gray-400 sm:text-sm">GH</span>
392            </div>
393            <input class="block w-full pl-12 pr-12 sm:text-sm border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200 rounded-md focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400" placeholder="02XXXXXXXX" maxlength="10" data-registration-form-target="phone" data-action="input-&gt;registration-form#phoneChanged input-&gt;phone-format#format keydown-&gt;phone-format#keydown" data-phone-format-target="input" size="10" type="tel" name="customer[phone_number]" id="customer_phone_number" />
394          </div>
395          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">We'll send your personalized school recommendations here</p>
396        </div>
397
398        <!-- Guardian Phone Number Field -->
399        <div data-controller="phone-format">
400          <label class="block text-sm font-medium text-slate-700 dark:text-slate-300" for="customer_guardian_phone_number">Parent/Guardian&#39;s Phone Number</label>
401          <div class="mt-1 relative rounded-md shadow-sm">
402            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
403              <span class="text-gray-500 dark:text-gray-400 sm:text-sm">GH</span>
404            </div>
405            <input class="block w-full pl-12 pr-12 sm:text-sm border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200 rounded-md focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-400 dark:focus:border-primary-400" placeholder="02XXXXXXXX" maxlength="10" data-registration-form-target="guardianPhone" data-action="input-&gt;registration-form#guardianPhoneChanged input-&gt;phone-format#format keydown-&gt;phone-format#keydown" data-phone-format-target="input" size="10" type="tel" name="customer[guardian_phone_number]" id="customer_guardian_phone_number" />
406          </div>
407          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Keep your parent/guardian informed about your school selection</p>
408        </div>
409
410        <!-- Gender Selection -->
411        <div>
412          <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2" for="customer_gender">Select Your Gender</label>
413          <div class="grid grid-cols-2 gap-4">
414            <div>
415              <label class="relative block cursor-pointer">
416                <input class="peer sr-only" data-registration-form-target="gender" data-action="change-&gt;registration-form#genderChanged" type="radio" value="male" name="customer[gender]" id="customer_gender_male" />
417                <div class="p-4 border dark:border-slate-600 rounded-lg hover:bg-surface-secondary dark:hover:bg-slate-700/60 transition-all duration-200 peer-checked:border-primary-500 dark:peer-checked:border-primary-400 peer-checked:bg-primary-50 dark:peer-checked:bg-primary-900/30">
418                  <div class="flex items-center justify-center space-x-2">
419                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-500 peer-checked:text-primary-500 dark:peer-checked:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
420                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
421                    </svg>
422                    <span class="text-sm font-medium text-slate-700 dark:text-slate-300 peer-checked:text-primary-600 dark:peer-checked:text-primary-300">Male</span>
423                  </div>
424                </div>
425              </label>
426            </div>
427            <div>
428              <label class="relative block cursor-pointer">
429                <input class="peer sr-only" data-registration-form-target="gender" data-action="change-&gt;registration-form#genderChanged" type="radio" value="female" name="customer[gender]" id="customer_gender_female" />
430                <div class="p-4 border dark:border-slate-600 rounded-lg hover:bg-surface-secondary dark:hover:bg-slate-700/60 transition-all duration-200 peer-checked:border-primary-500 dark:peer-checked:border-primary-400 peer-checked:bg-primary-50 dark:peer-checked:bg-primary-900/30">
431                  <div class="flex items-center justify-center space-x-2">
432                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-500 peer-checked:text-primary-500 dark:peer-checked:text-primary-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
433                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
434                    </svg>
435                    <span class="text-sm font-medium text-slate-700 dark:text-slate-300 peer-checked:text-primary-600 dark:peer-checked:text-primary-300">Female</span>
436                  </div>
437                </div>
438              </label>
439            </div>
440          </div>
441          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">We use this to show only schools you can apply to, since some schools admit only boys or only girls</p>
442        </div>
443
444        <!-- Submit Button -->
445        <div class="relative">
446          <button name="button" type="submit" class="w-full flex justify-center items-center py-3 px-4 border border-transparent roun
446ded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-slate-800 dark:focus:ring-primary-400 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed group" data-registration-form-target="submit">
447            <span>Start My 2026 School Selection</span>
448            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 group-hover:translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
449              <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
450            </svg>
451</button>        </div>
452            
453        <p class="text-xs text-center text-gray-500 dark:text-gray-400 mt-3">
454          By continuing, you agree to our 
455          <a class="underline hover:text-primary-600 dark:hover:text-primary-400 transition-colors" target="_blank" href="/terms-of-service">Terms of Service</a> and 
456          <a class="underline hover:text-primary-600 dark:hover:text-primary-400 transition-colors" target="_blank" href="/privacy-policy">Privacy Policy</a>.
457        </p>
458</form>
459        <div class="mt-6">
460          <div class="relative" aria-hidden="true">
461            <div class="absolute inset-0 flex items-center">
462              <div class="w-full border-t border-gray-200 dark:border-slate-600"></div>
463            </div>
464            <div class="relative flex justify-center text-sm">
465              <span class="bg-surface dark:bg-slate-800 px-3 text-gray-500 dark:text-gray-400">Been here before?</span>
466            </div>
467          </div>
468          <a class="mt-4 w-full flex justify-center items-center py-3 px-4 rounded-md border border-primary-300 dark:border-primary-500/60 bg-primary-50 dark:bg-primary-900/30 text-sm font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary-100 dark:hover:bg-primary-900/50 transition-colors duration-200" href="/selections/search">
469            Already paid? Find your selection
470            <svg class="ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
471              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
472            </svg>
473</a>      </div>
474    </div>
475
476    <!-- Floating Error Messages (Mobile) -->
477    <div data-registration-form-target="error" 
478         class="fixed bottom-0 left-0 right-0 p-4 bg-red-500 text-white dark:bg-red-700 dark:text-red-100 transform transition-transform duration-200 ease-in-out translate-y-full sm:hidden">
479    </div>
480  </div>
481
482  <!-- Social Proof and Urgency Section -->
483  <div class="mt-6 sm:mx-auto sm:w-full sm:max-w-lg">
484    <div class="bg-linear-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border border-green-200 dark:border-green-700 rounded-lg p-4 mb-4">
485      <div class="flex items-center justify-between mb-3">
486        <div class="flex items-center space-x-2">
487          <div class="flex -space-x-1">
488            <div class="w-6 h-6 bg-linear-to-br from-blue-400 to-blue-600 rounded-full border-2 border-white dark:border-slate-800 flex items-center justify-center">
489              <span class="text-xs font-bold text-white">K</span>
490            </div>
491            <div class="w-6 h-6 bg-linear-to-br from-purple-400 to-purple-600 rounded-full border-2 border-white dark:border-slate-800 flex items-center justify-center">
492              <span class="text-xs font-bold text-white">A</span>
493            </div>
494            <div class="w-6 h-6 bg-linear-to-br from-pink-400 to-pink-600 rounded-full border-2 border-white dark:border-slate-800 flex items-center justify-center">
495              <span class="text-xs font-bold text-white">M</span>
496            </div>
497            <div class="w-6 h-6 bg-linear-to-br from-green-400 to-green-600 rounded-full border-2 border-white dark:border-slate-800 flex items-center justify-center text-xs font-bold text-white">
498              +
499            </div>
500          </div>
501          <span class="text-sm font-medium text-green-700 dark:text-green-300">2,847+ students helped with SHS selection</span>
502        </div>
503        <div class="flex items-center space-x-1">
504          <div class="flex text-yellow-400">
505            <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
506            <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
507            <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
508            <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
509            <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
510          </div>
511          <span class="text-sm text-green-600 dark:text-green-400 font-medium">4.9/5</span>
512        </div>
513      </div>
514      <div class="text-center">
515        <p class="text-sm text-green-700 dark:text-green-300 font-medium mb-1">
516          "Got into my dream school thanks to SHS Select!"
517        </p>
518        <p class="text-xs text-green-600 dark:text-green-400">- Akosua M., Achimota School</p>
519      </div>
520    </div>
521
522    <!-- Urgency Banner -->
523    <div class="bg-linear-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 border border-orange-200 dark:border-orange-700 rounded-lg p-3 mb-4">
524      <div class="flex items-center justify-center space-x-2">
525        <div class="flex items-center space-x-1">
526          <div class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
527          <span class="text-sm font-bold text-orange-700 dark:text-orange-300">Prepare your school list now</span>
528        </div>
529      </div>
530      <p class="text-xs text-center text-orange-600 dark:text-orange-400 mt-1">
531        Choose schools according to GES/CSSPS guidance before placement begins
532      </p>
533    </div>
534  </div>
535</div>
536
537<!-- Sample PDF Proof Section -->
538<div class="bg-linear-to-br from-primary-50 via-white to-primary-50 dark:bg-linear-to-br dark:from-slate-800 dark:via-slate-900 dark:to-slate-800 py-16 px-4 sm:px-6 lg:px-8">
539  <div class="max-w-5xl mx-auto">
540    <div class="text-center mb-10">
541      <h2 class="text-3xl font-bold text-gray-900 dark:text-slate-100 mb-4">
542        See Exactly What You'll Download
543      </h2>
544      <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
545        This is a real sample from SHS Select: a top-tier selection for a science student in Accra, filled onto the CSSPS 2026 selection form and ready to print.
546      </p>
547    </div>
548
549    <div class="grid md:grid-cols-2 gap-10 items-center">
550      <!-- Sample form preview -->
551      <a href="/sample-school-selection.pdf" target="_blank" rel="noopener" class="block group" aria-label="Open the sample school selection PDF in a new tab">
552        <div class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl border border-gray-200 dark:border-slate-700 overflow-hidden transform group-hover:scale-[1.02] transition-transform duration-300">
553          <img alt="Sample CSSPS 2026 school selection form filled with a high-tier selection of 8 schools" class="w-full h-auto" loading="lazy" src="https://shsselect.com/assets/sample_selection_preview-284d7c43.jpg" />
554          <div class="absolute top-4 right-4 bg-amber-400 text-amber-900 text-xs font-bold px-3 py-1 rounded-full shadow">
555            SAMPLE
556          </div>
557          <div class="absolute inset-x-0 bottom-0 bg-linear-to-t from-black/70 to-transparent px-5 py-4">
558            <span class="inline-flex items-center text-sm font-medium text-white">
559              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
560                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
561                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
562              </svg>
563              Tap to view the full sample PDF
564            </span>
565          </div>
566        </div>
567      </a>
568
569      <!-- What the sample proves -->
570      <div>
571        <ul class="space-y-4 mb-8">
572          <li class="flex items-start">
573            <svg class="w-6 h-6 text-green-500 mr-3 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
574              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
575            </svg>
576            <span class="text-gray-700 dark:text-gray-300">The <strong>CSSPS 2026 two-page selection form</strong>, auto-filled with the candidate's details and all 8 choices</span>
577          </li>
578          <li class="flex items-start">
579            <svg class="w-6 h-6 text-green-500 mr-3 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
580              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
581            </svg>
582            <span class="text-gray-700 dark:text-gray-300">A selection that <strong>already follows the 2026 GES rules</strong> — max 2 Category A, max 3 Category B, max 5 boarding</span>
583          </li>
584          <li class="flex items-start">
585            <svg class="w-6 h-6 text-green-500 mr-3 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
586              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
587            </svg>
588            <span class="text-gray-700 dark:text-gray-300">Correct <strong>school and programme codes</strong> straight from the 2026 register — no copying mistakes</span>
589          </li>
590          <li class="flex items-start">
591            <svg class="w-6 h-6 text-green-500 mr-3 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
592              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
593            </svg>
594            <span class="text-gray-700 dark:text-gray-300">A <strong>detailed breakdown sheet</strong> for every choice — district, region, category and boarding status at a glance</span>
595          </li>
596        </ul>
597
598        <div class="flex flex-col sm:flex-row gap-3">
599          <a href="/sample-school-selection.pdf" target="_blank" rel="noopener"
600             class="inline-flex items-center justify-center px-6 py-3 border border-primary-600 dark:border-primary-400 text-base font-medium rounded-lg text-primary-700 dark:text-primary-300 bg-white dark:bg-slate-800 hover:bg-primary-50 dark:hover:bg-slate-700 transition-colors duration-200">
601            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
602              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
603            </svg>
604            View the Sample PDF
605          </a>
606          <a href="#registration-form"
607             class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 transition-colors duration-200 group">
608            <span>Build My Own Selection</span>
609            <svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
610              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
611            </svg>
612          </a>
613        </div>
614
615        <p class="text-xs text-gray-500 dark:text-gray-400 mt-4">
616          The sample uses fictional candidate details and is watermarked. Your PDF is generated from your own choices and details.
617        </p>
618      </div>
619    </div>
620
621    <!-- Independent service note -->
622    <div class="mt-10 flex justify-center">
623      <div class="flex items-start gap-3 bg-white/80 dark:bg-slate-800/80 border border-gray-200 dark:border-slate-700 rounded-xl px-5 py-4 max-w-3xl">
624        <svg class="w-6 h-6 text-primary-600 dark:text-primary-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
625          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"></path>
626        </svg>
627        <p class="text-sm text-gray-600 dark:text-gray-300 text-left">
628          <strong class="text-gray-900 dark:text-gray-100">SHS Select is an independent service.</strong>
629          We are privately built and run, and not affiliated with, endorsed by, or connected to the Ghana Education Service (GES), CSSPS, or any government institution. We help you prepare your selection accurately and error-free. You then submit it at your JHS through the normal official process, just like every candidate.
630        </p>
631      </div>
632    </div>
633  </div>
634</div>
635
636
637<!-- How It Works Video Section -->
638<div class="bg-linear-to-br from-gray-50 via-white to-gray-50 dark:bg-linear-to-br dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 py-16 px-4 sm:px-6 lg:px-8">
639  <div class="max-w-4xl mx-auto">
640    <div class="text-center mb-8">
641      <h2 class="text-3xl font-bold text-gray-900 dark:text-slate-100 mb-4">
642        See How SHS Select Works
643      </h2>
644      <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
645        Watch this quick demo to see how easy it is to make the right school 
645choices with our expert guidance system.
646      </p>
647    </div>
648    
649    <!-- Video Thumbnail with Play Button -->
650    <div class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-slate-700 cursor-pointer group"
651         onclick="openVideoModal()">
652      <!-- Thumbnail Container -->
653      <div class="relative w-full aspect-video bg-linear-to-br from-primary-100 to-primary-200 dark:bg-linear-to-br dark:from-slate-700 dark:to-slate-600">
654        <!-- YouTube Thumbnail -->
655        <img 
656          src="https://img.youtube.com/vi/y4RG6s316Mo/maxresdefault.jpg"
657          alt="SHS Select Demo Video"
658          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
659          loading="lazy">
660        
661        <!-- Overlay Gradient -->
662        <div class="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors duration-300"></div>
663        
664        <!-- Play Button -->
665        <div class="absolute inset-0 flex items-center justify-center">
666          <div class="bg-red-600 hover:bg-red-700 rounded-full p-4 group-hover:scale-110 transition-all duration-300 shadow-lg opacity-90 hover:opacity-100">
667            <svg class="w-8 h-8 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24">
668              <path d="M8 5v14l11-7z"/>
669            </svg>
670          </div>
671        </div>
672        
673        <!-- Duration Badge -->
674        <div class="absolute bottom-4 right-4 bg-black/80 text-white text-sm px-2 py-1 rounded">
675          3:00
676        </div>
677      </div>
678      
679      <!-- Video Footer -->
680      <div class="px-6 py-4 bg-linear-to-r from-primary-50 to-primary-100 dark:bg-linear-to-r dark:from-primary-900/20 dark:to-primary-800/20 border-t border-primary-200 dark:border-primary-700">
681        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
682          <div class="flex items-center space-x-2 mb-2 sm:mb-0">
683            <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
684              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h8m-10-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
685            </svg>
686            <span class="text-sm font-medium text-primary-700 dark:text-primary-300">
687              Click to watch: Step-by-step process
688            </span>
689          </div>
690          <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
691            <span class="flex items-center space-x-1">
692              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
693                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
694              </svg>
695              <span>3 min</span>
696            </span>
697            <span class="flex items-center space-x-1">
698              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
699                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
700              </svg>
701              <span>HD</span>
702            </span>
703          </div>
704        </div>
705      </div>
706    </div>
707    
708    <!-- Call to Action below video -->
709    <div class="text-center mt-8">
710      <p class="text-gray-600 dark:text-gray-300 mb-4">
711        Ready to start your school selection journey?
712      </p>
713      <a href="#registration-form" 
714         class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 transition-colors duration-200 group">
715        <span>Get Started Now</span>
716        <svg class="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
717          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
718        </svg>
719      </a>
720    </div>
721  </div>
722</div>
723
724
725<!-- Video Modal -->
726<div id="videoModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
727  <!-- Background overlay -->
728  <div class="fixed inset-0 bg-black/90 transition-opacity" onclick="closeVideoModal()"></div>
729  
730  <!-- Modal centering container -->
731  <div class="flex items-center justify-center min-h-screen p-4">
732    <!-- Modal panel with responsive sizing -->
733    <div class="relative w-full max-w-7xl mx-auto">
734      <!-- Close button -->
735      <button 
736        onclick="closeVideoModal()"
737        class="absolute -top-12 right-0 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 transition-colors">
738        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
739          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
740        </svg>
741      </button>
742      
743      <!-- Video container with proper aspect ratio -->
744      <div class="relative w-full bg-black rounded-lg shadow-2xl overflow-hidden">
745        <!-- 16:9 aspect ratio container -->
746        <div class="relative w-full" style="padding-bottom: 56.25%;">
747          <iframe 
748            id="videoFrame"
749            class="absolute inset-0 w-full h-full"
750            src=""
751            title="SHS Select - How It Works"
752            frameborder="0"
753            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
754            referrerpolicy="strict-origin-when-cross-origin"
755            allowfullscreen>
756          </iframe>
757        </div>
758      </div>
759    </div>
760  </div>
761</div>
762
763<script>
764function openVideoModal() {
765  const modal = document.getElementById('videoModal');
766  const iframe = document.getElementById('videoFrame');
767  
768  // Set the iframe source with autoplay and minimal YouTube UI
769  iframe.src = 'https://www.youtube.com/embed/y4RG6s316Mo?rel=0&modestbranding=1&showinfo=0&autoplay=1&iv_load_policy=3&cc_load_policy=0&playsinline=1&widget_referrer=' + encodeURIComponent(window.location.href);
770  
771  // Show modal
772  modal.classList.remove('hidden');
773  
774  // Prevent body scroll
775  document.body.style.overflow = 'hidden';
776  
777  // Add escape key listener
778  document.addEventListener('keydown', handleEscapeKey);
779}
780
781function closeVideoModal() {
782  const modal = document.getElementById('videoModal');
783  const iframe = document.getElementById('videoFrame');
784  
785  // Stop video by removing source
786  iframe.src = '';
787  
788  // Hide modal
789  modal.classList.add('hidden');
790  
791  // Restore body scroll
792  document.body.style.overflow = '';
793  
794  // Remove escape key listener
795  document.removeEventListener('keydown', handleEscapeKey);
796}
797
798function handleEscapeKey(event) {
799  if (event.key === 'Escape') {
800    closeVideoModal();
801  }
802}
803</script>
803
804
805<!-- Payment Value Preview Section -->
806<div class="bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 dark:bg-linear-to-br dark:from-blue-900/20 dark:via-indigo-900/20 dark:to-purple-900/20 py-16 px-4 sm:px-6 lg:px-8">
807  <div class="max-w-4xl mx-auto">
808    <div class="text-center mb-12">
809      <h2 class="text-3xl font-bold text-gray-900 dark:text-slate-100 mb-4">
810        What You Get With SHS Select Premium
811      </h2>
812      <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
813        For just <span class="font-bold text-primary-600 dark:text-primary-400">GH₵27</span>, complete a rule-checked 8-school selection with programme, residency and category validation—then download a personalized printable copy.
814      </p>
815    </div>
816
817    <div class="grid md:grid-cols-2 gap-8 mb-12">
818      <!-- Left Column - What's Included -->
819      <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-xl border border-gray-200 dark:border-slate-700">
820        <div class="flex items-center mb-4">
821          <div class="w-10 h-10 bg-linear-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center">
822            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
823              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
824            </svg>
825          </div>
826          <h3 class="text-xl font-bold text-gray-900 dark:text-slate-100 ml-3">Premium Features</h3>
827        </div>
828        <ul class="space-y-3">
829          <li class="flex items-start">
830            <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
831              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
832            </svg>
833            <span class="text-gray-700 dark:text-gray-300"><strong>Select up to 8 schools</strong> in the optimal order</span>
834          </li>
835          <li class="flex items-start">
836            <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
837              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
838            </svg>
839            <span class="text-gray-700 dark:text-gray-300"><strong>Smart recommendations</strong> based on your grades</span>
840          </li>
841          <li class="flex items-start">
842            <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
843              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
844            </svg>
845            <span class="text-gray-700 dark:text-gray-300"><strong>Automatic validation</strong> against GES requirements</span>
846          </li>
847          <li class="flex items-start">
848            <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
849              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
850            </svg>
851            <span class="text-gray-700 dark:text-gray-300"><strong>PDF download</strong> for verification & backup</span>
852          </li>
853          <li class="flex items-start">
854            <svg class="w-5 h-5 text-green-500 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
855              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
856            </svg>
857            <span class="text-gray-700 dark:text-gray-300"><strong>SMS confirmation</strong> with selection summary</span>
858          </li>
859        </ul>
860      </div>
861
862      <!-- Right Column - Value Comparison -->
863      <div class="bg-linear-to-br from-primary-50 to-primary-100 dark:bg-linear-to-br dark:from-primary-900/30 dark:to-primary-800/30 rounded-2xl p-6 border border-primary-200 dark:border-primary-700">
864        <div class="flex items-center mb-4">
865          <div class="w-10 h-10 bg-linear-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
866            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
867              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
868            </svg>
869          </div>
870          <h3 class="text-xl font-bold text-primary-800 dark:text-primary-200 ml-3">Compare the Value</h3>
871        </div>
872        <div class="space-y-4">
873          <div class="flex justify-between items-center p-3 bg-white/50 dark:bg-slate-800/50 rounded-lg">
874            <span class="text-gray-700 dark:text-gray-300">Private consultation</span>
875            <span class="font-bold text-gray-900 dark:text-slate-100">GH₵200+</span>
876          </div>
877          <div class="flex justify-between items-center p-3 bg-white/50 dark:bg-slate-800/50 rounded-lg">
878            <span class="text-gray-700 dark:text-gray-300">School research time</span>
879            <span class="font-bold text-gray-900 dark:text-slate-100">20+ hours</span>
880          </div>
881          <div class="flex justify-between items-center p-3 bg-white/50 dark:bg-slate-800/50 rounded-lg">
882            <span class="text-gray-700 dark:text-gray-300">Risk of wrong choices</span>
883            <span class="font-bold text-red-600 dark:text-red-400">Priceless</span>
884          </div>
885          <div class="border-t border-primary-300 dark:border-primary-600 pt-3 mt-4">
886            <div class="flex justify-between items-center">
887              <span class="text-lg font-bold text-primary-800 dark:text-primary-200">SHS Select Premium</span>
888              <span class="text-2xl font-bold text-primary-600 dark:text-primary-400">GH₵27</span>
889            </div>
890            <p class="text-sm text-primary-700 dark:text-primary-300 mt-1">One-time payment for a completed, validated selection</p>
891          </div>
892        </div>
893      </div>
894    </div>
895
896    <!-- Call to Action -->
897    <div class="text-center">
898      <div class="inline-flex items-center justify-center p-1 bg-linear-to-r from-primary-500 to-primary-600 rounded-full mb-4">
899        <div class="bg-white dark:bg-slate-800 rounded-full px-6 py-2">
900          <span class="text-sm font-bold text-primary-600 dark:text-primary-400">💡 Smart Investment</span>
901        </div>
902      </div>
903      <p class="text-gray-600 dark:text-gray-300 mb-6 max-w-2xl mx-auto">
904        Don't leave your future to chance. Join thousands of students who made the right choice with SHS Select.
905      </p>
906      <a href="#registration-form" 
907         class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-xl text-white bg-linear-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 dark:from-primary-500 dark:to-primary-600 dark:hover:from-primary-600 dark:hover:to-primary-700 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 group">
908        <span>Start Your Selection Journey</span>
909        <svg class="ml-3 w-6 h-6 group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
910          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
911        </svg>
912      </a>
913    </div>
914  </div>
915</div>
916
917<!-- Features Section -->
918<div class="bg-linear-to-br from-primary-50 via-primary-100 to-primary-50 dark:bg-linear-to-br dark:from-slate-800 dark:via-slate-800/90 dark:to-slate-800 py-12 px-4 sm:px-6 lg:px-8">
919  <div class="max-w-7xl mx-auto">
920    <div class="bg-linear-to-br from-violet-50 to-pink-50 dark:from-slate-800 dark:to-slate-800/95 p-6 md:p-8 rounded-lg shadow-sm border border-violet-100 dark:border-slate-700">
921  <h2 class="text-2xl font-bold text-violet-800 dark:text-violet-300 mb-8 text-center">✨ Why Choose SHS Select? ✨</h2>
922  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
923    <div class="flex flex-col items-center text-center p-6 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800/50 hover:shadow-lg hover:shadow-blue-100/50 dark:hover:shadow-blue-900/20 transition-all duration-200 transform hover:-translate-y-1">
924      <div class="bg-blue-100 dark:bg-blue-800/30 rounded-full p-3 mb-4">
925        <svg class="h-6 w-6 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
926          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
927        </svg>
928      </div>
929      <h3 class="text-lg font-medium text-blue-700 dark:text-blue-300 mb-2">Location-Based Search</h3>
930      <p class="text-blue-600/80 dark:text-blue-300/80">Find schools near you with just one click</p>
931    </div>
932
933    <div class="flex flex-col items-center text-center p-6 bg-rose-50 dark:bg-rose-900/20 rounded-lg border border-rose-200 dark:border-rose-800/50 hover:shadow-lg hover:shadow-rose-100/50 dark:hover:shadow-rose-900/20 transition-all duration-200 transform hover:-translate-y-1">
934      <div class="bg-rose-100 dark:bg-rose-800/30 rounded-full p-3 mb-4">
935        <svg class="h-6 w-6 text-rose-600 dark:text-rose-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
936          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
937        </svg>
938      </div>
939      <h3 class="text-lg font-medium text-rose-700 dark:text-rose-300 mb-2">GES Guidelines</h3>
940      <p class="text-rose-600/80 dark:text-rose-300/80">Make selections that comply with all requirements</p>
941    </div>
942
943    <div class="flex flex-col items-center text-center p-6 bg-violet-50 dark:bg-violet-900/20 rounded-lg border border-violet-200 dark:border-violet-800/50 hover:shadow-lg hover:shadow-violet-100/50 dark:hover:shadow-violet-900/20 transition-all duration-200 transform hover:-translate-y-1">
944      <div class="bg-violet-100 dark:bg-violet-800/30 rounded-full p-3 mb-4">
945        <svg class="h-6 w-6 text-violet-600 dark:text-violet-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
946          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
947        </svg>
948      </div>
949      <h3 class="text-lg font-medium text-violet-700 dark:text-violet-300 mb-2">Comprehensive Database</h3>
950      <p class="text-violet-600/80 dark:text-violet-300/80">Access detailed information about schools and programs</p>
951    </div>
952  </div>
953
954  <div class="mt-8">
955    <div class="relative">
956      <div class="absolute inset-0 flex items-center">
957        <div class="w-full border-t border-violet-200 dark:border-violet-800/50"></div>
958      </div>
959      <div class="relative flex justify-center text-sm">
960        <span class="px-2 bg-linear-to-br from-violet-50 to-pink-50 dark:from-slate-800 dark:to-slate-800/95 text-violet-600 dark:text-violet-300">Explore More</span>
961      </div>
962    </div>
963
964    <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
965      <a class="group inline-flex items-center justify-center w-full px-4 py-3 border-2 border-violet-200 dark:border-violet-700/50 text-sm font-medium rounded-lg text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-900/20 hover:bg-violet-100 dark:hover:bg-violet-800/30 hover:border-violet-300 dark:hover:border-violet-600/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 dark:focus:ring-offset-slate-800 dark:focus:ring-violet-400 transition-all duration-200 transform hover:-translate-y-0.5" href="/directory">
966        <svg class="w-5 h-5 mr-2 text-violet-500 dark:text-violet-400 group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
967          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
968        </svg>
969        Browse all Category A to C Schools
970</a>
971      <a class="group inline-flex items-center justify-center w-full px-4 py-3 border-2 border-rose-200 dark:border-rose-700/50 text-sm font-medium rounded-lg text-rose-700 dark:text-rose-300 bg-rose-50 dark:bg-rose-900/20 hover:bg-rose-100 dark:hover:bg-rose-800/30 hover:border-rose-300 dark:hover:border-rose-600/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500 dark:focus:ring-offset-slate-800 dark:focus:ring-rose-400 transition-all duration-200 transform hover:-translate-y-0.5" href="/map">
972        <svg class="w-5 h-5 mr-2 text-rose-500 dark:text-rose-400 group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
973          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
974        </svg>
975        View Schools near me
976</a>    </div>
977  </div>
978</div> 
979  </div>
980</div>
981
982<!-- Statistics Section -->
983<div class="bg-linear-to-br from-surface via-surface to-surface-secondary dark:bg-linear-to-br dark:from-slate-900 dark:via-slate-900 dark:to-slate-800 py-12 px-4 sm:px-6 lg:px-8">
984  <div class="max-w-7xl mx-auto">
985    <!-- Statistics Section -->
986<div class="bg-linear-to-br from-primary-600 via-primary-500 to-primary-700 dark:from-slate-700 dark:via-slate-800 dark:to-slate-700 relative overflow-hidden">
987  <!-- Decorative background pattern -->
988  <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"%23fff\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"%3E%3Ccircle cx=\"3\" cy=\"3\" r=\"3\"/%3E%3Ccircle cx=\"13\" cy=\"13\" r=\"3\"/%3E%3C/g%3E%3C/svg%3E')] opacity-20 dark:opacity-10"></div>
989
990  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 relative">
991    <div class="text-center mb-10">
992      <h2 class="text-3xl font-bold text-white dark:text-slate-100 mb-4">Trusted by Students Across Ghana</h2>
993      <p class="text-white/80 dark:text-slate-300 max-w-2xl mx-auto">Join thousands of students who have successfully used SHS Select to make informed decisions about their education future.</p>
994    </div>
995
996    <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
997      <!-- Total Selections -->
998      <div class="bg-white/10 dark:bg-slate-600/30 backdrop-blur-sm rounded-lg p-6 text-center">
999        <div class="text-3xl font-bold text-white dark:text-slate-200 mb-2">5,000+</div>
1000        <div class="text-sm text-white/80 dark:text-slate-400">Successful Selections</div>
1001      </div>
1002
1003      <!-- Schools -->
1004      <div class="bg-white/10 dark:bg-slate-600/30 backdrop-blur-sm rounded-lg p-6 text-center">
1005        <div class="text-3xl font-bold text-white dark:text-slate-200 mb-2">720+</div>
1006        <div class="text-sm text-white/80 dark:text-slate-400">Schools Listed</div>
1007      </div>
1008
1009      <!-- Regions -->
1010      <div class="bg-white/10 dark:bg-slate-600/30 backdrop-blur-sm rounded-lg p-6 text-center">
1011        <div class="text-3xl font-bold text-white dark:text-slate-200 mb-2">16</div>
1012        <div class="text-sm text-white/80 dark:text-slate-400">Regions Covered</div>
1013      </div>
1014
1015      <!-- Success Rate -->
1016      <div class="bg-white/10 dark:bg-slate-600/30 backdrop-blur-sm rounded-lg p-6 text-center">
1017        <div class="text-3xl font-bold text-white dark:text-slate-200 mb-2">98%</div>
1018        <div class="text-sm text-white/80 dark:text-slate-400">Success Rate</div>
1019      </div>
1020    </div>
1021  </div>
1022</div> 
1023  </div>
1024</div>
1025
1026<!-- Testimonials Section -->
1027<div class="bg-linear-to-br from-white via-white to-white dark:bg-linear-to-br dark:from-slate-800 dark:via-slate-800 dark:to-slate-900 py-6 px-4 sm:px-6 lg:px-8">
1028  <div class="max-w-7xl mx-auto">
1029    <!-- Testimonials Section -->
1030<div class="bg-linear-to-br from-violet-50 to-pink-50 dark:from-slate-800 dark:to-slate-800/95 py-8 sm:py-10">
1031  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
1032    <div class="text-center">
1033      <h2 class="text-3xl font-bold tracking-tight text-violet-800 dark:text-violet-300 sm:text-4xl">✨ What Students Say ✨</h2>
1034      <p class="mx-auto mt-2 max-w-2xl text-xl text-violet-600/80 dark:text-violet-300/80 sm:mt-3">
1035        Hear from students who made their school selection through our platform
1036      </p>
1037    </div>
1038
1039    <div class="mt-8 grid gap-8 lg:grid-cols-3">
1040      <!-- Testimonial 1 -->
1041      <div class="rounded-2xl bg-blue-50 dark:bg-blue-900/20 p-6 shadow-lg border border-blue-200 dark:border-blue-800/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-200">
1042        <div class="flex items-center gap-4">
1043          <div class="h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-800/30 flex items-center justify-center">
1044            <span class="text-xl font-bold text-blue-600 dark:text-blue-300">K</span>
1045          </div>
1046          <div>
1047            <p class="font-semibold text-blue-700 dark:text-blue-300">Kwame Mensah</p>
1048            <p class="text-sm text-blue-600/80 dark:text-blue-300/80">BECE Graduate, 2024</p>
1049          </div>
1050        </div>
1051        <p class="mt-4 text-blue-600/90 dark:text-blue-300/90">
1052          "SHS Select made it so easy to find the right school. I was able to compare different schools and programs, and make an informed decision. Now I'm confident in my choice!"
1053        </p>
1054      </div>
1055
1056      <!-- Testimonial 2 -->
1057      <div class="rounded-2xl bg-rose-50 dark:bg-rose-900/20 p-6 shadow-lg border border-rose-200 dark:border-rose-800/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-200">
1058        <div class="flex items-center gap-4">
1059          <div class="h-12 w-12 rounded-full bg-rose-100 dark:bg-rose-800/30 flex items-center justify-center">
1060            <span class="text-xl font-bold text-rose-600 dark:text-rose-300">A</span>
1061          </div>
1062          <div>
1063            <p class="font-semibold text-rose-700 dark:text-rose-300">Abena Osei</p>
1064            <p class="text-sm text-rose-600/80 dark:text-rose-300/80">BECE Student, 2026</p>
1065          </div>
1066        </div>
1067        <p class="mt-4 text-rose-600/90 dark:text-rose-300/90">
1068          "I'm preparing for my BECE this year, and SHS Select is helping me explore all my options early. The detailed information about schools and programmes is making my preparation much easier! 🎯"
1069        </p>
1070      </div>
1071
1072      <!-- Testimonial 3 -->
1073      <div class="rounded-2xl bg-violet-50 dark:bg-violet-900/20 p-6 shadow-lg border border-violet-200 dark:border-violet-800/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-200">
1074        <div class="flex items-center gap-4">
1075          <div class="h-12 w-12 rounded-full bg-violet-100 dark:bg-violet-800/30 flex items-center justify-center">
1076            <span class="text-xl font-bold text-violet-600 dark:text-violet-300">Y</span>
1077          </div>
1078          <div>
1079            <p class="font-semibold text-violet-700 dark:text-violet-300">Yaw Addo</p>
1080            <p class="text-sm text-violet-600/80 dark:text-violet-300/80">Parent</p>
1081          </div>
1082        </div>
1083        <p class="mt-4 text-violet-600/90 dark:text-violet-300/90">
1084          "As a parent, I appreciate how SHS Select simplifies the selection process. The platform is user-friendly and provides all the information we needed to make the best choice for my child."
1085        </p>
1086      </div>
1087    </div>
1088
1089    <!-- Trust Badges -->
1090    <div class="mt-10">
1091      <div class="flex flex-wrap justify-center gap-8 opacity-90">
1092        <div class="flex items-center space-x-2 bg-blue-50 dark:bg-blue-900/20 px-4 py-2 rounded-full border border-blue-200 dark:border-blue-800/50">
1093          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1094            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
1095          </svg>
1096          <span class="text-sm font-medium text-blue-700 dark:text-blue-300">Real-time Updates</span>
1097        </div>
1098        <div class="flex items-center space-x-2 bg-rose-50 dark:bg-rose-900/20 px-4 py-2 rounded-full border border-rose-200 dark:border-rose-800/50">
1099          <svg class="h-6 w-6 text-rose-600 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1100            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
1101          </svg>
1102          <span class="text-sm font-medium text-rose-700 dark:text-rose-300">Verified Information</span>
1103        </div>
1104        <div class="flex items-center space-x-2 bg-violet-50 dark:bg-violet-900/20 px-4 py-2 rounded-full border border-violet-200 dark:border-violet-800/50">
1105          <svg class="h-6 w-6 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1106            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
1107          </svg>
1108          <span class="text-sm font-medium text-violet-700 dark:text-violet-300">Secure Platform</span>
1109        </div>
1110      </div>
1111    </div>
1112  </div>
1113</div> 
1114
1115  </div>
1116</div>
1117
1118<!-- Press Section -->
1119<div class="bg-linear-to-br from-gray-50 via-white to-gray-50 dark:bg-linear-to-br dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 py-16 px-4 sm:px-6 lg:px-8">
1120  <div class="max-w-6xl mx-auto">
1121    <div class="text-center mb-12">
1122      <h2 class="text-3xl font-bold text-gray-900 dark:text-slate-100 mb-4">
1123        Featured in Media
1124      </h2>
1125      <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
1126        See what education experts and media outlets are saying about effective school selection strategies
1127      </p>
1128    </div>
1129    
1130    <div class="grid md:grid-cols-3 gap-8">
1131      <!-- Coleman Publications Article -->
1132      <div class="group bg-white dark:bg-slate-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-200 dark:border-slate-700">
1133        <!-- Featured Image Background -->
1134        <div class="relative h-48 bg-linear-to-br from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30 overflow-hidden">
1135          <img 
1136            src="https://i0.wp.com/colemanpublications.com/wp-content/uploads/2025/05/2025-bece-Guidelines.jpg?w=1280&ssl=1"
1137            alt="Coleman Publications - BECE Guidelines"
1138            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
1139            loading="lazy"
1140            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
1141          <!-- Fallback gradient if image fails to load -->
1142          <div class="absolute inset-0 bg-linear-to-br from-blue-500 to-blue-600 hidden items-center justify-center">
1143            <svg class="w-12 h-12 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1144              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
1145            </svg>
1146          </div>
1147          <!-- Overlay for text readability -->
1148          <div class="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent"></div>
1149          <!-- Publication Badge -->
1150          <div class="absolute top-4 left-4">
1151            <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-white/90 text-blue-800 backdrop-blur-sm">
1152              Coleman Publications
1153            </div>
1154          </div>
1155        </div>
1156        
1157        <div class="p-6">
1158          <h4 class="text-lg font-semibold text-gray-900 dark:text-slate-100 mb-3 leading-tight">
1159            How BECE Candidates Can Choose the Right Senior High Schools for Placement
1160          </h4>
1161          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">
1162            Expert guidance on making informed school selection decisions that align with academic goals and career aspirations.
1163          </p>
1164          <a href="https://colemanpublications.com/education/how-bece-candidates-can-choose-the-right-senior-high-schools-for-placement/" 
1165             target="_blank"
1166             rel="noopener noreferrer"
1167             class="inline-flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium text-sm group-hover:underline transition-colors">
1168            Read Full Article
1169            <svg class="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1170              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
1171            </svg>
1172          </a>
1173        </div>
1174      </div>
1175
1176      <!-- Quarms Media Article -->
1177      <div class="group bg-white dark:bg-slate-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-200 dark:border-slate-700">
1178        <!-- Featured Image Background -->
1179        <div class="relative h-48 bg-linear-to-br from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30 overflow-hidden">
1180          <img 
1181            src="https://quarmsmedia.com/wp-content/uploads/2025/05/IMG-20250530-WA0044.jpg"
1182            alt="Quarms Media - School Selection Guide"
1183            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
1184            loading="lazy"
1185            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
1186          <!-- Fallback gradient if image fails to load -->
1187          <div class="absolute inset-0 bg-linear-to-br from-green-500 to-green-600 hidden items-center justify-center">
1188            <svg class="w-12 h-12 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1189              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
1190            </svg>
1191          </div>
1192          <!-- Overlay for text readability -->
1193          <div class="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent"></div>
1194          <!-- Publication Badge -->
1195          <div class="absolute top-4 left-4">
1196            <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-white/90 text-green-800 backdrop-blur-sm">
1197              Quarms Media
1198            </div>
1199          </div>
1200        </div>
1201        
1202        <div class="p-6">
1203          <h4 class="text-lg font-semibold text-gray-900 dark:text-slate-100 mb-3 leading-tight">
1204            2026 School Selection: How BECE Candidates Can Make Correct School Selections
1205          </h4>
1206          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">
1207            Comprehensive guide for 2026 BECE candidates on making strategic school choices for successful placement.
1208          </p>
1209          <a href="https://quarmsmedia.com/2025/05/31/2025-school-selection-how-bece-candidates-can-make-correct-school-selections/" 
1210             target="_blank"
1211             rel="noopener noreferrer"
1212             class="inline-flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium text-sm group-hover:underline transition-colors">
1213            Read Full Article
1214            <svg class="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1215              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
1216            </svg>
1217          </a>
1218        </div>
1219      </div>
1220
1221      <!-- Ameyaw Debrah Article -->
1222      <div class="group bg-white dark:bg-slate-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-200 dark:border-slate-700">
1223        <!-- Featured Image Background -->
1224        <div class="relative h-48 bg-linear-to-br from-purple-100 to-purple-200 dark:from-purple-900/30 dark:to-purple-800/30 overflow-hidden">
1225          <img 
1226            src="https://ameyawdebrah.com/wp-content/uploads/2025/05/shsselect-gives-results.jpg"
1227            alt="Ameyaw Debrah - SHS Select Results"
1228            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
1229            loading="lazy"
1230            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
1231          <!-- Fallback gradient if image fails to load -->
1232          <div class="absolute inset-0 bg-linear-to-br from-purple-500 to-purple-600 hidden items-center justify-center">
1233            <svg class="w-12 h-12 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1234              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
1235            </svg>
1236          </div>
1237          <!-- Overlay for text readability -->
1238          <div class="absolute inset-0 bg-linear-to-t from-black/60 via-black/20 to-transparent"></div>
1239          <!-- Publication Badge -->
1240          <div class="absolute top-4 left-4">
1241            <div class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-white/90 text-purple-800 backdrop-blur-sm">
1242              Ameyaw Debrah
1243            </div>
1244          </div>
1245        </div>
1246        
1247        <div class="p-6">
1248          <h4 class="text-lg font-semibold text-gray-900 dark:text-slate-100 mb-3 leading-tight">
1249            How BECE Candidates Can Avoid Mistakes When Choosing Schools for Placement
1250          </h4>
1251          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">
1252            Essential tips and strategies to help BECE candidates avoid common pitfalls in their school selection process.
1253          </p>
1254          <a href="https://ameyawdebrah.com/how-bece-candidates-can-avoid-mistakes-when-choosing-schools-for-placement/" 
1255             target="_blank"
1256             rel="noopener noreferrer"
1257             class="inline-flex items-center text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 font-medium text-sm group-hover:underline transition-colors">
1258            Read Full Article
1259            <svg class="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1260              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
1261            </svg>
1262          </a>
1263        </div>
1264      </div>
1265    </div>
1266
1267    <!-- Media Recognition Banner -->
1268    <div class="mt-12">
1269      <div class="bg-linear-to-r from-primary-50 to-indigo-50 dark:from-primary-900/20 dark:to-indigo-900/20 rounded-2xl px-8 py-6 border border-primary-200 dark:border-primary-700/50">
1270        <div class="text-center">
1271          <div class="flex items-center justify-center mb-3">
1272            <svg class="w-5 h-5 text-primary-600 dark:text-primary-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1273              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
1274            </svg>
1275            <span class="text-sm font-semibold text-primary-700 dark:text-primary-300">Trusted by Education Experts</span>
1276          </div>
1277          <p class="text-primary-700 dark:text-primary-300 font-medium">
1278            SHS Select's approach to school selection has been featured across major education platforms
1279          </p>
1280          <p class="text-xs text-primary-600 dark:text-primary-400 mt-2">
1281            Media inquiries? Contact us for expert commentary on education and school selection
1282          </p>
1283        </div>
1284      </div>
1285    </div>
1286  </div>
1287</div>
1288
1289<!-- Welcome Footer -->
1290<div class="bg-gray-50 dark:bg-slate-800/70 py-8 px-4 sm:px-6 lg:px-8">
1291  <div class="max-w-7xl mx-auto text-center">
1292    <p class="text-gray-600 dark:text-gray-400">Welcome to your educational journey! Whether you're a student dreaming big, a parent supporting your child, or a teacher guiding the way - we're here to help.</p>
1293  </div>
1294</div>
1295
1296  <div id="firstVisitPopup" class="fixed inset-0 z-[70] hidden overflow-y-auto" aria-labelledby="popup-title" role="dialog" aria-modal="true">
1297    <!-- Backdrop -->
1298    <div class="fixed inset-0 bg-black/50 transition-opacity"></div>
1299    
1300    <!-- Modal Content -->
1301    <div class="flex min-h-full items-center justify-center p-4">
1302      <div class="relative w-full max-w-md transform bg-white dark:bg-slate-800 rounded-xl shadow-xl transition-all">
1303        
1304        <!-- Modal Header -->
1305        <div class="px-6 pt-6 pb-4">
1306          <div class="flex items-center justify-center mb-4">
1307            <div class="mx-auto w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center">
1308              <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1309                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5l3-1m-3 1L9 5.5m3 0L15 4"></path>
1310              </svg>
1311            </div>
1312          </div>
1313          <h3 id="popup-title" class="text-lg font-semibold text-gray-900 dark:text-slate-100 text-center mb-4">
1314            Welcome to SHS Select! 👋
1315          </h3>
1316        </div>
1317        
1318        <!-- Message Content -->
1319        <div class="px-6 pb-6">
1320          <p class="text-gray-600 dark:text-slate-300 text-center leading-relaxed">
1321            📢 *For 2026 Candidates Only*  We help you select your 8 schools exactly according to GES Guidelines to avoid placement errors or missing out on school admission entirely.  Explore all schools, courses, and boarding options. Once your list is ready, download the *PDF* to submit to your school for your official selection.
1322          </p>
1323          
1324          <!-- OK Button -->
1325          <div class="mt-6">
1326            <button 
1327              type="button" 
1328              onclick="closeFirstVisitPopup()"
1329              class="w-full bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 text-white px-4 py-3 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-2 dark:focus:ring-offset-slate-800">
1330              Got it!
1331            </button>
1332          </div>
1333        </div>
1334      </div>
1335    </div>
1336  </div>
1337
1338  
1338<script>
1339    function checkAndShowFirstVisitPopup() {
1340      // Check when user last saw the popup
1341      const lastShown = localStorage.getItem('shs_select_popup_last_shown');
1342      const oneDayInMs = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
1343      const now = new Date().getTime();
1344      
1345      // Show popup if never shown before OR if more than 1 day has passed
1346      if (!lastShown || (now - parseInt(lastShown)) > oneDayInMs) {
1347        // Record the current timestamp
1348        localStorage.setItem('shs_select_popup_last_shown', now.toString());
1349        
1350        // Show popup after a short delay for better UX
1351        setTimeout(() => {
1352          const popup = document.getElementById('firstVisitPopup');
1353          if (popup) {
1354            popup.classList.remove('hidden');
1355            document.body.style.overflow = 'hidden';
1356          }
1357        }, 1000); // 1 second delay
1358      }
1359    }
1360
1361    function closeFirstVisitPopup() {
1362      const popup = document.getElementById('firstVisitPopup');
1363      if (popup) {
1364        popup.classList.add('hidden');
1365        document.body.style.overflow = '';
1366      }
1367    }
1368
1369    // Run when DOM is loaded
1370    document.addEventListener('DOMContentLoaded', checkAndShowFirstVisitPopup);
1371  </script>
1371
1372 
1373
1374          </div>
1375        </div>
1376      </main>
1377
1378      <footer class="relative overflow-hidden mt-auto">
1379  <!-- Background with gradient -->
1380  <div class="absolute inset-0 bg-linear-to-br from-primary-700 via-primary-600 to-primary-800 dark:from-slate-800 dark:via-slate-900 dark:to-slate-900">
1381    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"%23fff\" fill-opacity=\"0.05\" fill-rule=\"evenodd\"%3E%3Ccircle cx=\"3\" cy=\"3\" r=\"3\"/%3E%3Ccircle cx=\"13\" cy=\"13\" r=\"3\"/%3E%3C/g%3E%3C/svg%3E')] opacity-20 dark:opacity-10"></div>
1382  </div>
1383
1384  <!-- Wave decoration -->
1385  <div class="absolute top-0 left-0 right-0">
1386    <svg class="w-full h-12 fill-surface dark:fill-slate-800 transform rotate-180" viewBox="0 0 1440 48" preserveAspectRatio="none">
1387      <path d="M0 48h1440V0c-624 52-1440 0-1440 0z" />
1388    </svg>
1389  </div>
1390
1391  <!-- Content -->
1392  <div class="relative max-w-7xl mx-auto pt-20 pb-12 px-4 sm:px-6 lg:px-8">
1393    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 items-start">
1394      <!-- Column 1: About -->
1395      <div class="space-y-6">
1396        <div class="bg-white/10 dark:bg-slate-700/30 backdrop-blur-sm rounded-xl p-6 shadow-sm">
1397          <div class="flex items-center space-x-3 mb-4">
1398            <h2 class="text-2xl font-bold text-white dark:text-slate-100">SHS Select</h2>
1399            <div class="h-1 w-10 bg-white/30 dark:bg-slate-600/50 rounded-full"></div>
1400          </div>
1401          <p class="text-white/90 dark:text-slate-300 leading-relaxed text-sm">Helping students find their perfect senior high school match in Ghana.</p>
1402        </div>
1403      </div>
1404
1405      <!-- Column 2: 2026 Guides -->
1406      <div>
1407        <h3 class="text-sm font-semibold text-white dark:text-slate-200 tracking-wider uppercase mb-5">2026 Guides</h3>
1408        <ul class="space-y-3">
1409          <li>
1410            <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/">
1411              <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1412              <span>Home</span>
1413</a>          </li>
1414          <li>
1415            <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/bece-school-selection-2026">
1416              <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1417              <span>BECE Selection Guide</span>
1418</a>          </li>
1419          <li>
1420            <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/choose-shs-schools-2026">
1421              <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1422              <span>How to Choose SHS</span>
1423</a>          </li>
1424          <li>
1425            <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/school-placement-2026">
1426              <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1427              <span>School Placement</span>
1428</a>          </li>
1429          <li>
1430            <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/bece-aggregate-calculator">
1431              <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1432              <span>BECE Aggregate Calculator</span>
1433</a>          </li>
1434          <li>
1435            <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/how-it-works">
1436              <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1437              <span>How It Works</span>
1438</a>          </li>
1439        </ul>
1440
1441        <h3 class="text-sm font-semibold text-white dark:text-slate-200 tracking-wider uppercase mt-8 mb-5">My Selection</h3>
1442        <ul class="space-y-3">
1443          <li>
1444            <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/#registration-form">
1445              <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1446              <span>Start Selection</span>
1447</a>          </li>
1448          <li>
1449            <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/selections/search">
1450              <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1451              <span>Previous Selections</span>
1452</a>          </li>
1453          <li>
1454            <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/selections/demo">
1455              <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1456              <span>Example Selection</span>
1457</a>          </li>
1458        </ul>
1459      </div>
1460
1461      <!-- Column 3: Explore & Categories -->
1462      <div class="space-y-8">
1463        <div>
1464          <h3 class="text-sm font-semibold text-white dark:text-slate-200 tracking-wider uppercase mb-5">Explore</h3>
1465          <ul class="space-y-3">
1466            <li>
1467              <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/schools">
1468                <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1469                <span>All Schools</span>
1470</a>            </li>
1471            <li>
1472              <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/programmes">
1473                <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1474                <span>All Programmes</span>
1475</a>            </li>
1476            <li>
1477              <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/directory">
1478                <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1479                <span>School Directory</span>
1480</a>            </li>
1481            <li>
1482              <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/map">
1483                <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1484                <span>Map of SHS</span>
1485</a>            </li>
1486            <li>
1487              <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/rankings">
1488                <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1489                <span>Best SHS Ranking</span>
1490</a>            </li>
1491            <li>
1492              <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/rankings/technical-institutes">
1493                <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1494                <span>Best TVET Ranking</span>
1495</a>            </li>
1496          </ul>
1497        </div>
1498
1499        <div>
1500          <h3 class="text-sm font-semibold text-white dark:text-slate-200 tracking-wider uppercase mb-5">Categories</h3>
1501          <ul class="space-y-3">
1502            <li>
1503              <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/directory/category-a-schools">
1504                <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1505                <span>Category A Schools</span>
1506</a>            </li>
1507            <li>
1508              <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/directory/category-b-schools">
1509                <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1510                <span>Category B Schools</span>
1511</a>            </li>
1512            <li>
1513              <a class="group flex items-center text-white/80 dark:text-slate-300 hover:text-white dark:hover:text-slate-100 transition duration-200 text-sm" href="/directory/category-c-schools">
1514                <span class="w-1 h-1 rounded-full bg-white/40 dark:bg-slate-500/70 group-hover:bg-white dark:group-hover:bg-slate-300 mr-2 transition duration-200"></span>
1515                <span>Category C Schools</span>
1516</a>            </li>
1517          </ul>
1518        </div>
1519      </div>
1520
1521      <!-- Column 4: Contact & Legal -->
1522      <div class="space-y-6">
1523        <div>
1524          <h3 class="text-sm font-semibold text-white dark:text-slate-200 tracking-wider uppercase mb-4">Get in Touch</h3>
1525          <div class="flex flex-col gap-3">
1526            <a href="/cdn-cgi/l/email-protection#a5cccbc3cae5d6cdd6d6c0c9c0c6d18bc6cac8" class="inline-flex items-center justify-center px-4 py-2.5 rounded-lg bg-white/10 dark:bg-slate-700/40 hover:bg-white/20 dark:hover:bg-slate-600/60 backdrop-blur-sm text-white dark:text-slate-100 transition duration-200 shadow-sm text-sm">
1527              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1528                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
1529              </svg>
1530              <span class="__cf_email__" data-cfemail="026b6c646d42716a7171676e6761762c616d6f">[email&#160;protected]</span>
1531            </a>
1532
1533            <a href="https://wa.me/233546090871" 
1534               target="_blank"
1535               rel="noopener"
1536               class="inline-flex items-center justify-center px-4 py-2.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white transition duration-200 shadow-sm font-medium text-sm animate-pulse-subtle">
1537              <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 24 24">
1538                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
1539              </svg>
1540              Chat with AI Bot
1541            </a>
1542
1543            <a href="https://whatsapp.com/channel/0029Vb8AfgsJpe8g762GRw1L" 
1544               target="_blank"
1545               rel="noopener"
1546               class="inline-flex items-center justify-center px-4 py-2.5 rounded-lg bg-white/10 dark:bg-slate-700/40 hover:bg-white/20 dark:hover:bg-slate-600/60 backdrop-blur-sm text-white dark:text-slate-100 transition duration-200 shadow-sm text-sm">
1547              <svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 24 24">
1548                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.
1548198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
1549              </svg>
1550              Join updates channel
1551            </a>
1552          </div>
1553        </div>
1554
1555        <div class="pt-4 border-t border-white/10 dark:border-slate-800">
1556          <h3 class="text-sm font-semibold text-white dark:text-slate-200 tracking-wider uppercase mb-4">Legal</h3>
1557          <div class="flex flex-col space-y-2 text-sm">
1558            <a class="text-white/70 dark:text-slate-400 hover:text-white dark:hover:text-slate-200 transition duration-200" href="/privacy-policy">Privacy Policy</a>
1559            <a class="text-white/70 dark:text-slate-400 hover:text-white dark:hover:text-slate-200 transition duration-200" href="/terms-of-service">Terms of Service</a>
1560          </div>
1561        </div>
1562      </div>
1563    </div>
1564
1565    <!-- Bottom Bar -->
1566    <div class="mt-12 pt-8 border-t border-white/10 dark:border-slate-700/50">
1567      <div class="flex flex-col items-center text-center">
1568        <p class="text-sm text-white/70 dark:text-slate-400">&copy; 2026 SHS Select. All rights reserved.</p>
1569        <p class="text-xs sm:text-sm text-white/80 dark:text-slate-300 mt-3 max-w-2xl leading-relaxed">
1570          SHSselect.com initially originated as a <a href="https://dcs.ug.edu.gh/" target="_blank" rel="nofollow" class="text-white dark:text-slate-200 hover:text-white/90 dark:hover:text-slate-100 underline transition duration-200">University of Ghana</a> degree thesis project in partial fulfillment of an academic award. Built to innovate and simplify high school selection, our platform provides parents and BECE graduates with a smart, transparent tool to choose their schools with confidence.
1571        </p>
1572        <p class="text-xs text-white/60 dark:text-slate-500 mt-3 mb-16 max-w-2xl">
1573          This app is an independent guide to help make informed SHS choices and does not replace the official process. Always confirm school codes with your school and involve parents/guardians in your final selection.
1574        </p>
1575      </div>
1576    </div>
1577  </div>
1578</footer>
1579
1580    </div>
1581
1582    <!-- Yandex.Metrika counter noscript -->
1583    
1584    <!-- /Yandex.Metrika counter noscript -->
vendor: 111 bytes, lines 1584-1585
1584
1585  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1585<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"0a78723e98174e90b050780ac0ff0634","r":1,"spa":2}' crossorigin="anonymous"></script>
1585
1586</body>
1587</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.