Docker config
This commit is contained in:
mukesh13
28
app/components/shared/AdvantagesLayout.jsx
Normal file
28
app/components/shared/AdvantagesLayout.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
// components/shared/AdvantagesLayout.jsx
|
||||
|
||||
const AdvantagesLayout = ({
|
||||
title = "Advantages",
|
||||
advantageItems = [],
|
||||
backgroundGradient = "bg-gradient-to-br from-white to-white",
|
||||
titleColor = "text-gray-700"
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-5 lg:py-8 ${backgroundGradient} rounded-2xl shadow-sm`}>
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<div className="text-justify px-4 lg:px-10">
|
||||
<ul className="space-y-4 text-gray-600 text-base leading-relaxed list-disc">
|
||||
{advantageItems.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdvantagesLayout;
|
||||
28
app/components/shared/ApplicationsLayout.jsx
Normal file
28
app/components/shared/ApplicationsLayout.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
// components/shared/ApplicationsLayout.jsx
|
||||
|
||||
const ApplicationsLayout = ({
|
||||
title = "Applications",
|
||||
applicationItems = [],
|
||||
backgroundColor = "bg-gray-50",
|
||||
titleColor = "text-gray-700"
|
||||
}) => {
|
||||
return (
|
||||
<section className={`py-5 lg:py-8 ${backgroundColor}`}>
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
<h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<ul className="list-disc list-inside space-y-4 text-gray-600 leading-relaxed lg:px-10">
|
||||
{applicationItems.map((item, index) => (
|
||||
<li key={index} className="text-base">
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ApplicationsLayout;
|
||||
45
app/components/shared/IntroductionLayout.jsx
Normal file
45
app/components/shared/IntroductionLayout.jsx
Normal file
@ -0,0 +1,45 @@
|
||||
// components/shared/IntroductionLayout.jsx
|
||||
|
||||
const IntroductionLayout = ({
|
||||
title = "Introduction and Workflow",
|
||||
contentItems = [],
|
||||
imageUrl,
|
||||
imageAlt = "",
|
||||
badgeText,
|
||||
badgeSubtext,
|
||||
backgroundColor = "#f8f9fa",
|
||||
badgeColor = "bg-teal-600"
|
||||
}) => {
|
||||
return (
|
||||
<section className="py-0 md:py-12 lg:py-10">
|
||||
<div className="container-fluid px-0">
|
||||
<h2 className="text-2xl lg:text-3xl text-gray-700 text-left pb-2 px-4 lg:px-8 mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
{/* Two column layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1.14fr_1fr] min-h-[140px] lg:min-h-[280px]">
|
||||
{/* Left side content */}
|
||||
<div className="px-6 lg:px-9 py-6 lg:py-0">
|
||||
<ul className="list-disc list-inside space-y-3 text-gray-600 leading-relaxed lg:px-10 text-justify-center">
|
||||
{contentItems.map((item, index) => (
|
||||
<li key={index}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Right side image */}
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: imageUrl ? `url('${imageUrl}')` : 'none',
|
||||
backgroundColor: backgroundColor
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default IntroductionLayout;
|
||||
68
app/components/shared/SpecificationsLayout.jsx
Normal file
68
app/components/shared/SpecificationsLayout.jsx
Normal file
@ -0,0 +1,68 @@
|
||||
// components/shared/SpecificationsLayout.jsx
|
||||
import Link from 'next/link';
|
||||
|
||||
const SpecificationsLayout = ({
|
||||
title = "Service Specifications",
|
||||
titleColor = "text-gray-800",
|
||||
specificationItems = [],
|
||||
backgroundColor = "#e8f5f3",
|
||||
iconBackgroundColor = "bg-teal-600"
|
||||
}) => {
|
||||
return (
|
||||
<section className="py-8 lg:py-12">
|
||||
<div className="container-fluid px-4 lg:px-6">
|
||||
{/* Section Header */}
|
||||
<div className="text-left mb-8">
|
||||
<h2 className={`text-2xl lg:text-3xl ${titleColor} text-left pb-2 mb-6 lg:mb-6`}>
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Specifications Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
{specificationItems.map((spec, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative"
|
||||
>
|
||||
{/* Background Card */}
|
||||
<div
|
||||
className="rounded-3xl p-8 h-full min-h-[280px] flex flex-col"
|
||||
style={{ backgroundColor: backgroundColor }}
|
||||
>
|
||||
{/* Icon Circle */}
|
||||
<div className="flex justify-center mb-6">
|
||||
<div className={`w-16 h-16 ${iconBackgroundColor} rounded-full flex items-center justify-center`}>
|
||||
<img
|
||||
src={spec.icon}
|
||||
className="w-14 h-14 object-contain brightness-0 invert"
|
||||
alt={`${spec.title} Icon`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-center text-gray-800 text-lg font-semibold mb-4">
|
||||
{spec.title}
|
||||
</h3>
|
||||
|
||||
{/* Content */}
|
||||
<div className="text-gray-700 text-sm leading-relaxed text-center flex-grow flex items-center justify-center">
|
||||
<div className="w-full">
|
||||
{spec.renderContent ? spec.renderContent() : (
|
||||
<div className="text-gray-600">
|
||||
{spec.content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default SpecificationsLayout;
|
||||
56
app/components/shared/TitleBar.jsx
Normal file
56
app/components/shared/TitleBar.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
// components/shared/TitleBar.jsx
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const TitleBar = ({ title, desc, breadcrumbs, backgroundImage = "/images/bredcrumb.jpg" }) => {
|
||||
return (
|
||||
<section
|
||||
className="relative bg-cover bg-center py-4 sm:py-6 h-auto sm:h-32 md:h-40 lg:h-[12rem] min-h-[120px] sm:min-h-[140px]"
|
||||
style={{ backgroundImage: `url('${backgroundImage}')` }}
|
||||
>
|
||||
{/* Breadcrumb */}
|
||||
<div className="relative z-10 mb-6 sm:mb-5 pt-2 sm:pt-0 sm:-mt-3 lg:-mt-3">
|
||||
<div className="container mx-auto max-w-none px-4">
|
||||
<nav className="flex flex-wrap items-center gap-1 sm:gap-2 text-xs sm:text-sm lg:text-sm">
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{crumb.current ? (
|
||||
<span className="text-white whitespace-nowrap">
|
||||
{crumb.label}
|
||||
</span>
|
||||
) : (
|
||||
<Link
|
||||
href={crumb.href}
|
||||
className="text-white hover:text-yellow-400 underline whitespace-nowrap"
|
||||
>
|
||||
{crumb.label}
|
||||
</Link>
|
||||
)}
|
||||
{index < breadcrumbs.length - 1 && (
|
||||
<span className="text-white flex-shrink-0">
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Page Title */}
|
||||
<div className="relative z-10 text-center pb-2 sm:pb-0 sm:-mt-2 lg:mt-2">
|
||||
<h1 className="text-base sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl font-bold text-white mb-2 px-4 leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
<h3 className="text-base sm:text-xl md:text-2xl lg:text-3xl xl:text-2xl font-bold text-white mb-2 px-4 leading-tight">
|
||||
{desc}
|
||||
</h3>
|
||||
<div className="w-12 sm:w-14 md:w-16 lg:w-16 h-1 bg-yellow-400 mx-auto"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default TitleBar;
|
||||
Reference in New Issue
Block a user