chore: setup project for production
This commit is contained in:
afnaann
9
components/certification/CertificationBannerOne.jsx
Normal file
9
components/certification/CertificationBannerOne.jsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
const CertificationBannerOne = () => {
|
||||
return (
|
||||
<div className="bg-[url('/certification/certification-one.jpg')] min-h-[50vh] bg-center bg-cover"></div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CertificationBannerOne;
|
||||
68
components/certification/CertificationBannerTwo.jsx
Normal file
68
components/certification/CertificationBannerTwo.jsx
Normal file
@@ -0,0 +1,68 @@
|
||||
'use client'
|
||||
import { ChevronRight } from 'lucide-react';
|
||||
import React, { useState } from 'react'
|
||||
|
||||
const CertificationBannerTwo = () => {
|
||||
const [selectedInfo, setSelectedInfo] = useState(0);
|
||||
|
||||
const infoItems = [
|
||||
{
|
||||
title: "Introduction",
|
||||
description: "Since 1973, Gupta Rudraksha has been committed to maintaining the highest quality standards for all its Rudraksha and Shaligram. To take our commitment to quality assurance even further, we have successfully complied with all the quality standards set forward by the International Organization for Standardization (ISO), and Gupta Rudraksha has been recognized as Nepal's first and only ISO 9001:2015 certified Rudraksha organization."
|
||||
},
|
||||
{
|
||||
title: "100% lifetime Moneyback Authenticity Guarantee",
|
||||
description: "Gupta Rudraksha is dedicated to preserving the sacred and ancient tradition of Rudraksha while making it accessible to seekers worldwide. Our certification process reflects our unwavering commitment to authenticity, quality, and the spiritual well-being of our customers.Choose Rudraksha beads with the Gupta Rudraksha certification, and embark on your spiritual journey with confidence and trust."
|
||||
},
|
||||
{
|
||||
title:"Book Premium Rudraksha Prana Pratistha Pooja",
|
||||
description:"All Our Pooja done based on your Birth Chart and your specific details following Vedic principles. Video Recording of the entire ceremony will be shared with you (Live Pooja is available upon request)."
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
const handleInfoClick = (index) => {
|
||||
setSelectedInfo(index);
|
||||
};
|
||||
return (
|
||||
<div className="bg-slate-50 p-4">
|
||||
<h1 className="sm:text-5xl sm:mt-24 text-2xl font-serif text-center tracking-wide mb-12">
|
||||
Gupta Rudraksha Information
|
||||
</h1>
|
||||
<div className="grid sm:grid-cols-3 gap-8">
|
||||
<div className="flex flex-col gap-4 sm:pl-10">
|
||||
{infoItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleInfoClick(index)}
|
||||
>
|
||||
<h2 className={`text-xl sm:my-4 ${selectedInfo === index ? 'text-yellow-700' : ''} hover:translate-x-4 hover:font-semibold hover:text-yellow-700 transition-all flex items-center`}>
|
||||
{selectedInfo === index ? (
|
||||
<ChevronRight className="mr-2" size={20} />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{item.title}
|
||||
</h2>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
{selectedInfo !== null && (
|
||||
<div className="bg-white p-6">
|
||||
<div className="flex flex-col gap-3 justify-start items-start">
|
||||
<h1 className='sm:text-4xl text-xl font-semibold'>{infoItems[selectedInfo].title}</h1>
|
||||
<p className="mb-4 mt-2 text-[1.05rem]">
|
||||
{infoItems[selectedInfo].description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CertificationBannerTwo
|
||||
81
components/certification/CertificationGallery.jsx
Normal file
81
components/certification/CertificationGallery.jsx
Normal file
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
|
||||
const CertificationGallerySection = () => {
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
|
||||
const images = [
|
||||
"/certification/gallery10.jpeg",
|
||||
"/certification/gallery5.png",
|
||||
"/certification/gallery12.jpeg",
|
||||
"/certification/gallery11.jpeg",
|
||||
];
|
||||
|
||||
const handleImageClick = (index) => {
|
||||
setSelectedImage(index);
|
||||
};
|
||||
|
||||
const handleClosePopup = () => {
|
||||
setSelectedImage(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-6xl px-4 py-8">
|
||||
<h2 className="text-3xl sm:text-5xl font-bold mb-6 text-center">
|
||||
Chamber of Commerce
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-4">
|
||||
{images.slice(0, 3).map((src, index) => (
|
||||
<div key={index} className="aspect-w-1 aspect-h-1">
|
||||
<Image
|
||||
src={src}
|
||||
alt={`Gallery image ${index + 1}`}
|
||||
// layout="responsive"
|
||||
width={500} // Adjust based on your desired image width
|
||||
height={500} // Adjust based on your desired image height
|
||||
className="object-cover w-full h-full cursor-pointer"
|
||||
onClick={() => handleImageClick(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="aspect-w-4 aspect-h-2">
|
||||
<Image
|
||||
src={images[3]}
|
||||
alt="Gallery image 5"
|
||||
layout="responsive"
|
||||
width={800} // Adjust based on your desired image width
|
||||
height={400} // Adjust based on your desired image height
|
||||
className="object-cover w-full h-full cursor-pointer"
|
||||
onClick={() => handleImageClick(4)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{selectedImage !== null && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
|
||||
<div className="relative max-w-3xl w-full">
|
||||
<Image
|
||||
src={images[selectedImage]}
|
||||
alt={`Gallery image ${selectedImage + 1}`}
|
||||
width={1200} // Adjust based on your desired image width
|
||||
height={800} // Adjust based on your desired image height
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
<button
|
||||
onClick={handleClosePopup}
|
||||
className="absolute top-4 right-4 text-yellow-400"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CertificationGallerySection;
|
||||
Reference in New Issue
Block a user