mukeshs/operify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive check

Browse Source
This commit is contained in:
mukesh13
2025-09-12 11:17:42 +05:30
parent e925b985f2
commit b85ec3d929
14 changed files with 102 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/components/shared/IntroductionLayout.jsx
View File

@ -1,3 +1,5 @@
// components/shared/CombinedWorkflowLayout.jsx
import React from 'react';
const CombinedWorkflowLayout = ({
@ -9,25 +11,25 @@ const CombinedWorkflowLayout = ({
imageAlt = "Workflow diagram"
}) => {
return (
<div className="w-full bg-white">
<div className="w-full min-w-0 bg-white">
{/* Main container with two columns */}
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] min-h-screen">
<div className="grid grid-cols-1 lg:grid-cols-[1.2fr_1.0fr] gap-0">
{/* Left Column - Content */}
<div className="px-6 lg:px-12 py-8">
<div className="w-full min-w-0 px-4 sm:px-6 lg:px-12 py-6 lg:py-8">
{/* Introduction Section */}
<section className="mb-8">
<h2 className="text-3xl font-bold text-teal-700 mb-4">
<h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
{introTitle}
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
{introItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
<span className="text-justify break-words">{item}</span>
</li>
))}
</ul>
@ -35,17 +37,17 @@ const CombinedWorkflowLayout = ({
{/* Advantage Section */}
<section>
<h2 className="text-3xl font-bold text-teal-700 mb-4">
<h2 className="text-2xl sm:text-3xl font-bold text-teal-700 mb-4">
{advantageTitle}
</h2>
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm lg:text-base">
<ul className="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
{advantageItems.map((item, index) => (
<li key={index} className="flex items-start">
<span
className="inline-block w-2 h-2 rounded-full mt-2 mr-3 flex-shrink-0"
style={{backgroundColor: '#faae31'}}
></span>
<span className="text-justify">{item}</span>
<span className="text-justify break-words">{item}</span>
</li>
))}
</ul>
@ -53,19 +55,21 @@ const CombinedWorkflowLayout = ({
</div>
{/* Right Column - Workflow Image */}
<div className="relative flex items-start justify-center p-4">
{imageUrl ? (
<img
src={imageUrl}
alt={imageAlt}
className="max-w-full min-h-90px object-contain"
/>
) : (
<div className="text-gray-400 text-center">
<p>Workflow image will appear here</p>
<p className="text-sm mt-2">Please provide the imageUrl prop</p>
</div>
)}
<div className="w-full min-w-0 flex items-start justify-center p-4 lg:p-6">
<div className="w-full max-w-md">
{imageUrl ? (
<img
src={imageUrl}
alt={imageAlt}
className="w-full h-auto object-contain"
/>
) : (
<div className="text-gray-400 text-center p-8">
<p>Workflow image will appear here</p>
<p className="text-sm mt-2">Please provide the imageUrl prop</p>
</div>
)}
</div>
</div>
</div>
</div>