Skip to content

Enhanced responsiveness for mobiles #57

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

Open
OmShukla350 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Enhanced responsiveness for mobiles #57

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
ba6faf3
Enhanced responsiveness for mobiles
OmShukla350 Sep 28, 2025
b62b988
Merge branch 'main' into responsiveness
OmShukla350 Oct 8, 2025
d06b48d
Merge branch 'main' into responsiveness
OmShukla350 Oct 8, 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
151 changes: 80 additions & 71 deletions Frontend/src/Component/Animation/Appointment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,67 @@
import { useState, useEffect } from 'react';
import image1 from '../../Assets/image (1).jpg'
import image2 from '../../Assets/image (2).jpg'
import image3 from '../../Assets/image.jpg'
import image1 from '../../Assets/image (1).jpg';
import image2 from '../../Assets/image (2).jpg';
import image3 from '../../Assets/image.jpg';
import { useNavigate } from 'react-router-dom';

const Appointment = () => {
const [currentDoctorIndex, setCurrentDoctorIndex] = useState(0);



const navigate = useNavigate();



const doctors = [
{
id: 1,
name: "Dr. Arjun Sharma",
name: 'Dr. Arjun Sharma',
image: image3,
description: "Certified Ayurvedic practitioner with 20+ years of experience in holistic healing and natural therapies.",
specialist: "Ayurvedic Specialist",
description:
'Certified Ayurvedic practitioner with 20+ years of experience in holistic healing and natural therapies.',
specialist: 'Ayurvedic Specialist',
rating: 4.9,
location: "123 Wellness Street, Delhi, India"
location: '123 Wellness Street, Delhi, India',
},
{
id: 2,
name: "Dr. Meera Kapoor",
name: 'Dr. Meera Kapoor',
image: image1,
description: "Expert in Panchakarma therapy and Ayurvedic diet planning for chronic diseases.",
specialist: "Panchakarma Specialist",
description:
'Expert in Panchakarma therapy and Ayurvedic diet planning for chronic diseases.',
specialist: 'Panchakarma Specialist',
rating: 4.8,
location: "456 Ayurveda Avenue, Mumbai, India"
location: '456 Ayurveda Avenue, Mumbai, India',
},
{
id: 3,
name: "Dr. Rajesh Verma",
name: 'Dr. Rajesh Verma',
image: image2,
description: "Specialist in Ayurvedic treatments for skin disorders and natural wellness therapies.",
specialist: "Ayurvedic Dermatologist",
description:
'Specialist in Ayurvedic treatments for skin disorders and natural wellness therapies.',
specialist: 'Ayurvedic Dermatologist',
rating: 4.7,
location: "789 Holistic Lane, Bangalore, India"
location: '789 Holistic Lane, Bangalore, India',
},
];

useEffect(() => {
const interval = setInterval(() => {
setCurrentDoctorIndex((prevIndex) =>
setCurrentDoctorIndex((prevIndex) =>
prevIndex === doctors.length - 1 ? 0 : prevIndex + 1
);
}, 10000);

return () => clearInterval(interval);
}, [doctors.length]);

const doctor = doctors[currentDoctorIndex];

const renderStars = (rating) => {
const renderStars = (rating: number) => {
const fullStars = Math.floor(rating);
const hasHalfStar = rating % 1 >= 0.5;

return (
<div className="flex items-center">
{[...Array(5)].map((_, i) => (
<span key={i} className="text-amber-500 text-lg">
{i < fullStars ? "★" : i === fullStars && hasHalfStar ? "½" : "☆"}
{i < fullStars ? '★' : i === fullStars && hasHalfStar ? '½' : '☆'}
</span>
))}
<span className="ml-2 text-sm text-amber-700">{rating.toFixed(1)}</span>
Expand All @@ -72,77 +70,88 @@ const Appointment = () => {
};

return (
<div className="w-full flex justify-center items-center py-16 bg-amber-50 from-amber-100 via-amber-100 to-amber-100">
<div className="w-full max-w-4xl p-6 bg-amber-100 rounded-xl text-gray-800">
<div className="flex flex-col md:flex-row w-full">

<div className="w-full md:w-1/2 p-4 flex items-center justify-center">
<div className="relative">
<img
src={doctor.image}
<div className="w-full flex justify-center items-center py-16 bg-gradient-to-br from-amber-100 via-amber-100 to-amber-100 overflow-hidden">
<div className="w-full max-w-4xl p-6 bg-amber-100 rounded-xl text-gray-800">
{/* Card Layout */}
<div className="flex flex-col md:flex-row w-full gap-6">
{/* Doctor Image */}
<div className="w-full md:w-1/2 flex items-center justify-center">
<div className="relative w-full max-w-[300px]">
<img
src={doctor.image}
alt={doctor.name}
className="max-h-64 object-cover rounded-lg shadow-md"
className="w-full h-64 object-cover rounded-lg shadow-md"
/>
<div className="absolute bottom-2 right-2 bg-amber-500 w-4 h-4 rounded-full border-2 border-white"></div>
</div>
</div>

<div className="w-full md:w-1/2 p-4 flex flex-col justify-between">

{/* Doctor Info */}
<div className="w-full md:w-1/2 flex flex-col justify-between">
<div>
<h2 className="text-2xl font-bold text-amber-600 mb-2">{doctor.name}</h2>
<h2 className="text-2xl font-bold text-amber-600 mb-2">
{doctor.name}
</h2>
<div className="mb-2 text-amber-500 font-medium">
{doctor.specialist}
</div>
<p className="text-gray-700 mb-3 text-sm">{doctor.description}</p>
<div className="mb-3">
{renderStars(doctor.rating)}
</div>
<div className="mb-3">{renderStars(doctor.rating)}</div>
<div className="flex items-start mb-4">
<svg className="w-4 h-4 text-amber-400 mt-1 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
<svg
className="w-4 h-4 text-amber-400 mt-1 mr-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
<p className="text-xs text-gray-500">{doctor.location}</p>
</div>
</div>

<button
onClick={() => {
console.log('Navigation button clicked');
navigate('/doctors');
}}

className="bg-amber-500 hover:bg-amber-600 text-white py-2 px-4 rounded-md flex items-center justify-center transition-all duration-300"
>
<svg
className="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>


Call for Appointment
</button>
<button
onClick={() => navigate('/doctors')}
className="bg-amber-500 hover:bg-amber-600 text-white py-2 px-4 rounded-md flex items-center justify-center transition-all duration-300"
>
<svg
className="w-4 h-4 mr-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
/>
</svg>
Call for Appointment
</button>
</div>
</div>


{/* Dots */}
<div className="mt-6 flex justify-center">
{doctors.map((_, index) => (
<button
key={index}
className={`mx-1 w-3 h-3 rounded-full transition-all duration-300 ${
index === currentDoctorIndex ? "bg-amber-500" : "bg-amber-300"
index === currentDoctorIndex ? 'bg-amber-500' : 'bg-amber-300'
}`}
onClick={() => setCurrentDoctorIndex(index)}
// onClick={() => navigate('/doctors')}
aria-label={`View doctor ${index + 1}`}
/>
))}
Expand Down
51 changes: 51 additions & 0 deletions Frontend/src/Component/Animation/StepProcess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,57 @@ export default function StepProcess() {
</div>
</div>

{/* Staggered Card Layout */}
<div className="w-full max-w-6xl px-4 text-center">
<h3 className="text-xl sm:text-2xl font-bold text-amber-800 mb-6 sm:mb-8 font-['Verdana'] relative inline-block">
<span>Explore Ayurvedic Remedies</span>
<span className="absolute -bottom-2 left-0 right-0 h-0.5 bg-gradient-to-r from-amber-500 via-amber-600 to-amber-500"></span>
</h3>

<div className="relative h-80 sm:h-96 mb-8 sm:mb-16" ref={cardsContainerRef}>
<div className="absolute inset-0 flex justify-center items-center">
{diseases.map((disease, idx) => (
<div
key={idx}
onClick={() => handleCardClick(disease, idx)}
className={`absolute transition-all duration-300 cursor-pointer ${getCardWidth()} bg-white border border-amber-200 rounded-xl p-3 sm:p-4 shadow-md hover:shadow-xl`}
style={getCardStyle(idx)}
>
<div className="relative overflow-hidden rounded-lg mb-3 sm:mb-4">
<figure className="w-full h-32 sm:h-40 rounded-lg overflow-hidden">
<figure className="w-full h-32 sm:h-40 rounded-lg overflow-hidden">
<img
src={disease.image_url || '/api/placeholder/260/150'}
alt={disease.alt_text || 'Remedy'}
loading="lazy"
decoding="async"
width="260"
height="150"
className="w-full h-full object-cover transition-all duration-500 hover:scale-110"
srcSet={`
${(disease.image_url || '/api/placeholder/260/150').replace("w_64,h_64", "w_320,h_180")} 320w,
${(disease.image_url || '/api/placeholder/260/150').replace("w_64,h_64", "w_640,h_360")} 640w,
${(disease.image_url || '/api/placeholder/260/150').replace("w_64,h_64", "w_1280,h_720")} 1280w
`}

sizes="(max-width: 640px) 100vw, 640px"
/>
<figcaption className="sr-only">
{disease.alt_text || 'Remedy'}
</figcaption>
</figure>


{/* Accessible caption (screen readers only) */}
<figcaption className="sr-only">
{disease.alt_text || 'Remedy'}
</figcaption>
</figure>


{idx === activeCardIndex && (
<div className="absolute inset-0 bg-gradient-to-t from-amber-900/60 to-transparent flex items-end">
<span className="text-white text-xs sm:text-sm font-medium p-2 sm:p-3">View Details</span>
<div className="p-6">
<h3 className="text-xl font-bold text-gray-800 mb-2 line-clamp-2 group-hover:text-amber-700 transition-colors">
{disease.alt_text || 'Ayurvedic Treatment'}
Expand Down
Loading