Update Primary feature images visibility (#46)

components/PrimaryFeatures.jsx → components/PrimaryFeatures.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import Image from "next/image";
+import { useEffect, useState, ReactNode } from "react";
+import Image, { StaticImageData } from "next/image";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 import clsx from "clsx";
 
@@ -10,7 +10,13 @@ import screenshotDeviceIntegrations from "@/public/features/device.png";
 import screenshotEMRCriticalCare from "@/public/features/emr.png";
 import screenshotRealTimeMonitoring from "@/public/features/monitoring.png";
 
-const features = [
+type Feature = {
+  title: string;
+  description: string;
+  image: StaticImageData;
+};
+
+const features: Feature[] = [
   {
     title: "EMR Support For Critical Care",
     description:
@@ -38,16 +44,22 @@ const features = [
 ];
 
 export function PrimaryFeatures() {
-  let [tabOrientation, setTabOrientation] = useState("horizontal");
+  const [tabOrientation, setTabOrientation] = useState<
+    "horizontal" | "vertical"
+  >("horizontal");
 
   useEffect(() => {
-    let lgMediaQuery = window.matchMedia("(min-width: 1024px)");
+    const lgMediaQuery = window.matchMedia("(min-width: 1024px)");
 
-    function onMediaQueryChange({ matches }) {
+    const onMediaQueryChange = (event: MediaQueryListEvent) => {
+      const { matches } = event;
       setTabOrientation(matches ? "vertical" : "horizontal");
-    }
+    };
 
-    onMediaQueryChange(lgMediaQuery);
+    lgMediaQuery.addEventListener(
+      "change",
+      onMediaQueryChange as EventListener
+    );
     lgMediaQuery.addEventListener("change", onMediaQueryChange);
 
     return () => {
@@ -59,41 +71,33 @@ export function PrimaryFeatures() {
     <section
       id="product"
       aria-label="Features for running your books"
-      className="relative overflow-hidden bg-primary-600 pb-28 pt-20 sm:py-32 mt-32 sm:mt-56 "
+      className="relative overflow-hidden bg-primary-600 pb-28 md:pb-16 pt-20 sm:py-32 mt-32 sm:mt-56"
     >
-      {/* <Image
-        className="absolute left-1/2 top-1/2 max-w-none translate-x-[-44%] translate-y-[-42%]"
-        src={backgroundImage}
-        alt=""
-        width={2245}
-        height={1636}
-        unoptimized
-      /> */}
       <Container className="relative">
         <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
           <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
             Empowering Healthcare with Advanced Technology
           </h2>
-          <p className="mt-6 text-lg tracking-tight text-primary-100">
+          <p className="mt-6 lg:mx-8 text-lg tracking-tight text-primary-100">
             Explore the advanced capabilities of Care designed to enhance
             healthcare delivery and patient management. From real-time
             monitoring to comprehensive EMR support, our features are tailored
             to meet the needs of modern medical facilities.
           </p>
         </div>
         <TabGroup
-          className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
+          className=" grid grid-cols-1 items-center gap-y-2  sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0"
           vertical={tabOrientation === "vertical"}
         >
-          {({ selectedIndex }) => (
+          {({ selectedIndex }: { selectedIndex: number }) => (
             <>
-              <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
+              <div className="-mx-4 md:block hidden overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
                 <TabList className="relative z-10 flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
                   {features.map((feature, featureIndex) => (
                     <div
                       key={feature.title}
                       className={clsx(
-                        "group relative rounded-full px-4 py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6",
+                        "group relative rounded-full px-4 py-1 lg:rounded-xl lg:p-6",
                         selectedIndex === featureIndex
                           ? "bg-white lg:bg-white/10 lg:ring-1 lg:ring-inset lg:ring-white/10"
                           : "hover:bg-white/10 lg:hover:bg-white/5"
@@ -108,7 +112,7 @@ export function PrimaryFeatures() {
                               : "text-primary-100 hover:text-white lg:text-white"
                           )}
                         >
-                          <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
+                          <span className="absolute inset-0 rounded-full lg:rounded-xl" />
                           {feature.title}
                         </Tab>
                       </h3>
@@ -126,7 +130,27 @@ export function PrimaryFeatures() {
                   ))}
                 </TabList>
               </div>
-              <TabPanels className="lg:col-span-7">
+              {/*Sliding card in Mobile view */}
+              <div className="sm:hidden mt-6 flex overflow-x-auto snap-x snap-mandatory">
+                {features.map((feature, index) => (
+                  <div
+                    key={feature.title}
+                    className="snap-center  flex-shrink-0 w-full mr-3"
+                  >
+                    <p className="my-4 font-display text-xl tracking-tight text-white">
+                      {feature.title}
+                    </p>
+                    <Image
+                      src={feature.image}
+                      alt={feature.title}
+                      className="rounded-lg shadow-lg"
+                      priority
+                    />
+                    <p className="mt-4 text-white">{feature.description}</p>
+                  </div>
+                ))}
+              </div>
+              <TabPanels className="lg:col-span-7 md:block hidden ">
                 {features.map((feature) => (
                   <TabPanel key={feature.title} unmount={false}>
                     <div className="relative sm:px-6 lg:hidden">
@@ -135,7 +159,7 @@ export function PrimaryFeatures() {
                         {feature.description}
                       </p>
                     </div>
-                    <div className="mt-10 w-[45rem] overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-primary-900/20 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
+                    <div className="mt-20 lg:ml-5 w-full overflow-hidden rounded-xl bg-slate-50 shadow-xl shadow-primary-900/20 sm:w-auto lg:mt-0">
                       <Image
                         className="w-full"
                         src={feature.image}
@@ -155,11 +179,11 @@ export function PrimaryFeatures() {
   );
 }
 
-function Container({ className, ...props }) {
-  return (
-    <div
-      className={clsx("mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", className)}
-      {...props}
-    />
-  );
+type ContainerProps = {
+  className?: string;
+  children: ReactNode;
+};
+
+function Container({ className, ...props }: ContainerProps) {
+  return <div className={clsx("px-4 lg:px-6", className)} {...props} />;
 }

pages/index.tsx

@@ -9,13 +9,13 @@ import {
 } from "@heroicons/react/20/solid";
 import Image from "next/image";
 import LoadVideoPlayer from "@/components/LoadVideoPlayer";
-import { PrimaryFeatures } from "@/components/PrimaryFeatures";
 import { OpenAIHero } from "@/components/OpenAIHero";
 import Head from "next/head";
 import Link from "next/link";
 import CommitLayout from "@/components/Commit/CommitLayout";
 import Header from "@/components/header";
 import Footer from "@/components/Footer";
+import { PrimaryFeatures } from "@/components/PrimaryFeatures";
 
 const primaryFeatures = [
   {
@@ -147,7 +147,6 @@ type Banner = {
   href: string;
 };
 export default function Home() {
-
   const [banner, setBanner] = useState<Banner | null>(null);
 
   return (