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->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->registration-form#phoneChanged input->phone-format#format keydown->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'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->registration-form#guardianPhoneChanged input->phone-format#format keydown->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->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->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 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">© 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.