Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Primary feature images visibility #46

Merged
merged 3 commits into from
Jan 14, 2025
+57 −34
Merged

Update Primary feature images visibility #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f2353ae
updated image visibility
Mahendar0701 Dec 31, 2024
a735012
expanded images
Mahendar0701 Jan 7, 2025
3e03738
added sliding for images
Mahendar0701 Jan 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 56 additions & 32 deletions components/PrimaryFeatures.jsx → components/PrimaryFeatures.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -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:
Expand Down Expand Up @@ -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 () => {
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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}
Expand All @@ -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} />;
}
3 changes: 1 addition & 2 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand Down Expand Up @@ -147,7 +147,6 @@ type Banner = {
href: string;
};
export default function Home() {

const [banner, setBanner] = useState<Banner | null>(null);

return (
Expand Down