Repository: ohcnetwork/care_fe
Pull request #11088: Redesigned public page as per the figma design
Author: login: cherish2003
Labels: name: Tested
Created: 2025-03-06T19:49:46Z | Merged: 2025-03-20T19:12:08Z

## Proposed Changes

- Fixes #11015
- Redesigned public page as per the [figma design](https://www.figma.com/design/Z93EYKSa1MdBmXndsMBJSQ/Care?node-id=9900-14259&t=YHHDkQltmZ2bBTJK-1)

## Screen shot
<img width="1440" alt="Screenshot 2025-03-07 at 1 07 36 AM" src="https://github.com/user-attachments/assets/a23f6f13-b20d-44fd-94b5-c5383fd5b7e9" />

## Demo video


https://github.com/user-attachments/assets/083d12a9-9a1a-4222-8a02-efa5a6983865


@ohcnetwork/care-fe-code-reviewers

## Merge Checklist

- [ ] Add specs that demonstrate bug / test a new feature.
- [ ] Update [product documentation](https://docs.ohc.network).
- [ ] Ensure that UI text is kept in I18n files.
- [x] Prep screenshot or demo video for change log entry, and attach it to issue.
- [x] Request for Peer Reviews
- [ ] Completion of QA in Mobile Devices
- [ ] Completion of QA in Desktop Devices


<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a dedicated login section offering distinct options for staff and patients.
  - Added new localization entries to enhance user guidance and search functionality.

- **Style & Layout Enhancements**
  - Streamlined the landing page with improved padding and responsive design.
  - Redesigned the search area with a refreshed placeholder and updated button styling.
  - Added a new centered dots image below the search section.
  - Introduced a new icon representation for "d-health-worker".
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Linked issue #11015: Redesign the Public Page as per the new Figma design
**Describe the bug**

Redesign the public page as per the new Figma design ( https://www.figma.com/design/Z93EYKSa1MdBmXndsMBJSQ/Care?node-id=9900-14259&t=YHHDkQltmZ2bBTJK-1 ) 

Screenshot

![Image](https://github.com/user-attachments/assets/ff68161d-b3bc-4e20-97e4-c966c1f94140)

URL to the public page: https://care.coronasafe.in/

---

### 🚨 DO NOT EDIT BELOW THIS LINE 🚨

### Instructions for Requesting Assignment:

To request assignment, please clearly outline your solution and timeline by commenting on the issue using the format below:

**Describe your solution clearly:**
Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.

**Expected Timeline:**
- End date: [Expected submission date of a completed Pull Request]

**Additional Context:**
Include any other relevant context, links, screenshots, or resources that support your proposed solution.

> 🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.

Linked issue comments: user: login: cherish2003
created_at: 2025-03-04T19:11:35Z
body: @nihal467  I would like to work on this
ETA: 2 DAYS
author_association: CONTRIBUTOR
user: login: Spandan-Mishra
created_at: 2025-03-04T19:13:39Z
body: @nihal467 I would like to work on this issue
Estimated Time: 2 Days
author_association: CONTRIBUTOR

Diff:
diff --git a/public/images/dots.svg b/public/images/dots.svg
new file mode 100644
index 00000000000..bf38189d425
--- /dev/null
+++ b/public/images/dots.svg
@@ -0,0 +1,5 @@
+<svg width="622" height="10" viewBox="0 0 622 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 9H618.339" stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.12 7"/>
+<path d="M1 1H618.339" stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.12 7"/>
+<path d="M3.66113 5H621" stroke="#6B7280" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.12 7"/>
+</svg>
diff --git a/public/images/patient_background.png b/public/images/patient_background.png
new file mode 100644
index 00000000000..ec7c268869a
Binary files /dev/null and b/public/images/patient_background.png differ
diff --git a/public/images/staff_background.png b/public/images/staff_background.png
new file mode 100644
index 00000000000..81759620c14
Binary files /dev/null and b/public/images/staff_background.png differ
diff --git a/public/locale/en.json b/public/locale/en.json
index f076fe04a61..d30c8e0fe78 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1402,6 +1402,7 @@
   "lab_tests": "Lab Tests",
   "label": "Label",
   "labels": "Labels",
+  "landing_search_placeholder": "Enter {{orgType}} name to find facilities.",
   "landline": "Indian landline",
   "landmark": "Landmark",
   "language_selection": "Language Selection",
@@ -1493,6 +1494,7 @@
   "logged_by": "Logged by",
   "logged_in_as": "Logged in as",
   "login": "Login",
+  "login_already_registered": "Already registered? Log in to your account.",
   "logout": "Log Out",
   "longitude": "Longitude",
   "longitude_invalid": "Longitude must be between -180 and 180",
@@ -1843,6 +1845,8 @@
   "patient_files": "Patient Files",
   "patient_information": "Patient Information",
   "patient_is_deceased": "Patient is deceased",
+  "patient_login": "Log in as Patient",
+  "patient_login_description": "For patients to book and manage their appointments.",
   "patient_name": "Patient Name",
   "patient_name_uhid": "Patient Name/UHID",
   "patient_no": "OP/IP No",
@@ -2205,6 +2209,7 @@
   "scribe_error": "Could not autofill fields",
   "scroll_to_question": "Scroll to question",
   "search": "Search",
+  "search_button": "Search Facilities",
   "search_by": "Search by",
   "search_by_department_team_name": "Search by department/team name",
   "search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
@@ -2220,6 +2225,7 @@
   "search_devices": "Search Devices",
   "search_drawings": "Search drawings...",
   "search_encounters": "Search Encounters",
+  "search_facilities": "Search for available facilities to book an appointment <strong>(for new patients)</strong>",
   "search_for_allergies_to_add": "Search for allergies to add",
   "search_for_diagnoses_to_add": "Search for diagnoses to add",
   "search_for_facility": "Search for Facility",
@@ -2232,6 +2238,7 @@
   "search_medication": "Search Medication",
   "search_medications": "Search Medications",
   "search_medicine": "Search Medicine",
+  "search_no_results": "Unable to find anything based on your search.",
   "search_organizations": "Search Organizations",
   "search_patient_page_text": "Search for existing patients using their phone number or create a new patient record",
   "search_patients": "Search Patients",
@@ -2391,6 +2398,8 @@
   "srf_id": "SRF ID",
   "staff": "Staff",
   "staff_list": "Staff List",
+  "staff_login": "Log in as Staff",
+  "staff_login_description": "For hospital staff: doctors, nurses, and administrators.",
   "staff_not_found": "Staff Not Found",
   "staff_username_not_found": "Staff username not found",
   "start_a_new_clinical_encounter": "Start a new clinical encounter",
diff --git a/src/CAREUI/icons/DuoTonePaths.json b/src/CAREUI/icons/DuoTonePaths.json
index 4ece14dfd64..58ea6adee6b 100644
--- a/src/CAREUI/icons/DuoTonePaths.json
+++ b/src/CAREUI/icons/DuoTonePaths.json
@@ -68,5 +68,12 @@
     true,
     null,
     "M7.3,6.9v14.45c0,.29.24.53.53.53h1.5c.29,0,.53-.24.53-.53v-4.88h4.28v4.88c0,.29.24.53.53.53h1.5c.29,0,.53-.24.53-.53v-11.5s0-2.94,0-2.94c0-.29-.24-.53-.53-.53H7.83c-.29,0-.53.24-.53.53ZM12.02,13.94c-1.54,0-2.82-1.24-2.82-2.82s1.24-2.82,2.82-2.82,2.82,1.24,2.82,2.82-1.28,2.82-2.82,2.82ZM17.3,5.31H6.74c-.31,0-.56-.25-.56-.56v-2.07c0-.31.25-.56.56-.56h10.56c.31,0,.56.25.56.56v2.07c0,.31-.25.56-.56.56Z"
+  ],
+  "d-health-worker": [
+    24,
+    "M11.67 10C14.06 10 16 8.06 16 5.67C16 3.27 14.06 1.33 11.67 1.33C9.27 1.33 7.33 3.27 7.33 5.67C7.33 8.06 9.27 10 11.67 10Z",
+    true,
+    null,
+    "M10.29 10.66L11.67 14L13.05 10.65C13.41 10.64 13.7 10.64 13.83 10.67C16.54 11.28 19.33 13.06 19.33 14.95V19.66C19.33 21.14 18.14 22.33 16.67 22.33V21.33H13.33V22.33H10V21.33H6.67V22.33C5.19 22.33 4 21.14 4 19.66V14.95C4 13.06 6.8 11.28 9.5 10.67C9.55 10.66 9.87 10.66 10.29 10.66ZM14.33 14V15H13.33V16H14.33V17H15.33V16H16.33V15H15.33V14H14.33Z"
   ]
 }
diff --git a/src/pages/Landing/LandingPage.tsx b/src/pages/Landing/LandingPage.tsx
index b001ccf51b3..d09d5fdb1eb 100644
--- a/src/pages/Landing/LandingPage.tsx
+++ b/src/pages/Landing/LandingPage.tsx
@@ -2,6 +2,7 @@ import careConfig from "@careConfig";
 import { useQuery } from "@tanstack/react-query";
 import { navigate } from "raviger";
 import { useEffect, useRef, useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -13,8 +14,6 @@ import {
   CommandItem,
 } from "@/components/ui/command";
 
-import { LoginHeader } from "@/components/Common/LoginHeader";
-
 import query from "@/Utils/request/query";
 import { PaginatedResponse } from "@/Utils/request/types";
 import { Organization } from "@/types/organization/organization";
@@ -23,6 +22,7 @@ import organizationApi from "@/types/organization/organizationApi";
 const { customLogo, stateLogo, mainLogo } = careConfig;
 
 export function LandingPage() {
+  const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState("");
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOrganization, setSelectedOrganization] =
@@ -43,6 +43,12 @@ export function LandingPage() {
     organization.name.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
+  const orgType = organizations[0]?.metadata?.govt_org_type
+    ? t(
+        `SYSTEM__govt_org_type__${organizations[0]?.metadata?.govt_org_type}`,
+      ).toLowerCase()
+    : "unknown";
+
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -96,110 +102,173 @@ export function LandingPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col">
-      {/* Header */}
-      <div className="w-full p-4">
-        <LoginHeader />
-      </div>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col items-center pt-24">
+    <div className="min-h-screen flex flex-col p-5">
+      {/* Main Content  */}
+      <main className="lg:flex-1 flex flex-col items-center justify-center py-4 md:py-8">
         {/* Logo Section */}
-        {stateLogo && stateLogo.dark && (
-          <div className="mb-2">
-            <img src={stateLogo.dark} alt="Logo" className="h-28 w-auto" />
-          </div>
-        )}
+        <div className="w-full flex flex-col items-center mt-2 md:mt-0">
+          {stateLogo && stateLogo.dark && (
+            <div className="mb-2">
+              <img
+                src={stateLogo.dark}
+                alt="Logo"
+                className="h-20 md:h-28 w-auto"
+              />
+            </div>
+          )}
 
-        <div className="mb-8">
           {(customLogo || mainLogo) && (
-            <>
+            <div className="mb-4 md:mb-8">
               <img
                 src={customLogo?.dark ?? mainLogo?.dark}
                 alt="Logo"
-                className="h-20 w-auto"
+                className="h-16 md:h-20 w-auto"
               />
-            </>
+            </div>
           )}
         </div>
 
         {/* Search Section */}
-        <div className="w-full max-w-[584px] mx-auto space-y-6 px-6">
-          <div className="relative" data-search-container>
-            <div className="rounded-2xl border border-gray-200 hover:shadow-lg transition-shadow">
-              <div className="flex items-center px-4 h-12">
-                <CareIcon icon="l-search" className="h-5 w-5 text-gray-400" />
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={
-                    selectedOrganization
-                      ? selectedOrganization.name
-                      : searchQuery
-                  }
-                  onChange={handleSearchChange}
-                  onClick={handleInputClick}
-                  placeholder="Search..."
-                  className="flex-1 border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
-                />
-                {(searchQuery || selectedOrganization) && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setSearchQuery("");
-                      setSelectedOrganization(null);
-                    }}
-                    className="p-1 hover:bg-gray-100 rounded-full"
-                  >
-                    <CareIcon
-                      icon="l-times"
-                      className="h-4 w-4 text-gray-400"
-                    />
-                  </button>
-                )}
+        <div className="w-full max-w-[620px] mx-auto px-4 sm:px-6 py-4 bg-gray-100 rounded-md">
+          <div className="text-center mb-4 space-x-1">
+            <span className="text-sm md:text-base block sm:inline">
+              <Trans
+                i18nKey="search_facilities"
+                components={{
+                  strong: <strong />,
+                }}
+              />
+            </span>
+          </div>
+          <div className="flex flex-col sm:flex-row items-center gap-2">
+            <div className="relative w-full sm:w-9/12" data-search-container>
+              <div className="rounded-lg border border-gray-200 hover:shadow-lg transition-shadow">
+                <div className="flex items-center px-2 bg-white rounded-lg">
+                  <CareIcon icon="l-search" className="h-5 w-5 text-gray-400" />
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={
+                      selectedOrganization
+                        ? selectedOrganization.name
+                        : searchQuery
+                    }
+                    onChange={handleSearchChange}
+                    onClick={handleInputClick}
+                    placeholder={t(`landing_search_placeholder`, {
+                      orgType,
+                    })}
+                    className="w-full border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
+                  />
+                  {(searchQuery || selectedOrganization) && (
+                    <Button
+                      variant="ghost"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSearchQuery("");
+                        setSelectedOrganization(null);
+                      }}
+                      className="p-1 hover:bg-transparent"
+                    >
+                      <CareIcon
+                        icon="l-times"
+                        className="h-4 w-4 text-gray-400"
+                      />
+                    </Button>
+                  )}
+                </div>
               </div>
+              {isOpen && (
+                <div className="absolute top-full left-0 right-0 mt-1 rounded-md border bg-white shadow-lg z-10">
+                  <Command>
+                    <CommandGroup className="overflow-y-auto max-h-60 md:max-h-80">
+                      {filteredOrganizations.length === 0 ? (
+                        <CommandEmpty>{t("search_no_results")}</CommandEmpty>
+                      ) : (
+                        filteredOrganizations.map((organization) => (
+                          <CommandItem
+                            key={organization.id}
+                            value={organization.name.toLowerCase()}
+                            onSelect={() => {
+                              handleOrganizationSelect(organization.name);
+                            }}
+                            className="cursor-pointer"
+                          >
+                            {organization.name}
+                          </CommandItem>
+                        ))
+                      )}
+                    </CommandGroup>
+                  </Command>
+                </div>
+              )}
             </div>
-
-            {isOpen && (
-              <div className="absolute top-full left-0 right-0 mt-1 rounded-md border bg-white shadow-lg z-10">
-                <Command>
-                  <CommandGroup className="overflow-y-auto max-h-80">
-                    {filteredOrganizations.length === 0 ? (
-                      <CommandEmpty>
-                        Unable to find anything based on your search.
-                      </CommandEmpty>
-                    ) : (
-                      filteredOrganizations.map((organization) => (
-                        <CommandItem
-                          key={organization.id}
-                          value={organization.name.toLowerCase()}
-                          onSelect={() => {
-                            handleOrganizationSelect(organization.name);
-                          }}
-                          className="cursor-pointer"
-                        >
-                          {organization.name}
-                        </CommandItem>
-                      ))
-                    )}
-                  </CommandGroup>
-                </Command>
-              </div>
-            )}
-          </div>
-
-          {/* Search Button */}
-          <div className="flex justify-center">
+            {/* Search Button */}
             <Button
-              variant="primary"
-              className="px-6 h-10"
+              variant="primary_gradient"
+              className="w-full sm:w-3/12"
               onClick={handleSearch}
               disabled={!selectedOrganization}
             >
-              Search Facilities
+              <span className="bg-gradient-to-b from-white/15 to-transparent"></span>
+              {t("search_button")}
             </Button>
           </div>
         </div>
+
+        {/* Centered Dots Image */}
+        <div className="flex justify-center my-6 md:my-8">
+          <img src="/images/dots.svg" alt="" />
+        </div>
+
+        {/* Login Section */}
+        <div className="w-full max-w-[620px] flex flex-col items-center justify-center bg-gray-100 p-4 rounded-lg">
+          <div className="text-sm font-medium mb-4 md:mb-6 text-center">
+            {t("login_already_registered")}
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 w-full max-w-full justify-center">
+            <div className="flex flex-col items-center justify-center gap-5 p-3 rounded-xl shadow bg-white hover:shadow-md transition-all bg-[url('/images/staff_background.png')] bg-auto bg-center bg-no-repeat">
+              <div className="rounded-full bg-green-100 m-2 p-1 aspect-square flex justify-center items-center border-2 border-white shadow">
+                <CareIcon
+                  icon="d-health-worker"
+                  className="w-8 h-8 text-green-700"
+                />
+              </div>
+              <div className="flex flex-col items-center">
+                <Button
+                  variant="outline"
+                  className="w-full text-xs md:text-sm border border-primary-600 text-primary-700 hover:text-primary-800 font-semibold"
+                  onClick={() => navigate(`/login?mode=staff`)}
+                >
+                  {t("staff_login")}
+                </Button>
+                <p className="text-xs mt-2 w-full text-center">
+                  {t("staff_login_description")}
+                </p>
+              </div>
+            </div>
+            <div className="flex flex-col items-center justify-center gap-5 p-3 rounded-xl shadow bg-white hover:shadow-md transition-all bg-[url('/images/patient_background.png')] bg-auto bg-center bg-no-repeat">
+              <div className="rounded-full bg-indigo-100 m-2 p-1 aspect-square flex justify-center items-center border-2 border-white shadow">
+                <CareIcon
+                  icon="d-patient"
+                  className="w-8 h-8 text-indigo-700"
+                />
+              </div>
+              <div className="flex flex-col items-center">
+                <Button
+                  variant="outline"
+                  className="w-full text-xs md:text-sm border border-primary-600 text-primary-700 hover:text-primary-800 font-semibold"
+                  onClick={() => navigate(`/login?mode=patient`)}
+                >
+                  {t("patient_login")}
+                </Button>
+                <p className="text-xs mt-2 w-full text-center">
+                  {t("patient_login_description")}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
       </main>
     </div>
   );


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (5)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (5)</summary><blockquote>

`102-110`: **Use optional chaining for safer property access.**

The static analysis tool correctly identified a potential safety issue with accessing nested properties.

```diff
-          {stateLogo && stateLogo.dark && (
+          {stateLogo?.dark && (
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 102-102: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

---

`148-148`: **Placeholder text is clear but could be more specific.**

The placeholder text "Enter district name to find facilities" correctly guides users, but it could be slightly more explicit about the expected action.

```diff
-                    placeholder="Enter district name to find facilities."
+                    placeholder="Enter district name to search for healthcare facilities."
```

---

`241-241`: **Fix grammatical error in login button text.**

There's a grammatical error in both login button texts - "Login in as" should be "Log in as".

```diff
-                Login in as Staff
+                Log in as Staff
```

```diff
-                Login in as Patient
+                Log in as Patient
```


Also applies to: 270-270

---

`220-225`: **Consider extracting background image paths to constants.**

Background image paths are hardcoded in the style objects. For better maintainability, consider extracting these paths to constants at the top of the file.

```diff
// At the top of the file with other constants
+ const BACKGROUND_IMAGES = {
+   staff: "/images/staff_background.png",
+   patient: "/images/paitent_background.png"
+ };

// Then in the component
              style={{
-                backgroundImage: 'url("/images/staff_background.png")',
+                backgroundImage: `url(${BACKGROUND_IMAGES.staff})`,
                backgroundSize: "auto",
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat",
              }}
```


Also applies to: 250-255

---

`251-251`: **Fix typo in image path for patient background.**

There's a typo in the patient background image path - "paitent" should be "patient".

```diff
-                backgroundImage: 'url("/images/paitent_background.png")',
+                backgroundImage: 'url("/images/patient_background.png")',
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 4b132b1081bcd557afd463e25477251c5427e718 and 725761caaf14b9974e86255e00a16eebc26ccf96.

</details>

<details>
<summary>⛔ Files ignored due to path filters (4)</summary>

* `public/images/health_worker.svg` is excluded by `!**/*.svg`
* `public/images/paitent_background.png` is excluded by `!**/*.png`
* `public/images/patient_icon.svg` is excluded by `!**/*.svg`
* `public/images/staff_background.png` is excluded by `!**/*.png`

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/pages/Landing/LandingPage.tsx` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/pages/Landing/LandingPage.tsx</summary>

[error] 102-102: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (3)</summary>

* GitHub Check: Redirect rules - care-ohc
* GitHub Check: Header rules - care-ohc
* GitHub Check: Pages changed - care-ohc

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (1)</summary>

`97-99`: **Overall design implementation looks good.**

The redesigned layout follows modern practices with responsive design patterns using flexbox and proper spacing. The implementation aligns well with the PR objective of redesigning the public page according to the Figma design.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T19:52:29Z
user: login: AdityaJ2305
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-06T19:56:18Z
user: login: cherish2003
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T20:08:28Z
user: login: AdityaJ2305
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-06T20:13:28Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>public/locale/en.json (1)</summary><blockquote>

`2129-2146`: _🛠️ Refactor suggestion_

**Add missing translation key for search placeholder.**

You need to add a translation key for the search input placeholder that's currently hardcoded in LandingPage.tsx.


Add this entry:
```diff
  "search_facilities": "Search for available facilities to book an appointment",
  "search_facilities_note": "(for new patients)",
+ "search_placeholder": "Enter district name to find facilities.",
  "search_no_results": "Unable to find anything based on your search.",
```

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (1)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (1)</summary><blockquote>

`101-113`: **Consider using optional chaining for stateLogo.**

The static analysis hint suggests using optional chaining for the stateLogo condition.


```diff
-          {stateLogo && stateLogo.dark && (
+          {stateLogo?.dark && (
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 104-104: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 725761caaf14b9974e86255e00a16eebc26ccf96 and ebf284a11e89564b6a85fdd36d5fdba75a1b4641.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `public/locale/en.json` (8 hunks)
* `src/pages/Landing/LandingPage.tsx` (3 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/pages/Landing/LandingPage.tsx</summary>

[error] 104-104: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (3)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (2)</summary>

`212-277`: **Well-structured login section with proper translations.**

The login section is well-implemented with a clean layout, appropriate styling, and proper use of translations for all text elements. The navigation to different login modes is correctly implemented.

---

`126-205`: **Search section redesigned with improved UI and translations.**

The search section has been nicely redesigned with an improved layout, proper use of translations for most text elements, and clear visual feedback for user interactions.

</details>
<details>
<summary>public/locale/en.json (1)</summary>

`1429-1430`: **Login section translations implemented correctly.**

The translation for the login section headline is properly defined.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T18:49:08Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (4)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (4)</summary><blockquote>

`103-112`: **Consider using optional chaining for stateLogo.**

The current implementation checks for both `stateLogo` and `stateLogo.dark`, which could be simplified using optional chaining.

```diff
-          {stateLogo && stateLogo.dark && (
+          {stateLogo?.dark && (
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 104-104: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

---

`207-210`: **Missing alt text for decorative image.**

The dots image is missing meaningful alternative text, which is important for screen readers. Since this appears to be a decorative element, you should use an empty alt attribute to indicate it's decorative.

```diff
-          <img src="/images/dots.svg" alt="" />
+          <img src="/images/dots.svg" alt="" aria-hidden="true" />
```

---

`221-225`: **Consider using CSS module or styled-components for background styling.**

Inline styles work but can make maintenance more difficult. Consider extracting the background styling to CSS modules or a styled component for better maintainability.

---

`251-255`: **Typo in background image filename.**

The filename contains a typo: "paitent_background.png" instead of "patient_background.png".

```diff
-                backgroundImage: 'url("/images/paitent_background.png")',
+                backgroundImage: 'url("/images/patient_background.png")',
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between ebf284a11e89564b6a85fdd36d5fdba75a1b4641 and 4f1df696ae0991e1ca65a0a5851068848739e949.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `public/locale/en.json` (8 hunks)
* `src/pages/Landing/LandingPage.tsx` (3 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* public/locale/en.json

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/pages/Landing/LandingPage.tsx</summary>

[error] 104-104: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (13)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (13)</summary>

`5-5`: **Good addition of i18n support.**

Adding the `useTranslation` hook is a good first step toward internationalizing the landing page, as mentioned in the past review comments.

---

`25-25`: **Great implementation of translation hook.**

Properly extracting the translation function from the hook for use throughout the component.

---

`99-101`: **Responsive layout improvements.**

The simplified main layout with proper flex properties and responsive padding will adapt well to different screen sizes.

---

`119-119`: **Consistent responsive height scaling.**

Good adjustment of image height for better visual hierarchy across device sizes.

---

`126-134`: **Well-structured search section header.**

The search section now has a clear visual hierarchy with proper spacing and responsive text formatting.

---

`135-168`: **Enhanced search input with accessibility improvements.**

The refactored search input adds several UX improvements:
- Clear visual indication of interactivity
- Proper icon placement
- Clear button for resetting input
- Improved responsive layout

---

`150-150`: **Properly implemented translation for placeholder text.**

Good job addressing the previous review comment about translating the placeholder text.

---

`170-193`: **Well-implemented dropdown for search results.**

The search results dropdown is properly positioned with good accessibility features and performance optimizations (using CommandGroup with overflow handling).

---

`175-175`: **Good implementation of "no results" message translation.**

The CommandEmpty component properly uses the translation function for the no results message.

---

`196-203`: **Responsive search button with translation.**

The search button has been properly updated with responsive sizing and translated text.

---

`213-216`: **Clean implementation of login section heading with translation.**

The login section heading is well-structured and properly uses the translation function.

---

`217-276`: **Well-designed responsive login options.**

The login section provides a clear visual distinction between staff and patient login options with:
- Consistent styling
- Responsive grid layout
- Appropriate icons and backgrounds
- Descriptive text with translations

This implementation aligns well with the PR objective of redesigning the public page according to the Figma design.

---

`98-279`: <details>
<summary>✅ Verification successful</summary>

**Verify all translation keys exist in locale files.**

The component uses several translation keys including "search_facilities", "search_facilities_note", "search_placeholder", "search_no_results", "login_already_registered", "staff_login", "staff_login_description", "patient_login", and "patient_login_description". Ensure all these keys are defined in your locale files.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if all translation keys used in LandingPage.tsx exist in the English locale file

# Define the translation keys used in the component
TRANSLATION_KEYS=(
  "search_facilities"
  "search_facilities_note"
  "search_placeholder"
  "search_no_results"
  "login_already_registered"
  "staff_login"
  "staff_login_description"
  "patient_login"
  "patient_login_description"
  "search_button"
)

# Find the English locale file
LOCALE_FILE=$(fd -e json -p "en.json" public/locales)

if [ -z "$LOCALE_FILE" ]; then
  echo "❌ Could not find English locale file"
  exit 1
fi

echo "📂 Found locale file: $LOCALE_FILE"
echo "🔍 Checking for translation keys..."

# Check each translation key
for key in "${TRANSLATION_KEYS[@]}"; do
  if grep -q "\"$key\":" "$LOCALE_FILE"; then
    echo "✅ Found key: $key"
  else
    echo "❌ Missing key: $key"
  fi
done
```

Length of output: 498

---

**Translation Keys Verification: Manual Check Required**

It appears the initial script couldn’t locate the English locale file at the expected path ("public/locales"). Please verify that the locale file (typically named "en.json") exists and adjust the search path if needed. Alternatively, run a recursive search with the following script to locate the file and check for the required translation keys:




**Next Steps:**
- Confirm that the locale file is in the correct location (or update its path in your scripts).
- Ensure all translation keys ("search_facilities", "search_facilities_note", "search_placeholder", "search_no_results", "login_already_registered", "staff_login", "staff_login_description", "patient_login", "patient_login_description", "search_button") are defined.
- If adjustments are needed, update the locale file accordingly.



---

🏁 Script executed:

```shell
#!/bin/bash
# Recursively search for en.json files and verify all required translation keys

# Recursively find all en.json files in the repository
FILE_PATHS=$(fd -e json en.json)

if [ -z "$FILE_PATHS" ]; then
  echo "❌ No en.json file found in the repository."
  exit 1
fi

echo "📂 Located en.json file(s):"
echo "$FILE_PATHS"
echo ""

# Define the translation keys to check
TRANSLATION_KEYS=(
  "search_facilities"
  "search_facilities_note"
  "search_placeholder"
  "search_no_results"
  "login_already_registered"
  "staff_login"
  "staff_login_description"
  "patient_login"
  "patient_login_description"
  "search_button"
)

# Loop through each found file and check for the translation keys
for FILE in $FILE_PATHS; do
  echo "🔍 Checking translation keys in: $FILE"
  for KEY in "${TRANSLATION_KEYS[@]}"; do
    if grep -q "\"$KEY\":" "$FILE"; then
      echo "✅ Found key: $KEY"
    else
      echo "❌ Missing key: $KEY in $FILE"
    fi
  done
  echo ""
done
```

Length of output: 2287

---



</details>

**Translations Verified in en.json**

All translation keys used in LandingPage.tsx ("search_facilities", "search_facilities_note", "search_placeholder", "search_no_results", "login_already_registered", "staff_login", "staff_login_description", "patient_login", "patient_login_description", "search_button") have been found in the locale file located at public/locale/en.json. No changes are required.

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 104-104: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T19:03:59Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (2)</summary><blockquote>

`107-116`: **Consider using optional chaining for stateLogo.**

The conditional check for stateLogo could be simplified using optional chaining.

```diff
-          {stateLogo && stateLogo.dark && (
+          {stateLogo?.dark && (
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 108-108: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

---

`217-220`: **Consider adding more descriptive alt text for the dots image.**

While empty alt text is acceptable for decorative images, adding a more descriptive alt text might improve accessibility.

```diff
-          <img src="/images/dots.svg" alt="" />
+          <img src="/images/dots.svg" alt="Decorative dots" role="presentation" />
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 4f1df696ae0991e1ca65a0a5851068848739e949 and 46a478c025ab465b7399d27ae072ea352f6c67ad.

</details>

<details>
<summary>⛔ Files ignored due to path filters (2)</summary>

* `public/images/dots.svg` is excluded by `!**/*.svg`
* `public/images/patient_background.png` is excluded by `!**/*.png`

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `public/locale/en.json` (9 hunks)
* `src/CAREUI/icons/DuoTonePaths.json` (1 hunks)
* `src/pages/Landing/LandingPage.tsx` (4 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/pages/Landing/LandingPage.tsx</summary>

[error] 108-108: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (3)</summary>

* GitHub Check: Redirect rules - care-ohc
* GitHub Check: Header rules - care-ohc
* GitHub Check: Pages changed - care-ohc

</details>

<details>
<summary>🔇 Additional comments (16)</summary><blockquote>

<details>
<summary>src/CAREUI/icons/DuoTonePaths.json (1)</summary>

`72-77`: **The new "d-health-worker" icon looks good.**

The newly added icon follows the existing pattern for duo-tone icons and will be utilized in the redesigned landing page for the staff login section.

</details>
<details>
<summary>src/pages/Landing/LandingPage.tsx (8)</summary>

`5-5`: **Appropriate use of i18n imports.**

Good addition of the `Trans` and `useTranslation` imports, which are used throughout the redesigned page to support internationalization.

---

`46-48`: **Good dynamic variable for organization type.**

Using a translated and dynamic organization type for the search placeholder is a nice touch that improves the user experience by providing context-specific messaging.

---

`103-105`: **Well-structured responsive layout.**

The flex layout provides a good foundation for the redesigned page, ensuring proper spacing and alignment on different screen sizes.

---

`130-140`: **Improved search section with proper internationalization.**

The redesigned search section with the Trans component for formatted text is well-implemented. The background color and rounded corners improve visual appeal.

---

`156-158`: **Proper use of dynamic placeholders in translations.**

Good implementation of the placeholder with dynamic orgType parameter, ensuring the search experience is contextually relevant.

---

`238-242`: **Good use of the new health worker icon.**

The newly added "d-health-worker" icon from the DuoTonePaths.json file is appropriately used here in the staff login section.

---

`222-285`: **Well-designed login section with clear user options.**

The login section provides a clear distinction between staff and patient login options, with appropriate icons, descriptions, and visual cues. All text is properly internationalized.

---

`230-235`: <details>
<summary>❓ Verification inconclusive</summary>

**Consider handling potential missing background images.**

The background images are hardcoded URLs. Consider adding a fallback or error handling in case these images fail to load.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if the background images exist in the public directory
echo "Checking for background images..."
if fd -t f "staff_background.png" public/images; then
  echo "✅ Staff background image found"
else
  echo "❌ Staff background image not found"
fi

if fd -t f "patient_background.png" public/images; then
  echo "✅ Patient background image found"
else
  echo "❌ Patient background image not found"
fi

if fd -t f "dots.svg" public/images; then
  echo "✅ Dots image found"
else
  echo "❌ Dots image not found"
fi
```

Length of output: 489

---



</details>

**Enhanced Background Image Resilience**

Although the image files (including `staff_background.png`, `patient_background.png`, and `dots.svg`) are present in the public/images directory, the code in `src/pages/Landing/LandingPage.tsx` (lines 230-235) still relies on hardcoded URLs. In a runtime scenario (e.g., network issues or file access problems), these images might fail to load, resulting in a degraded user experience.

- Consider implementing an error handler (e.g., using an `onError` event or a fallback CSS/background color) to ensure that the UI degrades gracefully if a background image is unavailable.
- Evaluate the potential for a dynamic import or conditional rendering strategy that can provide a default background when the intended image fails to load.

</details>
<details>
<summary>public/locale/en.json (7)</summary>

`1339-1339`: **New Search Placeholder Entry Added**  
The key `"landing_search_placeholder": "Enter {{orgType}} name to find facilities."` is correctly added to support the dynamic placeholder on the public page as per the new design.

---

`1430-1430`: **New Login Prompt for Registered Users**  
The new key `"login_already_registered": "Already registered? Log in to your account."` correctly replaces any hardcoded text to ensure consistency in user prompts.

---

`1770-1771`: **New Patient Login Translations Added**  
The added keys:  
- `"patient_login": "Log in as Patient"`  
- `"patient_login_description": "For patients to book and manage their appointments."`  
are well‑formed and now use the correct phrasing (“Log in as …”) as previously suggested.

---

`2115-2115`: **New Search Button Label Added**  
The new key `"search_button": "Search Facilities"` is in line with the redesign requirements and should properly drive the UI button text.

---

`2130-2130`: **New “Search Facilities” Description Added**  
The entry `"search_facilities": "Search for available facilities to book an appointment <strong>(for new patients)</strong>"` correctly provides additional context and uses HTML for emphasis. Just ensure that the rendering component safely handles HTML content.

---

`2140-2140`: **New “No Results” Message Added**  
The new translation `"search_no_results": "Unable to find anything based on your search."` provides a clear fallback message when no search results are found and is appropriately phrased.

---

`2294-2295`: **Staff Login Translations Verified**  
The updated entries:  
- `"staff_login": "Log in as Staff"`  
- `"staff_login_description": "For hospital staff: doctors, nurses, and administrators."`  
are correctly phrased and resolve the previous typo issue.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T21:47:27Z
user: login: Jacobjeevan
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T21:51:16Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (2)</summary><blockquote>

`108-116`: **Use optional chaining for more concise code.**

The stateLogo check could be simplified with optional chaining.

```diff
-          {stateLogo && stateLogo.dark && (
+          {stateLogo?.dark && (
             <div className="mb-2">
               <img
                 src={stateLogo.dark}
                 alt="Logo"
                 className="h-20 md:h-28 w-auto"
               />
             </div>
           )}
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 108-108: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

---

`227-284`: **Refactor login options into a reusable component to reduce duplication.**

The staff and patient login sections have nearly identical structure with just different values. Consider extracting this into a reusable component to improve maintainability.

You could create a component like:

```tsx
type LoginOptionProps = {
  type: 'staff' | 'patient';
  icon: string;
  iconBgClass: string;
  iconTextClass: string;
  backgroundImage: string;
  loginText: string;
  descriptionText: string;
};

const LoginOption = ({
  type,
  icon,
  iconBgClass,
  iconTextClass,
  backgroundImage,
  loginText,
  descriptionText,
}: LoginOptionProps) => (
  <div
    className="flex flex-col items-center justify-center gap-5 p-3 rounded-xl shadow bg-white hover:shadow-md transition-all"
    style={{
      backgroundImage: `url("${backgroundImage}")`,
      backgroundSize: "auto",
      backgroundPosition: "center",
      backgroundRepeat: "no-repeat",
    }}
  >
    <div className={`rounded-full ${iconBgClass} m-2 p-1 aspect-square flex justify-center items-center border-2 border-white shadow`}>
      <CareIcon
        icon={icon}
        className={`w-8 h-8 ${iconTextClass}`}
      />
    </div>
    <div className="flex flex-col items-center">
      <Button
        variant="outline"
        className="w-full text-xs md:text-sm border border-primary-600 text-primary-700 hover:text-primary-800 font-semibold"
        onClick={() => navigate(`/login?mode=${type}`)}
      >
        {loginText}
      </Button>
      <p className="text-xs mt-2 w-full text-center">
        {descriptionText}
      </p>
    </div>
  </div>
);
```

Then use it in your component:

```tsx
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 w-full max-w-full justify-center">
  <LoginOption
    type="staff"
    icon="d-health-worker"
    iconBgClass="bg-green-100"
    iconTextClass="text-green-700"
    backgroundImage="/images/staff_background.png"
    loginText={t("staff_login")}
    descriptionText={t("staff_login_description")}
  />
  <LoginOption
    type="patient"
    icon="d-patient"
    iconBgClass="bg-indigo-100"
    iconTextClass="text-indigo-700"
    backgroundImage="/images/patient_background.png"
    loginText={t("patient_login")}
    descriptionText={t("patient_login_description")}
  />
</div>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 46a478c025ab465b7399d27ae072ea352f6c67ad and b8b255408f5080180f88ca72b4a53e8de7acf8e7.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/pages/Landing/LandingPage.tsx` (4 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/pages/Landing/LandingPage.tsx</summary>

[error] 108-108: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (4)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (4)</summary>

`5-5`: **Great implementation of internationalization!**

You've successfully added translations for all text elements in the page, addressing the previous feedback. All the translation keys mentioned in the review comments are now properly implemented.



Also applies to: 25-25, 46-48, 134-139, 156-158, 184-184, 212-212, 225-225, 249-249, 252-253, 277-277, 280-281

---

`130-215`: **Search section redesign looks good.**

The redesigned search section with improved styling, hover effects, and clear icon is well implemented. The translation usage for placeholder and button text is correctly done.

---

`217-220`: **Clean addition of centered visual element.**

The centered dots image is a nice visual element that helps break up the page sections.

---

`222-285`: **Well-structured login section with clear user options.**

The login section provides a clear distinction between staff and patient login options, with appropriate visual cues (icons and backgrounds) and descriptive text.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-07T21:51:30Z
user: login: rithviknishad
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-12T11:34:22Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>🧹 Nitpick comments (3)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (3)</summary><blockquote>

`108-116`: **Use optional chaining for stateLogo access**

The current conditional check can be improved using optional chaining for better code readability and safety.


```diff
-          {stateLogo && stateLogo.dark && (
+          {stateLogo?.dark && (
            <div className="mb-2">
              <img
                src={stateLogo.dark}
                alt="Logo"
                className="h-20 md:h-28 w-auto"
              />
            </div>
          )}
```

<details>
<summary>🧰 Tools</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

[error] 108-108: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

---

`110-113`: **Improve image alt text for accessibility**

The current alt text "Logo" is not descriptive enough. For better accessibility, provide more context about which logo this is.


```diff
              <img
                src={stateLogo.dark}
-                alt="Logo"
+                alt="State Government Logo"
                className="h-20 md:h-28 w-auto"
              />
```

---

`121-123`: **Improve image alt text for accessibility**

Similar to the state logo, this alt text could be more descriptive.


```diff
              <img
                src={customLogo?.dark ?? mainLogo?.dark}
-                alt="Logo"
+                alt="Healthcare System Logo"
                className="h-16 md:h-20 w-auto"
              />
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between b8b255408f5080180f88ca72b4a53e8de7acf8e7 and 37a43aa03902706c87a61ce553d6099b11c70c8c.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `public/locale/en.json` (7 hunks)
* `src/pages/Landing/LandingPage.tsx` (4 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* public/locale/en.json

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🪛 Biome (1.9.4)</summary>

<details>
<summary>src/pages/Landing/LandingPage.tsx</summary>

[error] 108-108: Change to an optional chain.

Unsafe fix: Change to an optional chain.


(lint/complexity/useOptionalChain)

</details>

</details>

</details>

<details>
<summary>🔇 Additional comments (7)</summary><blockquote>

<details>
<summary>src/pages/Landing/LandingPage.tsx (7)</summary>

`156-159`: **Good implementation of internationalized placeholder text**

The placeholder text now correctly uses the translation function with dynamic content. This addresses the previous comment about missing translations.

---

`184-184`: **Properly internationalized "no results" message**

Good implementation of i18n for the empty search results message.

---

`211-212`: **Good implementation of internationalized button text**

The search button now correctly uses the translation function instead of hardcoded text.

---

`217-220`: **Empty alt text is appropriate for decorative images**

The dots image has an empty alt attribute, which is the correct approach for purely decorative elements.

---

`222-269`: **Well-structured login section with proper internationalization**

The login section is well-designed with clear separation between staff and patient options. All text elements use the translation function as required, and the UI is responsive with appropriate styling.

---

`5-5`: **Translation implementation successfully addresses previous feedback**

The addition of internationalization support addresses the previous review comments about missing translations for UI text. Good work implementing this across the component.

---

`222-226`: <details>
<summary>✅ Verification successful</summary>

**Verify that all translation keys are added to the locale files**

Make sure that all translation keys used in this component (like "login_already_registered") are defined in your locale files as mentioned in previous review comments.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check for translation keys in locale files
echo "Searching for locale files and translation keys..."

# First locate English locale files in the project
echo "Locating English locale file(s)..."
LOCALE_FILES=$(find . -type f -name "en.json" -o -name "en-US.json" | grep -v "node_modules")

echo "Found locale files: $LOCALE_FILES"

# Define all translation keys used in this component
KEYS=(
  "landing_search_placeholder"
  "search_facilities"
  "search_no_results"
  "search_button"
  "login_already_registered"
  "staff_login"
  "staff_login_description"
  "patient_login"
  "patient_login_description"
  "SYSTEM__govt_org_type__district"
)

# Check each locale file for the required keys
for LOCALE_FILE in $LOCALE_FILES; do
  echo "Checking keys in $LOCALE_FILE:"
  for KEY in "${KEYS[@]}"; do
    if grep -q "\"$KEY\"" "$LOCALE_FILE"; then
      echo "✅ Found key: $KEY"
    else
      echo "❌ Missing key: $KEY"
    fi
  done
  echo ""
done
```

Length of output: 2399

---



</details>

**Translation Keys Verified – No Issues Found**  
All translation keys referenced in the component are present in the locale file (./public/locale/en.json). No changes are required regarding locale key management in this section.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-15T08:29:18Z
user: login: nihal467
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-20T10:14:28Z
user: login: rithviknishad
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-03-20T10:43:41Z
user: login: rithviknishad
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-20T19:11:53Z

Review comments:
diff_hunk: @@ -96,110 +94,187 @@ export function LandingPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col">
-      {/* Header */}
-      <div className="w-full p-4">
-        <LoginHeader />
-      </div>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col items-center pt-24">
+    <div className="min-h-screen flex flex-col p-5">
+      {/* Main Content  */}
+      <main className="lg:flex-1 flex flex-col items-center justify-center py-4 md:py-8">
         {/* Logo Section */}
-        {stateLogo && stateLogo.dark && (
-          <div className="mb-2">
-            <img src={stateLogo.dark} alt="Logo" className="h-28 w-auto" />
-          </div>
-        )}
+        <div className="w-full flex flex-col items-center mt-2 md:mt-0">
+          {stateLogo && stateLogo.dark && (
+            <div className="mb-2">
+              <img
+                src={stateLogo.dark}
+                alt="Logo"
+                className="h-20 md:h-28 w-auto"
+              />
+            </div>
+          )}
 
-        <div className="mb-8">
           {(customLogo || mainLogo) && (
-            <>
+            <div className="mb-4 md:mb-8">
               <img
                 src={customLogo?.dark ?? mainLogo?.dark}
                 alt="Logo"
-                className="h-20 w-auto"
+                className="h-16 md:h-20 w-auto"
               />
-            </>
+            </div>
           )}
         </div>
 
         {/* Search Section */}
-        <div className="w-full max-w-[584px] mx-auto space-y-6 px-6">
-          <div className="relative" data-search-container>
-            <div className="rounded-2xl border border-gray-200 hover:shadow-lg transition-shadow">
-              <div className="flex items-center px-4 h-12">
-                <CareIcon icon="l-search" className="h-5 w-5 text-gray-400" />
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={
-                    selectedOrganization
-                      ? selectedOrganization.name
-                      : searchQuery
-                  }
-                  onChange={handleSearchChange}
-                  onClick={handleInputClick}
-                  placeholder="Search..."
-                  className="flex-1 border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
-                />
-                {(searchQuery || selectedOrganization) && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setSearchQuery("");
-                      setSelectedOrganization(null);
-                    }}
-                    className="p-1 hover:bg-gray-100 rounded-full"
-                  >
-                    <CareIcon
-                      icon="l-times"
-                      className="h-4 w-4 text-gray-400"
-                    />
-                  </button>
-                )}
+        <div className="w-full max-w-[620px] mx-auto px-4 sm:px-6 py-4 bg-gray-100 rounded-md">
+          <div className="text-center mb-4">
+            <span className="text-sm md:text-base block sm:inline">
+              Search for available facilities to book an appointment
path: src/pages/Landing/LandingPage.tsx
user: login: AdityaJ2305
body: i18n translation missing for all text
created_at: 2025-03-06T19:56:18Z
author_association: MEMBER
diff_hunk: @@ -96,110 +94,187 @@ export function LandingPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col">
-      {/* Header */}
-      <div className="w-full p-4">
-        <LoginHeader />
-      </div>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col items-center pt-24">
+    <div className="min-h-screen flex flex-col p-5">
+      {/* Main Content  */}
+      <main className="lg:flex-1 flex flex-col items-center justify-center py-4 md:py-8">
         {/* Logo Section */}
-        {stateLogo && stateLogo.dark && (
-          <div className="mb-2">
-            <img src={stateLogo.dark} alt="Logo" className="h-28 w-auto" />
-          </div>
-        )}
+        <div className="w-full flex flex-col items-center mt-2 md:mt-0">
+          {stateLogo && stateLogo.dark && (
+            <div className="mb-2">
+              <img
+                src={stateLogo.dark}
+                alt="Logo"
+                className="h-20 md:h-28 w-auto"
+              />
+            </div>
+          )}
 
-        <div className="mb-8">
           {(customLogo || mainLogo) && (
-            <>
+            <div className="mb-4 md:mb-8">
               <img
                 src={customLogo?.dark ?? mainLogo?.dark}
                 alt="Logo"
-                className="h-20 w-auto"
+                className="h-16 md:h-20 w-auto"
               />
-            </>
+            </div>
           )}
         </div>
 
         {/* Search Section */}
-        <div className="w-full max-w-[584px] mx-auto space-y-6 px-6">
-          <div className="relative" data-search-container>
-            <div className="rounded-2xl border border-gray-200 hover:shadow-lg transition-shadow">
-              <div className="flex items-center px-4 h-12">
-                <CareIcon icon="l-search" className="h-5 w-5 text-gray-400" />
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={
-                    selectedOrganization
-                      ? selectedOrganization.name
-                      : searchQuery
-                  }
-                  onChange={handleSearchChange}
-                  onClick={handleInputClick}
-                  placeholder="Search..."
-                  className="flex-1 border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
-                />
-                {(searchQuery || selectedOrganization) && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setSearchQuery("");
-                      setSelectedOrganization(null);
-                    }}
-                    className="p-1 hover:bg-gray-100 rounded-full"
-                  >
-                    <CareIcon
-                      icon="l-times"
-                      className="h-4 w-4 text-gray-400"
-                    />
-                  </button>
-                )}
+        <div className="w-full max-w-[620px] mx-auto px-4 sm:px-6 py-4 bg-gray-100 rounded-md">
+          <div className="text-center mb-4">
+            <span className="text-sm md:text-base block sm:inline">
+              Search for available facilities to book an appointment
path: src/pages/Landing/LandingPage.tsx
user: login: cherish2003
body: For the public page by default their is no translation 
created_at: 2025-03-06T20:08:28Z
author_association: CONTRIBUTOR
diff_hunk: @@ -96,110 +94,187 @@ export function LandingPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col">
-      {/* Header */}
-      <div className="w-full p-4">
-        <LoginHeader />
-      </div>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col items-center pt-24">
+    <div className="min-h-screen flex flex-col p-5">
+      {/* Main Content  */}
+      <main className="lg:flex-1 flex flex-col items-center justify-center py-4 md:py-8">
         {/* Logo Section */}
-        {stateLogo && stateLogo.dark && (
-          <div className="mb-2">
-            <img src={stateLogo.dark} alt="Logo" className="h-28 w-auto" />
-          </div>
-        )}
+        <div className="w-full flex flex-col items-center mt-2 md:mt-0">
+          {stateLogo && stateLogo.dark && (
+            <div className="mb-2">
+              <img
+                src={stateLogo.dark}
+                alt="Logo"
+                className="h-20 md:h-28 w-auto"
+              />
+            </div>
+          )}
 
-        <div className="mb-8">
           {(customLogo || mainLogo) && (
-            <>
+            <div className="mb-4 md:mb-8">
               <img
                 src={customLogo?.dark ?? mainLogo?.dark}
                 alt="Logo"
-                className="h-20 w-auto"
+                className="h-16 md:h-20 w-auto"
               />
-            </>
+            </div>
           )}
         </div>
 
         {/* Search Section */}
-        <div className="w-full max-w-[584px] mx-auto space-y-6 px-6">
-          <div className="relative" data-search-container>
-            <div className="rounded-2xl border border-gray-200 hover:shadow-lg transition-shadow">
-              <div className="flex items-center px-4 h-12">
-                <CareIcon icon="l-search" className="h-5 w-5 text-gray-400" />
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={
-                    selectedOrganization
-                      ? selectedOrganization.name
-                      : searchQuery
-                  }
-                  onChange={handleSearchChange}
-                  onClick={handleInputClick}
-                  placeholder="Search..."
-                  className="flex-1 border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
-                />
-                {(searchQuery || selectedOrganization) && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setSearchQuery("");
-                      setSelectedOrganization(null);
-                    }}
-                    className="p-1 hover:bg-gray-100 rounded-full"
-                  >
-                    <CareIcon
-                      icon="l-times"
-                      className="h-4 w-4 text-gray-400"
-                    />
-                  </button>
-                )}
+        <div className="w-full max-w-[620px] mx-auto px-4 sm:px-6 py-4 bg-gray-100 rounded-md">
+          <div className="text-center mb-4">
+            <span className="text-sm md:text-base block sm:inline">
+              Search for available facilities to book an appointment
path: src/pages/Landing/LandingPage.tsx
user: login: AdityaJ2305
body: add it for en.json , rest will be handled by crowdin 
created_at: 2025-03-06T20:13:27Z
author_association: MEMBER
diff_hunk: @@ -96,110 +96,185 @@ export function LandingPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col">
-      {/* Header */}
-      <div className="w-full p-4">
-        <LoginHeader />
-      </div>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col items-center pt-24">
+    <div className="min-h-screen flex flex-col p-5">
+      {/* Main Content  */}
+      <main className="lg:flex-1 flex flex-col items-center justify-center py-4 md:py-8">
         {/* Logo Section */}
-        {stateLogo && stateLogo.dark && (
-          <div className="mb-2">
-            <img src={stateLogo.dark} alt="Logo" className="h-28 w-auto" />
-          </div>
-        )}
+        <div className="w-full flex flex-col items-center mt-2 md:mt-0">
+          {stateLogo && stateLogo.dark && (
+            <div className="mb-2">
+              <img
+                src={stateLogo.dark}
+                alt="Logo"
+                className="h-20 md:h-28 w-auto"
+              />
+            </div>
+          )}
 
-        <div className="mb-8">
           {(customLogo || mainLogo) && (
-            <>
+            <div className="mb-4 md:mb-8">
               <img
                 src={customLogo?.dark ?? mainLogo?.dark}
                 alt="Logo"
-                className="h-20 w-auto"
+                className="h-16 md:h-20 w-auto"
               />
-            </>
+            </div>
           )}
         </div>
 
         {/* Search Section */}
-        <div className="w-full max-w-[584px] mx-auto space-y-6 px-6">
-          <div className="relative" data-search-container>
-            <div className="rounded-2xl border border-gray-200 hover:shadow-lg transition-shadow">
-              <div className="flex items-center px-4 h-12">
-                <CareIcon icon="l-search" className="h-5 w-5 text-gray-400" />
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={
-                    selectedOrganization
-                      ? selectedOrganization.name
-                      : searchQuery
-                  }
-                  onChange={handleSearchChange}
-                  onClick={handleInputClick}
-                  placeholder="Search..."
-                  className="flex-1 border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
-                />
-                {(searchQuery || selectedOrganization) && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setSearchQuery("");
-                      setSelectedOrganization(null);
-                    }}
-                    className="p-1 hover:bg-gray-100 rounded-full"
-                  >
-                    <CareIcon
-                      icon="l-times"
-                      className="h-4 w-4 text-gray-400"
-                    />
-                  </button>
-                )}
+        <div className="w-full max-w-[620px] mx-auto px-4 sm:px-6 py-4 bg-gray-100 rounded-md">
+          <div className="text-center mb-4">
+            <span className="text-sm md:text-base block sm:inline">
+              {t("search_facilities")}
+            </span>
+            <span className="lg:ml-1 font-bold text-sm md:text-base block sm:inline">
+              {t("search_facilities_note")}
+            </span>
+          </div>
+          <div className="flex flex-col sm:flex-row items-center space-y-3 sm:space-y-0 sm:space-x-4">
+            <div className="relative w-full" data-search-container>
+              <div className="rounded-lg border border-gray-200 hover:shadow-lg transition-shadow">
+                <div className="flex items-center px-4 h-10 sm:h-11 md:h-12 bg-white rounded-lg">
+                  <CareIcon icon="l-search" className="h-5 w-5 text-gray-400" />
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={
+                      selectedOrganization
+                        ? selectedOrganization.name
+                        : searchQuery
+                    }
+                    onChange={handleSearchChange}
+                    onClick={handleInputClick}
+                    placeholder="Enter district name to find facilities."
+                    className="flex-1 border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
path: src/pages/Landing/LandingPage.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Missing translation for search input placeholder text.**

The placeholder text "Enter district name to find facilities." is hardcoded in the input field. This should be using the translation function for consistency with other UI text.


Apply this change:
```diff
-                    placeholder="Enter district name to find facilities."
+                    placeholder={t("search_placeholder")}
```

Don't forget to add the corresponding "search_placeholder" entry in your locale files.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
                    onClick={handleInputClick}
                    placeholder={t("search_placeholder")}
                    className="flex-1 border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-07T18:49:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1766,6 +1766,8 @@
   "patient_files": "Patient Files",
   "patient_information": "Patient Information",
   "patient_is_deceased": "Patient is deceased",
+  "patient_login": "Login in as Patient",
+  "patient_login_description": "For patients to book and manage their appointments.",
path: public/locale/en.json
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in login translation strings.**

There's a grammatical error in these strings - "Login in as" should be "Log in as".


```diff
-  "patient_login": "Login in as Patient",
+  "patient_login": "Log in as Patient",
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  "patient_login": "Log in as Patient",
  "patient_login_description": "For patients to book and manage their appointments.",
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits 1fdd91f to 37a43aa
created_at: 2025-03-07T18:49:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -2284,6 +2292,8 @@
   "srf_id": "SRF ID",
   "staff": "Staff",
   "staff_list": "Staff List",
+  "staff_login": "Login in as Staff",
+  "staff_login_description": "For hospital staff: doctors, nurses, and administrators.",
path: public/locale/en.json
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in staff login translation strings.**

There's the same grammatical error here - "Login in as" should be "Log in as".


```diff
-  "staff_login": "Login in as Staff",
+  "staff_login": "Log in as Staff",
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  "staff_login": "Log in as Staff",
  "staff_login_description": "For hospital staff: doctors, nurses, and administrators.",
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commits 1fdd91f to 37a43aa
created_at: 2025-03-07T18:49:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -23,6 +22,7 @@ import organizationApi from "@/types/organization/organizationApi";
 const { customLogo, stateLogo, mainLogo } = careConfig;
 
 export function LandingPage() {
+  const { t } = useTranslation();
path: src/pages/Landing/LandingPage.tsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Verify all translation keys are defined in locale files.**

Make sure all the translation keys used in this component are defined in the English locale file and are accessible to Crowdin for translation to other languages as mentioned in the PR comments.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check if all translation keys used in the component are defined in the locale file
echo "Checking for translation keys in locale files..."

# Extract all translation keys from the component
keys=(
  "landing_search_placeholder"
  "search_facilities" 
  "search_no_results"
  "search_button"
  "login_already_registered"
  "staff_login"
  "staff_login_description"
  "patient_login"
  "patient_login_description"
)

# Check if the keys exist in the English locale file
echo "Looking for keys in English locale file..."
for key in "${keys[@]}"; do
  if rg "\"$key\":" public/locales/en.json; then
    echo "✅ Found key: $key"
  else
    echo "❌ Missing key: $key"
  fi
done
```

Length of output: 2389

---



</details>

**Action Required: Confirm and Correct Locale File Location for Translation Keys**

After execution of the verification script, it appears that the expected English locale file at `public/locales/en.json` could not be found. Consequently, none of the translation keys used in `src/pages/Landing/LandingPage.tsx` could be validated. Please review the following points:

- Verify whether the English locale file is located at a different path (e.g., `src/locales/en.json` or another location).  
- Ensure the file that Crowdin relies on actually exists and includes the following keys:
  - `landing_search_placeholder`
  - `search_facilities`
  - `search_no_results`
  - `search_button`
  - `login_already_registered`
  - `staff_login`
  - `staff_login_description`
  - `patient_login`
  - `patient_login_description`
- Update the translation key file path in your checks (if needed) so that all keys can be captured and properly integrated with Crowdin.

Please address these issues to guarantee that translation keys are defined and accessible as per our localization and translation workflow.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-07T21:47:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1887,6 +1890,7 @@
   "preset_updated": "Preset updated",
   "prev_sessions": "Prev Sessions",
   "preview": "Preview",
+  "preview_form": "Preview form",
path: public/locale/en.json
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Redundant “preview_form” Entry Detected**  
According to the PR objectives and AI summary, the entry for `"preview_form": "Preview form"` should have been removed. It appears here despite the intended removal. Please remove this key to avoid using an outdated label in localization.  
   
*Suggested Diff:*  
```diff
-  "preview_form": "Preview form",
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
// The redundant "preview_form" entry has been removed.
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-07T21:47:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -96,110 +100,189 @@ export function LandingPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col">
-      {/* Header */}
-      <div className="w-full p-4">
-        <LoginHeader />
-      </div>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col items-center pt-24">
+    <div className="min-h-screen flex flex-col p-5">
+      {/* Main Content  */}
+      <main className="lg:flex-1 flex flex-col items-center justify-center py-4 md:py-8">
         {/* Logo Section */}
-        {stateLogo && stateLogo.dark && (
-          <div className="mb-2">
-            <img src={stateLogo.dark} alt="Logo" className="h-28 w-auto" />
-          </div>
-        )}
+        <div className="w-full flex flex-col items-center mt-2 md:mt-0">
+          {stateLogo && stateLogo.dark && (
+            <div className="mb-2">
+              <img
+                src={stateLogo.dark}
+                alt="Logo"
+                className="h-20 md:h-28 w-auto"
+              />
+            </div>
+          )}
 
-        <div className="mb-8">
           {(customLogo || mainLogo) && (
-            <>
+            <div className="mb-4 md:mb-8">
               <img
                 src={customLogo?.dark ?? mainLogo?.dark}
                 alt="Logo"
-                className="h-20 w-auto"
+                className="h-16 md:h-20 w-auto"
               />
-            </>
+            </div>
           )}
         </div>
 
         {/* Search Section */}
-        <div className="w-full max-w-[584px] mx-auto space-y-6 px-6">
-          <div className="relative" data-search-container>
-            <div className="rounded-2xl border border-gray-200 hover:shadow-lg transition-shadow">
-              <div className="flex items-center px-4 h-12">
-                <CareIcon icon="l-search" className="h-5 w-5 text-gray-400" />
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={
-                    selectedOrganization
-                      ? selectedOrganization.name
-                      : searchQuery
-                  }
-                  onChange={handleSearchChange}
-                  onClick={handleInputClick}
-                  placeholder="Search..."
-                  className="flex-1 border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
-                />
-                {(searchQuery || selectedOrganization) && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setSearchQuery("");
-                      setSelectedOrganization(null);
-                    }}
-                    className="p-1 hover:bg-gray-100 rounded-full"
-                  >
-                    <CareIcon
-                      icon="l-times"
-                      className="h-4 w-4 text-gray-400"
-                    />
-                  </button>
-                )}
+        <div className="w-full max-w-[620px] mx-auto px-4 sm:px-6 py-4 bg-gray-100 rounded-md">
+          <div className="text-center mb-4 space-x-1">
+            <span className="text-sm md:text-base block sm:inline">
+              <Trans
+                i18nKey="search_facilities"
+                components={{
+                  strong: <strong />,
+                }}
+              />
+            </span>
+          </div>
+          <div className="flex flex-col sm:flex-row items-center gap-2">
+            <div className="relative w-full sm:w-9/12" data-search-container>
+              <div className="rounded-lg border border-gray-200 hover:shadow-lg transition-shadow">
+                <div className="flex items-center px-2 bg-white rounded-lg">
+                  <CareIcon icon="l-search" className="h-5 w-5 text-gray-400" />
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={
+                      selectedOrganization
+                        ? selectedOrganization.name
+                        : searchQuery
+                    }
+                    onChange={handleSearchChange}
+                    onClick={handleInputClick}
+                    placeholder={t(`landing_search_placeholder`, {
+                      orgType,
+                    })}
+                    className="flex-1 border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-gray-500 cursor-pointer shadow-none ring-0"
+                  />
+                  {(searchQuery || selectedOrganization) && (
+                    <Button
+                      variant="ghost"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setSearchQuery("");
+                        setSelectedOrganization(null);
+                      }}
+                      className="p-1 hover:bg-transparent"
+                    >
+                      <CareIcon
+                        icon="l-times"
+                        className="h-4 w-4 text-gray-400"
+                      />
+                    </Button>
+                  )}
+                </div>
               </div>
+              {isOpen && (
+                <div className="absolute top-full left-0 right-0 mt-1 rounded-md border bg-white shadow-lg z-10">
+                  <Command>
+                    <CommandGroup className="overflow-y-auto max-h-60 md:max-h-80">
+                      {filteredOrganizations.length === 0 ? (
+                        <CommandEmpty>{t("search_no_results")}</CommandEmpty>
+                      ) : (
+                        filteredOrganizations.map((organization) => (
+                          <CommandItem
+                            key={organization.id}
+                            value={organization.name.toLowerCase()}
+                            onSelect={() => {
+                              handleOrganizationSelect(organization.name);
+                            }}
+                            className="cursor-pointer"
+                          >
+                            {organization.name}
+                          </CommandItem>
+                        ))
+                      )}
+                    </CommandGroup>
+                  </Command>
+                </div>
+              )}
             </div>
-
-            {isOpen && (
-              <div className="absolute top-full left-0 right-0 mt-1 rounded-md border bg-white shadow-lg z-10">
-                <Command>
-                  <CommandGroup className="overflow-y-auto max-h-80">
-                    {filteredOrganizations.length === 0 ? (
-                      <CommandEmpty>
-                        Unable to find anything based on your search.
-                      </CommandEmpty>
-                    ) : (
-                      filteredOrganizations.map((organization) => (
-                        <CommandItem
-                          key={organization.id}
-                          value={organization.name.toLowerCase()}
-                          onSelect={() => {
-                            handleOrganizationSelect(organization.name);
-                          }}
-                          className="cursor-pointer"
-                        >
-                          {organization.name}
-                        </CommandItem>
-                      ))
-                    )}
-                  </CommandGroup>
-                </Command>
-              </div>
-            )}
-          </div>
-
-          {/* Search Button */}
-          <div className="flex justify-center">
+            {/* Search Button */}
             <Button
-              variant="primary"
-              className="px-6 h-10"
+              variant="primary_gradient"
+              className="w-full sm:w-3/12"
               onClick={handleSearch}
               disabled={!selectedOrganization}
             >
-              Search Facilities
+              <span className="bg-gradient-to-b from-white/15 to-transparent"></span>
+              {t("search_button")}
             </Button>
           </div>
         </div>
+
+        {/* Centered Dots Image */}
+        <div className="flex justify-center my-6 md:my-8">
+          <img src="/images/dots.svg" alt="" />
+        </div>
+
+        {/* Login Section */}
+        <div className="w-full max-w-[620px] flex flex-col items-center justify-center bg-gray-100 p-4 rounded-lg">
+          <div className="text-sm font-medium mb-4 md:mb-6 text-center">
+            {t("login_already_registered")}
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4 w-full max-w-full justify-center">
+            <div
+              className="flex flex-col items-center justify-center gap-5 p-3 rounded-xl shadow bg-white hover:shadow-md transition-all"
+              style={{
+                backgroundImage: 'url("/images/staff_background.png")',
+                backgroundSize: "auto",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+              }}
+            >
+              <div className="rounded-full bg-green-100 m-2 p-1 aspect-square flex justify-center items-center border-2 border-white shadow">
+                <CareIcon
+                  icon="d-health-worker"
+                  className="w-8 h-8 text-green-700"
+                />
+              </div>
+              <div className="flex flex-col items-center">
+                <Button
+                  variant="outline"
+                  className="w-full text-xs md:text-sm border border-primary-600 text-primary-700 hover:text-primary-800 font-semibold"
+                  onClick={() => navigate(`/login?mode=staff`)}
+                >
+                  {t("staff_login")}
+                </Button>
+                <p className="text-xs mt-2 w-full text-center">
+                  {t("staff_login_description")}
+                </p>
+              </div>
+            </div>
+            <div
+              className="flex flex-col items-center justify-center gap-5 p-3 rounded-xl shadow bg-white hover:shadow-md transition-all"
+              style={{
+                backgroundImage: 'url("/images/patient_background.png")',
+                backgroundSize: "auto",
+                backgroundPosition: "center",
+                backgroundRepeat: "no-repeat",
+              }}
+            >
path: src/pages/Landing/LandingPage.tsx
user: login: rithviknishad
body: use tailwind classes instead
created_at: 2025-03-12T11:34:16Z
author_association: MEMBER
diff_hunk: @@ -43,6 +43,10 @@ export function LandingPage() {
     organization.name.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
+  const orgType = t(
+    `SYSTEM__govt_org_type__${organizations[0]?.metadata?.govt_org_type || "district"}`,
+  ).toLowerCase();
path: src/pages/Landing/LandingPage.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Add null check for the organizations array**

The code attempts to access `organizations[0]` without checking if the array is empty. This could lead to errors if no organizations are returned from the API.


```diff
  const orgType = t(
-    `SYSTEM__govt_org_type__${organizations[0]?.metadata?.govt_org_type || "district"}`,
+    `SYSTEM__govt_org_type__${organizations.length > 0 ? organizations[0]?.metadata?.govt_org_type || "district" : "district"}`,
  ).toLowerCase();
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  const orgType = t(
-    `SYSTEM__govt_org_type__${organizations[0]?.metadata?.govt_org_type || "district"}`,
+    `SYSTEM__govt_org_type__${organizations.length > 0 ? organizations[0]?.metadata?.govt_org_type || "district" : "district"}`,
  ).toLowerCase();
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-03-15T08:29:18Z
author_association: CONTRIBUTOR
diff_hunk: @@ -43,6 +43,10 @@ export function LandingPage() {
     organization.name.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
+  const orgType = t(
+    `SYSTEM__govt_org_type__${organizations[0]?.metadata?.govt_org_type || "district"}`,
+  ).toLowerCase();
path: src/pages/Landing/LandingPage.tsx
user: login: rithviknishad
body: we can't hardcode any fallbacks such as "district"/"state" etc. in our codebase; these terms may not exist in all territories;
created_at: 2025-03-20T10:43:31Z
author_association: MEMBER

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-03-06T19:49:55Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: failure by coderabbit.ai -->

> [!CAUTION]
> ## Review failed
> 
> The pull request is closed.

<!-- end of auto-generated comment: failure by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
The changes modify the landing page by removing the `LoginHeader` component and restructuring the main content. Key updates include the introduction of a new translation hook for internationalization, a redesigned search section with new placeholder text and improved styling, and the addition of a centered dots image. A new login section is introduced, offering distinct login options for staff and patients, enhancing user interaction.

## Changes
| File                             | Changes summary                                                                                                                                                                                                                                  |
|----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `src/pages/Landing/LandingPage.tsx` | Removed `LoginHeader`; restructured main content with updated padding and flex properties; introduced `useTranslation` for internationalization; redesigned search section with a new layout and translated placeholder; added centered dots image; introduced a new login section with options for staff and patients featuring background images and descriptive text. |
| `public/locale/en.json`          | Added new entries for user guidance and search functionality, including `"landing_search_placeholder"`, `"login_already_registered"`, `"patient_login"`, `"patient_login_description"`, `"search_button"`, `"search_facilities"`, and `"search_no_results"`. |
| `src/CAREUI/icons/DuoTonePaths.json` | Added new entry `"d-health-worker"` representing a new icon with SVG path data. |

## Assessment against linked issues
| Objective                                                  | Addressed | Explanation |
|-----------------------------------------------------------|-----------|-------------|
| Redesign the public page as per the new Figma design (#11015) | ✅         |             |

## Possibly related PRs
- **ohcnetwork/care_fe#11066**: The changes in the main PR are related to the modifications in the `public/locale/en.json` file, as both PRs involve the addition of new localization keys that enhance user guidance and functionality on the landing page and dashboard.
- **ohcnetwork/care_fe#11041**: The changes in the main PR are related to the localization of text elements, specifically the addition of a search placeholder that utilizes the `orgType` variable, which aligns with the overall focus on improving user guidance and search functionality in the retrieved PR.
- **ohcnetwork/care_fe#11088**: The changes in the main PR and the retrieved PR are related as both involve significant modifications to the `LandingPage.tsx` file, including the introduction of the `useTranslation` hook for internationalization and updates to the search section's layout and functionality.

## Suggested labels
`needs review`, `needs-triage`

## Suggested reviewers
- nihal467
- Jacobjeevan

## Poem
> In a field of code, I hop with glee,  
> Updating layouts so visually free.  
> A search, a logo, and buttons so bright,  
> A landing page revamped just right.  
> From staff to patients, the login's in sight! 🐰✨  
> Happy hops and cleaner code all night!

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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= -->

<!-- internal state end -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 107357bcfd56559678578cffb78fe9cce07614e5 and e5e7a4b2f8e96b66038f2195cc2f6e8169e1b5f0.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/pages/Landing/LandingPage.tsx` (4 hunks)

</details>

</details>
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=ohcnetwork/care_fe&utm_content=11088):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: CONTRIBUTOR
user: login: netlify[bot]
created_at: 2025-03-06T19:50:05Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *care-ohc* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | e5e7a4b2f8e96b66038f2195cc2f6e8169e1b5f0 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/care-ohc/deploys/67dc686d1871030008f3853b |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-11088.preview.ohc.network](https://deploy-preview-11088.preview.ohc.network) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTExMDg4LnByZXZpZXcub2hjLm5ldHdvcmsifQ.EA5n7VIUnZIPVrL9AwQWbEX9KXKJKskLMn84SVZeIU0)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [care-ohc Preview](https://deploy-preview-11088.preview.ohc.network) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/care-ohc/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: cherish2003
created_at: 2025-03-07T18:46:43Z
body: @AdityaJ2305 once check it out i have added i18n translation for all the texts in the public page 
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-03-10T17:08:11Z
body: Conflicts have been detected against the base branch. Please merge the base branch into your branch.
cc: @cherish2003
> _See: https://docs.ohc.network/docs/contributing#how-to-resolve-merge-conflicts_
author_association: NONE
user: login: nihal467
created_at: 2025-03-11T14:19:24Z
body: LGTM
author_association: MEMBER
user: login: github-actions[bot]
created_at: 2025-03-12T13:27:36Z
body: Conflicts have been detected against the base branch. Please merge the base branch into your branch.
cc: @cherish2003
> _See: https://docs.ohc.network/docs/contributing#how-to-resolve-merge-conflicts_
author_association: NONE
user: login: nihal467
created_at: 2025-03-20T10:14:04Z
body: non related cypersss failure , LGTM
author_association: MEMBER
user: login: github-actions[bot]
created_at: 2025-03-20T19:12:22Z
body: @cherish2003 Your efforts have helped advance digital healthcare and TeleICU systems. :rocket: Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! :raised_hands:
author_association: NONE