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

Changes from 2 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
17 changes: 6 additions & 11 deletions components/PrimaryFeatures.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ 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%]"
Expand All @@ -74,7 +74,7 @@ export function PrimaryFeatures() {
<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
Expand All @@ -93,7 +93,7 @@ export function PrimaryFeatures() {
<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 +108,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 @@ -135,7 +135,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 @@ -156,10 +156,5 @@ 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}
/>
);
return <div className={clsx("px-4 lg:px-6", className)} {...props} />;
}