Merge pull request 'fix: homepage image and circle cta styling' (#6) from dev into main

Reviewed-on: #6

src/app/globals.css

@@ -9,6 +9,7 @@
   --ext-color-primary-4: #d4a187;
   --ext-color-primary-5: #e7ccc0;
   --ext-color-primary-6: #64b3b4;
+  --ext-color-primary-7: #a8dcca;
   --background: #ffffff;
   --foreground: #171717;
 }
@@ -21,6 +22,7 @@
     --ext-color-primary-4: #d4a187;
     --ext-color-primary-5: #e7ccc0;
     --ext-color-primary-6: #64b3b4;
+    --ext-color-primary-7: #a8dcca;
     --background: #0a0a0a;
     --foreground: #ededed;
   }

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-[80vh] d-flex align-items-center pt-100 pb-100 pt-sm-120 pb-sm-120">
+      <div className="container min-h-[90vh] 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">
@@ -18,21 +18,17 @@ export default function Hero() {
         </div>
         {/* Home Section Content */}
         <div className="home-content">
-          <div className="row">
+          <div className="space-y-5">
-            {/* Home Section Text */}
+            <h2 className="hs-title-3">Healing Begins Here</h2>
-            <div className="col-md-10 offset-md-1">
+            <h1 className="text-3xl md:text-6xl">Cochise Oncology</h1>
-              <h2 className="hs-title-3 m-0 p-0">Healing Begins Here</h2>
+            <p className="text-xl">Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
-              <h1 className="hs-title-2 m-0 p-0">Cochise Oncology</h1>
+            <a
-              <p className="text-2xl">Southern Arizona’s Only Complete Cancer Treatment Center in Sierra Vista.</p>
+              href="/contact"
-              <a
+              className="btn btn-mod btn-border-w btn-large btn-round align-middle w-full md:w-1/2 lg:w-1/4 hover:opacity-[0.5]"
-                href="/contact"
+              data-btn-animate="y"
-                className="btn btn-mod btn-border-w btn-large btn-round ms-1 me-1 mt-2 align-middle w-full md:w-1/4 hover:opacity-[0.5]"
+            >
-                data-btn-animate="y"
+              Request Consultation
-              >
+            </a>
-                Request Consultation
-              </a>
-            </div>
-            {/* End Home Section Text */}
           </div>
         </div>
         {/* End Home Section Content */}

src/components/Homepage.tsx

@@ -6,55 +6,63 @@ import Contact from "./Contacts/Contact";
 export default function homepage({ dark = false }) {
   return (
     <>
-      <hr className={`mt-0 mb-0 ${dark ? "white" : ""} `} />
+      <section className="w-full py-5 bg-gradient-to-b from-white to-extColorPrimary7 relative">
-      <section
+        <div className="bg-scroll">
-        className={`page-section scrollSpysection relative ${dark ? "bg-dark-1 light-content" : ""} `}
-        id="about"
-      >
-        <div className="w-full absolute top-[-5vw] z-[99] flex justify-center">
-          <div className="bg-white h-full flex justify-center p-8 gap-3 rounded-xl shadow-xl">
-            <Image
-              src="/assets/images/Cochise_New-service_Radixact-Announcement-900x900-1-1-768x768.webp"
-              width={450}
-              height={0}
-              alt=""
-            />
-            <Image src="/assets/images/cochise-welcome.png" width={500} height={0} alt="" />
-          </div>
-        </div>
-        <div className="container position-relative">
-          <div className="row">
-            {/* Section Text */}
-            <div className="col-lg-6 d-flex align-items-center order-first order-lg-last mb-md-60 mb-sm-40"></div>
-            {/* End Section Text */}
-          </div>
-        </div>
-      </section>
-      <section className="mb-5 w-full min-h-[50vh]">
-        <section className="bg-scroll relative">
-          <div className="decoration-14" />
-          <div className="decoration-15" />
           <div className="decoration-16 opacity-035 d-none d-md-block">
             <Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} />
           </div>
           <div className="decoration-17 opacity-035 d-none d-md-block">
             <Image src="/assets/images/demo-slick/decoration-2.svg" alt="Image Description" width={128} height={228} />
           </div>
-        </section>
+        </div>
-        <div className="pt-[12vw] w-full flex justify-center gap-5">
+        <div className="w-full absolute -top-20 md:-top-40 lg:-top-20 z-[99] flex">
-          <div className="w-[300px] h-[300px] bg-gradient-to-br from-white via-yellow-200 to-yellow-400 rounded-full flex items-center justify-center overflow-auto relative">
+          <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="bg-[url('/assets/images/cochise-welcome.png')] h-full w-full bg-[left] bg-cover text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
+            <div className="flex-1 relative">
-            <p className="text-[36px] text-center p-0 m-0 absolute text-white font-semibold tracking-tight">
+              <Image
-              Radiation Oncology
+                src="/assets/images/Cochise_New-service_Radixact-Announcement-900x900-1-1-768x768.webp"
-            </p>
+                alt=""
-          </div>
+                width={500}
-          <div className="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center">
+                height={0}
-            Medical Oncology
+                className="w-full h-auto rounded-xl"
-          </div>
+              />
-          <div className="w-[300px] h-[300px] bg-green-300 rounded-full flex items-center justify-center">
+            </div>
-            Skin Cancer
+            <div className="flex-1 relative">
+              <Image
+                src="/assets/images/cochise-welcome.png"
+                alt=""
+                width={500}
+                height={0}
+                className="w-full h-auto rounded-xl"
+              />
+            </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]">
+          <Link href="/radiation-oncology">
+            <div className="w-[320px] h-[320px] 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>
+              <p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
+                Radiation Oncology
+              </p>
+            </div>
+          </Link>
+          <Link href="/medical-oncology">
+            <div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-medical-oncology-768x512.webp')] bg-cover rounded-full flex items-center justify-center overflow-auto relative">
+              <div className="h-full w-full bg-gradient-to-b from-[#E3B19B82] to-[#798D90] text-center align-middle flex items-center justify-center opacity-[0.7]"></div>
+              <p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
+                Medical Oncology
+              </p>
+            </div>
+          </Link>
+          <Link href="/skin-cancer">
+            <div className="w-[320px] h-[320px] bg-[url('/assets/images/cochise-skin-cancer-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 opacity-[0.7]"></div>
+              <p className="text-[36px] text-center p-0 m-0 absolute text-white font-medium tracking-tight leading-10">
+                Skin Cancer
+              </p>
+            </div>
+          </Link>
+        </div>
       </section>
       {/* <section className="mb-5 w-full">
         <Testimonials />

tailwind.config.ts

@@ -17,6 +17,7 @@ export default {
         extColorPrimary4: "var(--ext-color-primary-4)",
         extColorPrimary5: "var(--ext-color-primary-5)",
         extColorPrimary6: "var(--ext-color-primary-6)",
+        extColorPrimary7: "var(--ext-color-primary-7)",
       },
     },
   },