chore: setup project for production
This commit is contained in:
afnaann
184
components/blog/BlogHome.jsx
Normal file
184
components/blog/BlogHome.jsx
Normal file
@@ -0,0 +1,184 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const BlogPost = ({ title, author, date, excerpt, imageUrl }) => (
|
||||
<div className="mb-6 flex sm:flex-row flex-col">
|
||||
<div className=" h-full bg-purple-100 sm:w-1/2">
|
||||
<Link href={`/blogs/blog/${title}`}>
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={title || "Image"}
|
||||
className="object-cover rounded-md"
|
||||
layout="responsive"
|
||||
width={500}
|
||||
height={300}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="sm:w-2/3 p-4">
|
||||
<Link href={`/blogs/blog/${title}`}>
|
||||
<h3 className="text-xl sm:text-2xl font-bold">{title}</h3>
|
||||
</Link>
|
||||
<p className="text-sm sm:text-lg text-gray-500 mb-2">
|
||||
{author} | {date}
|
||||
</p>
|
||||
<p className="text-sm">{excerpt}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const PopularArticle = ({ title, author, date }) => (
|
||||
<div className="mb-4">
|
||||
<h4 className="font-semibold">{title}</h4>
|
||||
<p className="text-sm text-gray-500">
|
||||
{author} | {date}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const BlogHome = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const postsPerPage = 3;
|
||||
|
||||
const recentBlogPosts = [
|
||||
{
|
||||
title: "Benefits of Wearing Rudraksha Mala",
|
||||
author: "Gupta Rudraksha",
|
||||
date: "29 August, 2024",
|
||||
excerpt:
|
||||
"Rudraksha are sacred beads of great significance in Hinduism and various spiritual practices. The term Rudraksha combines two Sanskrit words: 'Rudra,' another name for Lord Sh...",
|
||||
imageUrl: "/blogs/significance-of-dhanteras.webp",
|
||||
},
|
||||
{
|
||||
title: "Shravan Maas for Spiritual Growth and Divine Connection",
|
||||
author: "Gupta Rudraksha",
|
||||
date: "04 September, 2024",
|
||||
excerpt:
|
||||
"Shrawan Mass, a sacred month in the Hindu calendar, holds deep spiritual significance for millions of devotees. But what exactly is Shravan Maas, and why is it so important? Let...",
|
||||
imageUrl: "/blogs/navaratri-siginificance.webp",
|
||||
},
|
||||
{
|
||||
title: "The Complete Guide to Rudraksha Energization",
|
||||
author: "Gupta Rudraksha",
|
||||
date: "28 August, 2024",
|
||||
excerpt:
|
||||
"For centuries, Rudraksha beads have been valued not only for their aesthetic beauty, but also for their powerful spiritual and healing properties. Whether you're a seasoned prac...",
|
||||
imageUrl: "/blogs/rudraksha-pran-pratishtha-pooja.webp",
|
||||
},
|
||||
{
|
||||
title: "Strengthening Planetary Forces with Rudraksha",
|
||||
author: "Gupta Rudraksha",
|
||||
date: "26 April, 2024",
|
||||
excerpt:
|
||||
"In the vast universe, planets hold immense power over our lives, influencing everything from our moods to our destinies. However, Rudraksha beads, ancient treasures from the ear...",
|
||||
imageUrl: "/api/placeholder/300/200",
|
||||
},
|
||||
];
|
||||
|
||||
const popularArticles = [
|
||||
{
|
||||
title: "Dhanteras Significance and How Rudraksha Brings Prosperity",
|
||||
author: "Gupta Rudraksha",
|
||||
date: "30 September, 2024",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Certified Rudraksha: Nepal's 1st ISO 9001:2015 Certified Organization",
|
||||
author: "Gupta Admin",
|
||||
date: "30 September, 2024",
|
||||
},
|
||||
];
|
||||
|
||||
const indexOfLastPost = currentPage * postsPerPage;
|
||||
const indexOfFirstPost = indexOfLastPost - postsPerPage;
|
||||
const currentPosts = recentBlogPosts.slice(indexOfFirstPost, indexOfLastPost);
|
||||
|
||||
const paginate = (pageNumber) => setCurrentPage(pageNumber);
|
||||
|
||||
return (
|
||||
<div className="container max-w-8xl mx-auto sm:px-20 px-3 ">
|
||||
<h1 className="sm:text-5xl pt-3 text-3xl font-bold mb-8">
|
||||
Insights from Gupta Rudraksha
|
||||
</h1>
|
||||
<p className="sm:text-2xl text-lg ">
|
||||
Explore our latest articles on the spiritual, cultural, and healing
|
||||
aspects
|
||||
</p>
|
||||
{/* top container for one blog card */}
|
||||
<dir className="min-h-[30vh] flex sm:flex-row flex-col-reverse">
|
||||
<div className="mb-6 flex sm:flex-row flex-col">
|
||||
<div className="h-full bg-purple-100">
|
||||
<Link href={`/blogs/blog/`}>
|
||||
<Image
|
||||
src="/blogs/significance-of-dhanteras.webp"
|
||||
alt="images blog"
|
||||
layout="intrinsic"
|
||||
width={600}
|
||||
height={400}
|
||||
className="object-cover rounded-md"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="sm:w-2/3 p-4">
|
||||
<Link href={`/blogs/blog/`}>
|
||||
<h3 className="text-xl sm:text-2xl font-bold">
|
||||
Dhanteras Significance and How Rudraksha Brings Prosperity and
|
||||
Protection
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="text-sm sm:text-lg text-gray-500 mb-2">
|
||||
Gupta Rudraksha | 30 September, 2024
|
||||
</p>
|
||||
<p className="text-sm py-4 line-clamp-2">
|
||||
Dhanteras, the first day of Diwali festival, marks a unique
|
||||
celebration of wealth and prosperity in Hindu tradition. As the
|
||||
name suggests - 'Dhan' meaning wealth and
|
||||
'Teras' ref
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full lg:w-1/3 px-4">
|
||||
<h2 className="text-2xl font-bold mb-4">Popular Articles</h2>
|
||||
{popularArticles.map((article, index) => (
|
||||
<PopularArticle key={index} {...article} />
|
||||
))}
|
||||
</div>
|
||||
</dir>
|
||||
|
||||
<div className="flex flex-wrap -mx-4">
|
||||
<div className="w-full lg:w-2/3 px-4">
|
||||
<h2 className="sm:text-4xl text-2xl font-bold mb-4">Recent Blogs</h2>
|
||||
{currentPosts.map((post, index) => (
|
||||
<BlogPost key={index} {...post} />
|
||||
))}
|
||||
<div className="flex justify-center space-x-2 mb-8 items-center pt-6">
|
||||
{[...Array(Math.ceil(recentBlogPosts.length / postsPerPage))].map(
|
||||
(_, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
onClick={() => paginate(index + 1)}
|
||||
variant={currentPage === index + 1 ? "default" : "outline"}
|
||||
>
|
||||
{index + 1}
|
||||
</Button>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full lg:w-1/3 px-4">
|
||||
<h2 className="text-2xl font-bold mb-4">Popular Articles</h2>
|
||||
{popularArticles.map((article, index) => (
|
||||
<PopularArticle key={index} {...article} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogHome;
|
||||
47
components/blog/SingleBlog.jsx
Normal file
47
components/blog/SingleBlog.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import "./blog.css";
|
||||
|
||||
const SingleBlog = () => {
|
||||
const [blogResData, setResData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/blog");
|
||||
const blog = await response.json();
|
||||
setResData(blog.blogdata);
|
||||
} catch (error) {
|
||||
console.error("Error fetching blog data:", error);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-5 space-y-6 bg-white shadow-lg rounded-lg">
|
||||
{/* Blog Image */}
|
||||
<div className="w-full flex justify-center">
|
||||
<Image
|
||||
src={"/blogs/significance-of-dhanteras.webp"}
|
||||
height={500}
|
||||
width={800}
|
||||
alt="Blog Cover Image"
|
||||
className="rounded-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Blog Content */}
|
||||
<div className="prose lg:prose-xl mx-auto text-gray-800 leading-relaxed">
|
||||
{blogResData ? (
|
||||
<div dangerouslySetInnerHTML={{ __html: blogResData }} />
|
||||
) : (
|
||||
<p className="text-center text-gray-500">Loading blog content...</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleBlog;
|
||||
187
components/blog/blog.css
Normal file
187
components/blog/blog.css
Normal file
@@ -0,0 +1,187 @@
|
||||
/* General Blog Styles */
|
||||
.blog-content {
|
||||
font-family: 'Arial', sans-serif;
|
||||
color: #333;
|
||||
line-height: 1.7;
|
||||
margin: 20px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.blog-content h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 20px;
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.blog-content h2 {
|
||||
font-size: 2.2em;
|
||||
margin-bottom: 18px;
|
||||
color: #2980b9;
|
||||
}
|
||||
|
||||
.blog-content h3 {
|
||||
font-size: 1.9em;
|
||||
margin-bottom: 12px;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.blog-content p {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 20px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.blog-content ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.blog-content li {
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Section Backgrounds and Styles */
|
||||
.intro, .festival, .rudraksha, .recommendations, .rituals, .conclusion {
|
||||
padding: 20px;
|
||||
margin-bottom: 25px;
|
||||
border-left: 6px solid;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.intro {
|
||||
background-color: #f9f9f9;
|
||||
border-color: #c0392b;
|
||||
}
|
||||
|
||||
.festival {
|
||||
background-color: #ecf0f1;
|
||||
border-color: #2980b9;
|
||||
}
|
||||
|
||||
.rudraksha {
|
||||
background-color: #fdfefe;
|
||||
border-color: #8e44ad;
|
||||
}
|
||||
|
||||
.recommendations {
|
||||
background-color: #f1c40f;
|
||||
border-color: #e67e22;
|
||||
}
|
||||
|
||||
.rituals {
|
||||
background-color: #f8f9f9;
|
||||
border-color: #16a085;
|
||||
}
|
||||
|
||||
.conclusion {
|
||||
background-color: #f0f3f4;
|
||||
border-color: #27ae60;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 1200px) {
|
||||
.blog-content h1 {
|
||||
font-size: 2.2em;
|
||||
}
|
||||
|
||||
.blog-content h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.blog-content h3 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
.blog-content p {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.intro, .festival, .rudraksha, .recommendations, .rituals, .conclusion {
|
||||
padding: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.blog-content h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.blog-content h2 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.blog-content h3 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.blog-content p {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.intro, .festival, .rudraksha, .recommendations, .rituals, .conclusion {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.blog-content h1 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.blog-content h2 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.blog-content h3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.blog-content p {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.intro, .festival, .rudraksha, .recommendations, .rituals, .conclusion {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.blog-content h1 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.blog-content h2 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.blog-content h3 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.blog-content p {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.blog-content {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.intro, .festival, .rudraksha, .recommendations, .rituals, .conclusion {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user