From 18f4b1dd546ed2ed921a3da9ab10b7a83dc11a06 Mon Sep 17 00:00:00 2001
From: Val <44112412+LawfaL@users.noreply.github.com>
Date: Mon, 3 Mar 2025 22:27:51 +0700
Subject: [PATCH] fix: style

---
 public/assets/css/style.css           |  4 ++++
 src/app/(main)/[slug]/page.tsx        |  1 -
 src/app/(main)/blog/page.tsx          |  4 ++--
 src/components/Blogs/BlogCardItem.tsx |  2 +-
 src/components/Header.tsx             | 15 +++++++++++++++
 src/components/Hero.tsx               |  2 +-
 src/components/HeroOther.tsx          | 12 +++++++++---
 src/components/Homepage.tsx           | 22 +++++++---------------
 8 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index a9bd1f6..b3a16c0 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -3908,6 +3908,10 @@ a.logo:hover {
   display: none;
 }
 
+.body-scrolled .social-nav {
+  color: var(--color-dark-3);
+}
+
 /* Menu sub */
 
 .inner-nav .mi-chevron-down {
diff --git a/src/app/(main)/[slug]/page.tsx b/src/app/(main)/[slug]/page.tsx
index ca21879..1e1da44 100644
--- a/src/app/(main)/[slug]/page.tsx
+++ b/src/app/(main)/[slug]/page.tsx
@@ -59,7 +59,6 @@ function Loading() {
   return (
     <>
       <HeroOther />
-
       {/* Section */}
       <BlogDetailContentSkeleton />
       {/* End Section */}
diff --git a/src/app/(main)/blog/page.tsx b/src/app/(main)/blog/page.tsx
index 52aaf8a..f616d55 100644
--- a/src/app/(main)/blog/page.tsx
+++ b/src/app/(main)/blog/page.tsx
@@ -31,8 +31,8 @@ export default async function BlogPage({ searchParams }: { searchParams?: Promis
                 placeholder="Search blog..."
                 className="input-lg input-circle form-control h-12"
               />
-              <div className="input-group-append">
-                <button className="btn btn-info text-white h-12" type="submit">
+              <div className="input-group-append px-2">
+                <button className="btn btn-info text-white h-12 px-5" type="submit">
                   Search
                 </button>
               </div>
diff --git a/src/components/Blogs/BlogCardItem.tsx b/src/components/Blogs/BlogCardItem.tsx
index 2b75b6b..9ff7edf 100644
--- a/src/components/Blogs/BlogCardItem.tsx
+++ b/src/components/Blogs/BlogCardItem.tsx
@@ -20,7 +20,7 @@ export interface BlogCardItemProps {
 export function BlogCardItem({ data }: BlogCardItemProps) {
   return (
     <div className="post-prev-3 col-12 col-md-6 col-lg-4 col-xl-4 mt-50">
-      <div className="post-prev-3-container flex flex-col">
+      <div className="post-prev-3-container flex flex-col shadow-md hover:scale-[1.02]">
         <div className="relative w-full h-[200px]">
           <a href={`/${data.slug}/`}>
             <Image src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} fill className="object-cover" />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f555d49..8b0c041 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,6 +5,12 @@ import { navMenuData } from "@/data/menu";
 import { toggleMobileMenu } from "@/utils/toggleMobileMenu";
 import Image from "next/image";
 import Link from "next/link";
+import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
+const shareIcons: Record<string, any> = {
+  facebook: <FaFacebook className="social-nav text-2xl lg:text-gray-300" />,
+  linkedin: <FaLinkedin className="social-nav text-2xl lg:text-gray-300" />,
+  twitter: <FaTwitter className="social-nav text-2xl lg:text-gray-300" />,
+};
 
 export default function Header({ links }: { links: typeof navMenuData }) {
   return (
@@ -49,6 +55,15 @@ export default function Header({ links }: { links: typeof navMenuData }) {
           <li></li>
         </ul>
       </div>
+      <div className="flex mt-4 gap-3">
+        {Object.keys(shareIcons).map((k, idx) => {
+          return (
+            <a key={idx} className="cursor-pointer" href={"/"} target="_blank">
+              {shareIcons[k]}
+            </a>
+          );
+        })}
+      </div>
       {/* End Main Menu */}
     </div>
   );
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index e42980f..d9b5e77 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -7,7 +7,7 @@ export default function Hero() {
 
   return (
     <section className="home-section bg-dark-1 bg-dark-alpha-30 light-content scrollSpysection" id="home">
-      <div className="container min-h-[90vh] d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
+      <div className="container min-h-[70vh] d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
         {/* Background Video */}
         {/* Please replace the video file in folder "video" with your own file */}
         <div className="bg-video-wrapper">
diff --git a/src/components/HeroOther.tsx b/src/components/HeroOther.tsx
index 2299ff3..6a9cecb 100644
--- a/src/components/HeroOther.tsx
+++ b/src/components/HeroOther.tsx
@@ -16,10 +16,16 @@ const shareIcons: Record<string, any> = {
 
 export default function HeroOther({ title, img, createdAt, shareUrl }: HeroOtherProps) {
   return (
-    <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-20 md:!py-48 relative">
+    <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-20 md:!py-48 relative !h-[30vw]">
       {/* <!-- Background Shape --> */}
-      <div className="bg-shape-1 w-full h-full opacity-50">
-        <Image src={!!img ? img : "/assets/images/hero-default.webp"} fill alt="" />
+      <div className="bg-shape-1 w-full h-full opacity-50 bg-contain">
+        <Image
+          src={img || "/assets/images/hero-default.webp"}
+          width={1000}
+          height={500}
+          alt=""
+          className="w-screen h-screen object-cover object-center"
+        />
       </div>
       {/* <!-- End Background Shape --> */}
 
diff --git a/src/components/Homepage.tsx b/src/components/Homepage.tsx
index 88ccaf8..6b03dc7 100644
--- a/src/components/Homepage.tsx
+++ b/src/components/Homepage.tsx
@@ -16,29 +16,21 @@ export default function homepage({ dark = false }) {
             <Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} />
           </div>
         </div>
-        <div className="w-full absolute -top-20 md:-top-40 lg:-top-20 z-[99] flex">
-          <div className="bg-white w-11/12 lg:w-9/12 xl:w-8/12 mx-auto flex flex-col md:flex-row p-3 space-x-3 space-y-3 rounded-xl shadow-xl">
-            <div className="flex-1 relative">
+        <div className="relative">
+          <div className="w-full mt-[-200px] mb-[50px] z-[99] flex justify-center">
+            <div className="bg-white h-full flex flex-col lg:flex-row flex-wrap justify-center p-4 lg:p-8 gap-3 rounded-xl shadow-xl">
               <Image
+                className="rounded-xl"
                 src="/assets/images/Cochise_New-service_Radixact-Announcement-900x900-1-1-768x768.webp"
-                alt=""
-                width={500}
+                width={450}
                 height={0}
-                className="w-full h-auto rounded-xl"
-              />
-            </div>
-            <div className="flex-1 relative">
-              <Image
-                src="/assets/images/cochise-welcome.png"
                 alt=""
-                width={500}
-                height={0}
-                className="w-full h-auto rounded-xl"
               />
+              <Image className="rounded-xl" src="/assets/images/cochise-welcome.png" width={500} height={0} alt="" />
             </div>
           </div>
         </div>
-        <div className="w-full flex flex-wrap justify-center space-x-5 space-y-4 mt-[550px] md:mt-[24vh] lg:mt-[62vh] wow fadeInUp">
+        <div className="w-full flex flex-wrap justify-center space-x-5 wow fadeInUp">
           <Link href="/radiation-oncology">
             <div className="w-[320px] h-[320px] hover:scale-105 transition-transform duration-500 bg-[url('/assets/images/cochise-radiation-oncology-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
               <div className="h-full w-full rounded-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center"></div>