blog slug updation and email result are updated

This commit is contained in:
akash 2026-03-16 18:47:58 +05:30
parent ffd1a8e5a0
commit 6cb852bdca
9 changed files with 147 additions and 123 deletions

43
src/app/[slug]/page.tsx Normal file
View File

@ -0,0 +1,43 @@
import React from "react";
import { BlogData } from "@/utils/constant.utils";
import BlogDetailsClient from "@/app/blog/[slug]/BlogDetailsClient";
import { Metadata } from "next";
import { notFound } from "next/navigation";
const blogs = BlogData;
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
const { slug } = await params;
const blog = blogs.find((b) => b.slug === slug);
if (!blog) {
return {
title: "Blog Not Found",
};
}
return {
title: blog.metatitle || blog.title || "Blog Details",
description: blog.metaDisc || blog.description || "Read more on Metatroncube blog.",
alternates: {
canonical: `/${slug}`,
},
};
}
export async function generateStaticParams() {
return blogs.map((blog) => ({
slug: blog.slug,
}));
}
export default async function BlogDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params;
const blog = blogs.find((b) => b.slug === slug);
if (!blog) {
notFound();
}
return <BlogDetailsClient blog={blog} />;
}

View File

@ -1,32 +1,13 @@
import React from "react"; import { permanentRedirect } from "next/navigation";
import { BlogData } from "@/utils/constant.utils"; import { BlogData } from "@/utils/constant.utils";
import BlogDetailsClient from "./BlogDetailsClient";
import { Metadata } from "next";
const blogs = BlogData;
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
const { slug } = await params;
const blog = blogs.find((b) => b.slug === slug);
return {
title: blog?.metatitle || blog?.title || "Blog Details",
description: blog?.metaDisc || blog?.description || "Read more on Metatroncube blog.",
alternates: {
canonical: `/blog/${slug}`,
},
};
}
export async function generateStaticParams() { export async function generateStaticParams() {
return blogs.map((blog) => ({ return BlogData.map((blog) => ({
slug: blog.slug, slug: blog.slug,
})); }));
} }
export default async function BlogDetailsPage({ params }: { params: Promise<{ slug: string }> }) { export default async function BlogDetailsRedirect({ params }: { params: Promise<{ slug: string }> }) {
const { slug } = await params; const { slug } = await params;
const blog = blogs.find((b) => b.slug === slug); permanentRedirect(`/${slug}`);
return <BlogDetailsClient blog={blog} />;
} }

View File

@ -145,13 +145,13 @@ const BlogSidebar = ({
{recentPosts.map((post: any) => ( {recentPosts.map((post: any) => (
<div key={post.id} className="single-post-item"> <div key={post.id} className="single-post-item">
<div className="thumb bg-cover"> <div className="thumb bg-cover">
<Link href={`/blog/${post.slug}`}> <Link href={`/${post.slug}`}>
<img src={post.image} alt={post.title} /> <img src={post.image} alt={post.title} />
</Link> </Link>
</div> </div>
<div className="post-content"> <div className="post-content">
<h5> <h5>
<Link href={`/blog/${post.slug}`}>{post.title}</Link> <Link href={`/${post.slug}`}>{post.title}</Link>
</h5> </h5>
<div className="post-date"> <div className="post-date">
<i className="fa-regular fa-calendar"></i> {post.date} <i className="fa-regular fa-calendar"></i> {post.date}

View File

@ -164,7 +164,7 @@ const CareersContactPopup: React.FC<CareersContactPopupProps> = ({
setAlert({ setAlert({
show: true, show: true,
type: "success", type: "success",
message: res?.data?.message || "Application submitted successfully!", message: "Thank you! Your message has been sent successfully.",
}); });
setFormData({ name: "", email: "", phone: "", position: defaultPosition, message: "" }); setFormData({ name: "", email: "", phone: "", position: defaultPosition, message: "" });
setResumeFile(null); setResumeFile(null);

View File

@ -94,7 +94,7 @@ const ContactSection = () => {
setAlert({ setAlert({
show: true, show: true,
type: "success", type: "success",
message: res?.data?.message || "Message sent successfully!", message: "Thank you! Your message has been sent successfully.",
}); });
setFormData({ setFormData({
@ -182,94 +182,94 @@ const ContactSection = () => {
)} )}
<form className="contact-one__form form-one" onSubmit={handleSubmit}> <div className="form-one__group"> <form className="contact-one__form form-one" onSubmit={handleSubmit}> <div className="form-one__group">
<div className="mb-20"> <div className="mb-20">
<label className="form-label-custom">Full Name</label> <label className="form-label-custom">Full Name</label>
<input <input
type="text" type="text"
name="name" name="name"
placeholder="Full Name" placeholder="Full Name"
value={formData.name} value={formData.name}
onChange={handleChange} onChange={handleChange}
className="form-input-custom-global" className="form-input-custom-global"
suppressHydrationWarning={true} suppressHydrationWarning={true}
/> />
{formErrors.name && <small className="text-danger">{formErrors.name}</small>} {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
</div>
<div className="mb-20">
<label className="form-label-custom">Email Address</label>
<input
type="email"
name="email"
placeholder="Email Address"
value={formData.email}
onChange={handleChange}
className="form-input-custom-global"
suppressHydrationWarning={true}
/>
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
</div>
<div className="mb-20">
<label className="form-label-custom">Phone Number</label>
<input
type="text"
name="phone"
placeholder="Phone Number"
value={formData.phone}
onChange={handleChange}
className="form-input-custom-global"
suppressHydrationWarning={true}
/>
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
</div>
<div className="mb-20">
<label className="form-label-custom">Select Service</label>
<select
name="service"
value={formData.service}
onChange={handleChange}
className="form-select-custom-styled-global"
suppressHydrationWarning={true}
>
<option value="">Select Service</option>
<option value="Website Development">Website Development</option>
<option value="Mobile Application Development">Mobile Application Development</option>
<option value="Graphic Designing">Graphic Designing</option>
<option value="UI / UX Designing">UI / UX Designing</option>
<option value="SEO & Content Writing">SEO & Content Writing</option>
<option value="Digital Marketing">Digital Marketing</option>
<option value="ERP Development & Implementation">ERP Development & Implementation</option>
</select>
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
</div>
<div className="form-one__control--full mb-20">
<label className="form-label-custom">Write Message</label>
<textarea
name="message"
placeholder="Write Message"
rows={4}
value={formData.message}
onChange={handleChange}
className="form-textarea-custom-global"
suppressHydrationWarning={true}
></textarea>
{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
</div>
<div className="form-one__control--full mb-3 mt-3">
<ReCAPTCHA
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
onChange={handleCaptchaChange}
/>
{formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
</div>
<div className="form-one__control--full">
<button type="submit" className="submit-btn-custom-global">
<b>SEND A Message</b>
<span></span>
</button>
</div>
</div> </div>
<div className="mb-20">
<label className="form-label-custom">Email Address</label>
<input
type="email"
name="email"
placeholder="Email Address"
value={formData.email}
onChange={handleChange}
className="form-input-custom-global"
suppressHydrationWarning={true}
/>
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
</div>
<div className="mb-20">
<label className="form-label-custom">Phone Number</label>
<input
type="text"
name="phone"
placeholder="Phone Number"
value={formData.phone}
onChange={handleChange}
className="form-input-custom-global"
suppressHydrationWarning={true}
/>
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
</div>
<div className="mb-20">
<label className="form-label-custom">Select Service</label>
<select
name="service"
value={formData.service}
onChange={handleChange}
className="form-select-custom-styled-global"
suppressHydrationWarning={true}
>
<option value="">Select Service</option>
<option value="Website Development">Website Development</option>
<option value="Mobile Application Development">Mobile Application Development</option>
<option value="Graphic Designing">Graphic Designing</option>
<option value="UI / UX Designing">UI / UX Designing</option>
<option value="SEO & Content Writing">SEO & Content Writing</option>
<option value="Digital Marketing">Digital Marketing</option>
<option value="ERP Development & Implementation">ERP Development & Implementation</option>
</select>
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
</div>
<div className="form-one__control--full mb-20">
<label className="form-label-custom">Write Message</label>
<textarea
name="message"
placeholder="Write Message"
rows={4}
value={formData.message}
onChange={handleChange}
className="form-textarea-custom-global"
suppressHydrationWarning={true}
></textarea>
{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
</div>
<div className="form-one__control--full mb-3 mt-3">
<ReCAPTCHA
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
onChange={handleCaptchaChange}
/>
{formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
</div>
<div className="form-one__control--full">
<button type="submit" className="submit-btn-custom-global">
<b>SEND A Message</b>
<span></span>
</button>
</div>
</div>
</form> </form>
</div> </div>
</div> </div>

View File

@ -56,7 +56,7 @@ const FaqVideoSection = () => {
setAlert({ setAlert({
show: true, show: true,
type: "success", type: "success",
message: res?.data?.message || "Message sent successfully!", message: "Thank you! Your message has been sent successfully.",
}); });
setFormData({ name: "", phone: "", email: "", service: "", message: "" }); setFormData({ name: "", phone: "", email: "", service: "", message: "" });

View File

@ -56,7 +56,7 @@ const ContactSection = () => {
setAlert({ setAlert({
show: true, show: true,
type: "success", type: "success",
message: res?.data?.message || "Message sent successfully!", message: "Thank you! Your message has been sent successfully.",
}); });
setFormData({ setFormData({

View File

@ -56,7 +56,7 @@ const HomeContactOne = () => {
setAlert({ setAlert({
show: true, show: true,
type: "success", type: "success",
message: res?.data?.message || "Message sent successfully!", message: "Thank you! Your message has been sent successfully.",
}); });
setFormData({ setFormData({

View File

@ -139,7 +139,7 @@ const BlogSection = ({
{currentBlogs.map((blog) => ( {currentBlogs.map((blog) => (
<div key={blog.id} className="blog-slider-item px-3"> <div key={blog.id} className="blog-slider-item px-3">
<div className="blog-style-one relative overflow-hidden"> <div className="blog-style-one relative overflow-hidden">
<Link className="blog-image w-img block relative" href={`/blog/${blog.slug}`}> <Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
<img src={blog.image} alt={blog.title} /> <img src={blog.image} alt={blog.title} />
<span className="blog-category-tag">{blog.category}</span> <span className="blog-category-tag">{blog.category}</span>
</Link> </Link>
@ -149,11 +149,11 @@ const BlogSection = ({
<span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span> <span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
</div> </div>
<h5 className="blog-title mb-20 mt-15"> <h5 className="blog-title mb-20 mt-15">
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link> <Link href={`/${blog.slug}`}>{blog.title}</Link>
</h5> </h5>
<div className="blog-footer"> <div className="blog-footer">
<div className="blog-link-learn"> <div className="blog-link-learn">
<Link href={`/blog/${blog.slug}`} className="learn-more-link"> <Link href={`/${blog.slug}`} className="learn-more-link">
Learn More <span>+</span> Learn More <span>+</span>
</Link> </Link>
</div> </div>
@ -168,7 +168,7 @@ const BlogSection = ({
{currentBlogs.map((blog) => ( {currentBlogs.map((blog) => (
<div key={blog.id} className={columns}> <div key={blog.id} className={columns}>
<div className="blog-style-one relative overflow-hidden"> <div className="blog-style-one relative overflow-hidden">
<Link className="blog-image w-img block relative" href={`/blog/${blog.slug}`}> <Link className="blog-image w-img block relative" href={`/${blog.slug}`}>
<img src={blog.image} alt={blog.title} /> <img src={blog.image} alt={blog.title} />
<span className="blog-category-tag">{blog.category}</span> <span className="blog-category-tag">{blog.category}</span>
</Link> </Link>
@ -178,11 +178,11 @@ const BlogSection = ({
<span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span> <span className="p-relative"><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
</div> </div>
<h5 className="blog-title mb-20 mt-15"> <h5 className="blog-title mb-20 mt-15">
<Link href={`/blog/${blog.slug}`}>{blog.title}</Link> <Link href={`/${blog.slug}`}>{blog.title}</Link>
</h5> </h5>
<div className="blog-footer"> <div className="blog-footer">
<div className="blog-link-learn"> <div className="blog-link-learn">
<Link href={`/blog/${blog.slug}`} className="learn-more-link"> <Link href={`/${blog.slug}`} className="learn-more-link">
Learn More <span>+</span> Learn More <span>+</span>
</Link> </Link>
</div> </div>