fix(page2): error handling when country is not available

src/App.tsx

@@ -11,7 +11,7 @@ export default function App() {
 	// context
 	const [year, setYear] = useState<number>(new Date().getFullYear())
 	const [supportedCountries, setSupportedCountries] = useState<Country[]>([{ countryCode: 'US', name: 'United States' }])
-	const [countryCode, setCountryCode] = useState<string>('US')
+	const [countryCode, setCountryCode] = useState<string>('')
 	const [daysInYear, setDaysInYear] = useState<number>(365)
 	const [weekends, setWeekends] = useState<number[]>([])
 	const [publicHolidays, setPublicHolidays] = useState<PublicHolidaySlice[]>([{ date: 0, name: '', localName: ':)' }])

src/pages/Page2.tsx

@@ -21,14 +21,17 @@ export default function Page2({ goto }: { goto: (arg: number) => void }) {
 						{supportedCountries.find((c) => c.countryCode === countryCode)?.name || 'your country'} in {year}.
 					</p>
 					{/* <p className="text-lg leading-8 text-copy-light font-bold">Enjoy planning!</p> */}
-					<div className="mt-10 flex items-center justify-center gap-x-6">
+					<div className="mt-10 flex items-center justify-center gap-x-6 flex-col space-y-2">
 						<button
 							className="rounded-md bg-primary px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:bg-border"
 							onClick={() => goto(3)}
 							disabled={!supportedCountries.find((c) => c.countryCode === countryCode)}
 						>
 							Let's go!
 						</button>
+						<p className='text-copy-light text-sm' style={{ display: !supportedCountries.find((c) => c.countryCode === countryCode) ? 'block' : 'none' }}>
+							It seems we couldn't identify your country. <br /> Please select one using the globe icon at the top right.
+						</p>
 					</div>
 				</div>
 			</motion.div>