images updated

app/(blogs)/news-details/[slug]/page.jsx

@@ -1,19 +1,28 @@
+// app/news-details/[slug]/page.jsx
+
 import BlogDetails from "@/components/blogs/BlogDetails";
-import Brands from "@/components/common/Brands";
 import Footer1 from "@/components/footers/Footer1";
 import Header1 from "@/components/headers/Header1";
-import { BlogData } from "@/utlis/constant.utils";
+import { allBlogs } from "@/utlis/constant.utils";
 import Image from "next/image";
 import Link from "next/link";
+import { notFound } from "next/navigation";
 
 export const metadata = {
   title: "Blog Details || Xbuild - Construction Next.js Template",
   description: "Xbuild - Construction Next.js Template",
 };
 
-export default function page({ params }) {
+export async function generateStaticParams() {
-  const newsItem =
+  return allBlogs.map((item) => ({ slug: item.slug }));
-    BlogData.find((elm) => elm.slug === params.slug) || BlogData[0];
+}
+
+export default function Page({ params }) {
+  const newsItem = allBlogs.find((elm) => elm.slug === params.slug);
+
+  if (!newsItem) {
+    notFound(); // Show 404 if not found
+  }
 
   return (
     <>
@@ -43,8 +52,7 @@ export default function page({ params }) {
                 <li>Blog Details</li>
               </ul>
             </div>
-            <div className="breadcrumb-image">
+            <div className="breadcrumb-image" />
-            </div>
           </div>
         </div>
       </div>

components/blogs/BlogDetails.jsx

@@ -1,5 +1,5 @@
+
 "use client";
-import { BlogData } from "@/utlis/constant.utils";
 
 export default function BlogDetails({ newsItem }) {
   return (
@@ -18,7 +18,7 @@ export default function BlogDetails({ newsItem }) {
                 <div className="post-content">
                   <ul className="post-list d-flex align-items-center">
                     <li>
-                      <i className="fa-regular fa-user" /> By Admin
+                      <i className="fa-regular fa-user" /> {newsItem.author?.name || "Admin"}
                     </li>
                     <li>
                       <i className="fa-solid fa-calendar-days" /> {newsItem.date}

components/blogs/Blogs.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Pagination from "../common/Pagination";
-import { BlogData } from "@/utlis/constant.utils";
+import { allBlogs } from "@/utlis/constant.utils";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -9,7 +9,7 @@ export default function Blogs() {
     <section className="news-section2 fix section-padding">
       <div className="container">
         <div className="row g-4">
-          {BlogData.map((news) => (
+          {allBlogs.slice(-3).map((news) => (
             <div
               key={news.id}
               className={`col-xl-4 col-lg-6 col-md-6 wow fadeInUp ${
@@ -19,7 +19,7 @@ export default function Blogs() {
             >
               <div className="news-box-items mt-0">
                 <div className="news-image">
-                  {news.images.map((image, index) => (
+                  {news.images?.map((image, index) => (
                     <Image
                       key={index}
                       src={image}
@@ -64,6 +64,9 @@ export default function Blogs() {
             </div>
           ))}
         </div>
+
+        {/* Optional pagination if needed */}
+        {/* <Pagination /> */}
       </div>
     </section>
   );

components/homes/home-1/Blogs.jsx

@@ -1,9 +1,19 @@
-import { newsImageItems,newsItems } from "@/utlis/constant.utils";
+import { allBlogs } from "@/utlis/constant.utils";
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import AnimatedText from "@/components/common/AnimatedText";
+
+function truncateWords(text, wordLimit) {
+  const words = text.split(" ");
+  return words.length > wordLimit
+    ? words.slice(0, wordLimit).join(" ") + "..."
+    : text;
+}
+
 export default function Blogs() {
+  const [leftBlog, ...rightBlogs] = allBlogs.slice(0, 3);
+
   return (
     <section
       id="blog"
@@ -11,7 +21,7 @@ export default function Blogs() {
     >
       <div className="shape-1 float-bob-y">
         <Image
-          src="/assets/img/news/shape-1.png"
+          src="/assets/img/blog/blog-left.webp"
           width={165}
           height={116}
           alt="img"
@@ -19,7 +29,7 @@ export default function Blogs() {
       </div>
       <div className="shape-2 float-bob-x">
         <Image
-          src="/assets/img/news/shape-2.png"
+          src="/assets/img/blog/blog-right.webp"
           width={165}
           height={116}
           alt="img"
@@ -36,43 +46,49 @@ export default function Blogs() {
             <AnimatedText text="Latest News & Blog" />
           </h2>
         </div>
+
         <div className="row">
           <div className="col-lg-6 wow fadeInUp" data-wow-delay=".2s">
-            {newsImageItems.map((item) => (
+            {leftBlog && (
               <div
-                key={item.id}
+                key={leftBlog.id}
                 className="news-image-items bg-cover"
-                style={{ backgroundImage: `url("${item.backgroundImage}")` }}
+                style={{ backgroundImage: `url("${leftBlog.image}")` }}
               >
                 <div className="news-content">
                   <ul>
                     <li>
                       <i className="fa-regular fa-user" />
-                      {item.author}
+                      {leftBlog.author.name}
                     </li>
                     <li>
                       <i className="fa-solid fa-tag" />
-                      {item.category}
+                      {leftBlog.category}
                     </li>
                   </ul>
                   <h3>
-                    <Link href={`/news-details/${item.slug}`}>
+                    <Link href={`/news-details/${leftBlog.slug}`}>
-                      {item.title.split("<br />").map((line, index) => (
+                      {truncateWords(leftBlog.title.replace(/<[^>]+>/g, ""), 12)
-                        <React.Fragment key={index}>
+                        .split("<br />")
-                          {line}
+                        .map((line, index) => (
-                          <br />
+                          <React.Fragment key={index}>
-                        </React.Fragment>
+                            {line}
-                      ))}
+                            <br />
+                          </React.Fragment>
+                        ))}
                     </Link>
                   </h3>
-                  <p className="text-white">{item.description}</p>
+                  <p className="text-white">
+                    {truncateWords(leftBlog.description.replace(/<[^>]+>/g, ""), 70)}
+                  </p>
                 </div>
               </div>
-            ))}
+            )}
           </div>
+
           <div className="col-lg-6">
             <div className="news-right-items">
-              {newsItems.map((item) => (
+              {rightBlogs.map((item) => (
                 <div
                   key={item.id}
                   className="news-card-items wow fadeInUp"
@@ -82,7 +98,7 @@ export default function Blogs() {
                     <ul>
                       <li>
                         <i className="fa-regular fa-user" />
-                        {item.author}
+                        {item.author.name}
                       </li>
                       <li>
                         <i className="fa-solid fa-tag" />
@@ -91,14 +107,12 @@ export default function Blogs() {
                     </ul>
                     <h4>
                       <Link href={`/news-details/${item.slug}`}>
-                        {item.title}
+                        {truncateWords(item.title.replace(/<[^>]+>/g, ""), 6)}
                       </Link>
                     </h4>
-                    {/* <p>
+                    <p>
-                      Pellentesque vitae consectetur ante <br />
+                      {truncateWords(item.description.replace(/<[^>]+>/g, ""), 10)}
-                      Integer non eros...
+                    </p>
-                    </p> */}
-                    <p>{item.description}</p>
                     <Link
                       href={`/news-details/${item.slug}`}
                       className="link-btn"
@@ -108,7 +122,7 @@ export default function Blogs() {
                   </div>
                   <div className="news-image">
                     <Image
-                      src={item.imgSrc}
+                      src={item.image}
                       width={247}
                       height={258}
                       alt="img"

components/homes/home-1/Cta.jsx

@@ -20,19 +20,19 @@ export default function Cta() {
           </h2>
           <div className="cta-img wow fadeInUp" data-wow-delay=".4s">
             <Image
-              src="/assets/img/home/launch/build-on-innovation-right.webp"
+              src="/assets/img/home/launch/ready-to-launch.webp"
               width={223}
               height={256}
               alt="img"
             />
-            {/* <div className="shape-img">
+            <div className="shape-img">
               <Image
                 src="/assets/img/cta-shape.png"
                 width={225}
                 height={242}
                 alt="img"
               />
-            </div> */}
+            </div>
           </div>
           <Link
             href={`/contact`}

components/homes/home-1/Faq.jsx

@@ -9,7 +9,7 @@ export default function Faq() {
       style={{ backgroundImage: 'url("/assets/img/faq/faq-bg.webp")' }}
     >
       <div className="track-shape float-bob-x">
-        <Image src="/assets/img/track.png" width={163} height={79} alt="img" />
+        <Image src="/assets/img/faq/faq-bottom.webp" width={163} height={79} alt="img" />
       </div>
       <div className="container">
         <div className="faq-wrapper">

components/homes/home-1/Services.jsx

@@ -48,7 +48,7 @@ export default function Services() {
     <section
       id="services"
       className="service-section fix section-padding bg-cover  scrollSpySection"
-      style={{ backgroundImage: "url(/assets/img/service/service-bg.jpg)" }}
+      style={{ backgroundImage: "url(/assets/img/home/explore/explore-bg.webp)" }}
     >
       <div className="container">
         <div className="section-title text-center">

components/homes/home-1/Skills.jsx

@@ -7,7 +7,7 @@ export default function Skills() {
     <section className="skills-section fix section-padding">
       <div className="shape-1 float-bob-x">
         <Image
-          src="/assets/img/skills/shape-1.png"
+          src="/assets/img/home/build/left-centre-element.webp"
           width={135}
           height={99}
           alt="img"
@@ -15,7 +15,7 @@ export default function Skills() {
       </div>
       <div className="shape-2 float-bob-y">
         <Image
-          src="/assets/img/skills/shape-2.png"
+          src="/assets/img/home/build/right.webp"
           width={310}
           height={344}
           alt="img"
@@ -40,7 +40,7 @@ export default function Skills() {
                     />
                     <div className="logo-shape">
                       <Image
-                        src="/assets/img/skills/logo.png"
+                        src="/assets/img/home/build/logo.webp"
                         width={153}
                         height={167}
                         alt="img"

components/homes/home-1/Testimonials.jsx

@@ -31,7 +31,7 @@ export default function Testimonials() {
       </div>
       <div className="building-shape float-bob-x">
         <Image
-          src="/assets/img/testimonial/building-shape.png"
+          src="/assets/img/home/testimonial/testimonial-bg.webp"
           width={931}
           height={520}
           alt="img"

utlis/constant.utils.js

@@ -1,39 +1,236 @@
-export const newsItems = [
+export const allBlogs = [
-  {
+   {
     id: 1,
-    slug: "deshelling-machine-upgrades-what-you-need-to-know",
+    slug: "revolutionizing-coconut-processing-the-rise-of-turnkey-plants",
-    imgSrc: "/assets/img/home/blog/blog-1.webp",
+    image: "/assets/img/home/blog/blog-1.webp",
-    title: "Deshelling Machine Upgrades: What You Need to Know",
+    bannerImage: "/assets/img/blog/blog-details-1.webp",
-    description: "If you're still using outdated deshellers, you may be losing time and...",
+    images: ["/assets/img/blog/blog-card1.webp", "/assets/img/blog/blog-card1.webp"],
-    author: "By Admin",
+    category: "Coconut Tech",
-    category: "Machine Insights",
+    date: "07 July 2024",
+    title: "Revolutionizing Coconut Processing: The Rise of Turnkey Plants",
+    author: {
+      name: "Guy Hawkins",
+      image: "/assets/img/news/author-1.png",
+    },
     delay: ".2s",
+    description: `
+  <h2>Revolutionizing Coconut Processing: The Rise of Turnkey Plants</h2>
+
+<div class="hilight-text mt-4 mb-4">
+  <p>
+    As the demand for processed coconut products continues to surge globally, the spotlight is increasingly turning toward efficient, scalable, and future-ready processing systems. At the heart of this transformation lies the rise of turnkey coconut processing plants - smartly engineered facilities that handle everything from deshelling to drying and packaging.
+  </p>
+  <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
+    <path d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z" stroke="#F55B1F"/>
+    <path d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z" stroke="#F55B1F"/>
+  </svg>
+</div>
+<p>
+  At Cibus, we believe the future of coconut processing is not fragmented – it’s fully integrated.
+</p>
+
+<h3 class="mt-3 mb-1">What Is a Turnkey Coconut Processing Plant?</h3>
+<p>
+  A turnkey plant refers to a complete, ready-to-operate solution where every element—from machinery installation to workflow design—is optimized for performance. This model eliminates the complexity of sourcing and integrating different machines from various vendors.
+</p>
+<p>Our turnkey systems cover:</p>
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li>Deshelling</li>
+  <li>Drying</li>
+  <li>Grinding</li>
+  <li>Packaging</li>
+  <li>Automation &amp; Quality Monitoring</li>
+</ul>
+<p>
+  Each machine is engineered to work seamlessly with the next, ensuring zero bottlenecks and minimal downtime.
+</p>
+
+<h3 class="mt-3 mb-1">The Sustainability Edge</h3>
+<p>
+  One of the core advantages of modern turnkey solutions is their alignment with green manufacturing practices. Our systems are built to:
+</p>
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li>Minimize energy consumption through efficient dryers</li>
+  <li>Reduce waste with precise shell separation</li>
+  <li>Optimize raw material utilization through custom calibrations</li>
+</ul>
+<p>
+  We help companies align with zero-waste production goals while reducing operational costs and environmental impact.
+</p>
+
+<h3 class="mt-3 mb-1">Speed, Scale &amp; Flexibility</h3>
+<p>
+  Turnkey plants are designed to grow with your business. Whether you're a mid-sized coconut product exporter or a large-scale food manufacturing unit, our scalable setups adapt to your current and future production needs.
+</p>
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li>Quick installation &amp; commissioning</li>
+  <li>Modular design for phased expansion</li>
+  <li>IoT-enabled monitoring for predictive maintenance</li>
+</ul>
+
+<h3 class="mt-3 mb-1">Global Readiness, Local Execution</h3>
+<p>
+  Our turnkey plants are trusted by clients across Southeast Asia, the Middle East, and Africa. With German-grade engineering precision and 24/7 global support, you don’t just get machinery – you get a partner in progress.
+</p>
+<p><strong>Ready to revolutionize your coconut processing line?</strong> Let’s build it together.</p>
+
+
+`
   },
   {
     id: 2,
-    slug: "dry-smarter-choosing-the-right-coconut-dryer-facility",
+    slug: "deshelling-machine-upgrades-what-you-need-to-know",
-    imgSrc: "/assets/img/home/blog/blog-2.webp",
+    image: "/assets/img/home/blog/blog-2.webp",
-    title: "Dry Smarter: Choosing the Right Coconut Dryer Facility",
+    bannerImage: "/assets/img/blog/blog-details-2.webp",
-    description: "Selecting the wrong dryer can lead to uneven drying and product rejection...",
+    images: ["/assets/img/blog/blog-card2.webp", "/assets/img/blog/blog-card2.webp"],
-    author: "By Admin",
+    category: "Machine Insights",
-    category: "Operational Tips",
+    date: "07 July 2024",
-    delay: ".4s",
+    title: "Deshelling Machine Upgrades: What You Need to Know",
-  },
+    author: {
-];
+      name: "Guy Hawkins",
+      image: "/assets/img/news/author-1.png",
+    },
+    delay: ".2s",
+    description: `
+  <h2>Deshelling Machine Upgrades: What You Need to Know</h2>
 
-export const newsImageItems = [
+<div class="hilight-text mt-4 mb-4">
+  <p>
+    Coconut deshelling is the foundational step in the coconut processing value chain. Yet, it’s also one of the most overlooked when it comes to equipment investment. Relying on outdated deshelling machinery can result in poor shell separation, higher labor costs, product damage, and supervisor frustration.
+  </p>
+  <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
+    <path d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z" stroke="#F55B1F"/>
+    <path d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z" stroke="#F55B1F"/>
+  </svg>
+</div>
+<p>
+  Upgrading your deshelling equipment isn’t just a mechanical choice – it’s a strategic business decision.
+</p>
+
+<h3 class="mt-3 mb-1">Signs It’s Time to Upgrade</h3>
+<p>If your production line experiences any of the following, a desheller upgrade is likely overdue:</p>
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li>Inconsistent shell removal</li>
+  <li>Increased downtime due to blade wear</li>
+  <li>Labor-intensive manual handling</li>
+  <li>Higher rejection rates in quality checks</li>
+</ul>
+<p>
+  These issues slow down your entire line, increase costs, and compromise end-product quality.
+</p>
+
+<h3 class="mt-3 mb-1">What to Look For in a Next-Gen Deshelling Machine</h3>
+<p>
+  Modern deshellers – like those offered by Cibus – are built for speed, precision, and durability. When considering an upgrade, evaluate machines based on:
+</p>
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li>Shell separation efficiency (minimal kernel damage)</li>
+  <li>Build material (corrosion-resistant, food-grade steel)</li>
+  <li>Throughput compatibility (can it scale with your dryer?)</li>
+  <li>Automation readiness (sensor-based control, minimal manual input)</li>
+</ul>
+
+<h3 class="mt-3 mb-1">Integration with Existing Lines</h3>
+<p>
+  Worried about compatibility with your current setup? Our engineering team specializes in custom retrofitting, allowing you to seamlessly integrate upgraded deshellers into legacy systems without major reconfiguration.
+</p>
+<p>
+  The result: increased productivity without operational disruption.
+</p>
+
+<h3 class="mt-3 mb-1">Real Results from Real Clients</h3>
+<p>
+  A South Indian food manufacturer upgraded to our deshelling system and reduced shell residue by 40%. Manual labor needs dropped by 60%, and line productivity increased by 25%.
+</p>
+<p>
+  When you upgrade smart, your supervisors – and your bottom line – will thank you.
+</p>
+
+`
+  },
   {
     id: 3,
-    slug: "revolutionizing-coconut-processing-the-rise-of-turnkey-plants",
+    slug: "dry-smarter-choosing-the-right-coconut-dryer-facility",
-    backgroundImage: "/assets/img/home/blog/blog-3.webp",
+    image: "/assets/img/home/blog/blog-3.webp",
-    title: "Revolutionizing Coconut Processing: The Rise of Turnkey Plants",
+    bannerImage: "/assets/img/blog/blog-details-3.webp",
-    description: "Turnkey coconut processing plants are helping manufacturers scale faster and reduce operational...",
+    images: ["/assets/img/blog/blog-card3.webp", "/assets/img/blog/blog-card3.webp"],
-    author: "By Admin",
+    category: "Operational Tips",
-    category: "Coconut Tech",
+    date: "07 July 2024",
-  },
+    title: "Dry Smarter: Choosing the Right Coconut Dryer for Your Facility",
-];
+    author: {
+      name: "Guy Hawkins",
+      image: "/assets/img/news/author-1.png",
+    },
+    delay: ".2s",
+    description: `
+  <h2>Dry Smarter: Choosing the Right Coconut Dryer for Your Facility</h2>
 
-export const BlogData = [
+<div class="hilight-text mt-4 mb-4">
+  <p>
+    Drying is one of the most critical steps in coconut processing. Done right, it ensures product quality, extends shelf life, and increases profitability. Done poorly, it leads to moisture inconsistencies, spoilage, and regulatory non-compliance.
+  </p>
+  <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
+    <path d="M7.71428 20.0711H0.5V5.64258H14.9286V20.4531L9.97665 30.3568H3.38041L8.16149 20.7947L8.5233 20.0711H7.71428Z" stroke="#F55B1F"/>
+    <path d="M28.2846 20.0711H21.0703V5.64258H35.4989V20.4531L30.547 30.3568H23.9507L28.7318 20.7947L29.0936 20.0711H28.2846Z" stroke="#F55B1F"/>
+  </svg>
+</div>
+<p>
+  Selecting the right coconut dryer isn’t a simple plug-and-play task, it requires strategic thinking and technical understanding.
+</p>
+
+<h3 class="mt-3 mb-1">Key Factors in Dryer Selection</h3>
+<p>Choosing the right dryer for your facility depends on several variables:</p>
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li>Volume of raw coconuts processed daily</li>
+  <li>Type of end-product (copra, coconut flour, desiccated coconut)</li>
+  <li>Available space and power infrastructure</li>
+  <li>Required drying time and uniformity</li>
+</ul>
+<p>
+  At Cibus, we design dryers tailored to these needs – ensuring maximum efficiency with minimal energy waste.
+</p>
+
+<h3 class="mt-3 mb-1">Types of Coconut Dryers We Offer</h3>
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li>Batch Dryers – Ideal for small to mid-scale operations</li>
+  <li>Continuous Belt Dryers – Suited for large-scale, high-throughput facilities</li>
+  <li>Hybrid Dryers – Combine electric and biomass options for greater energy control</li>
+</ul>
+<p>
+  All models are engineered with precise airflow control and temperature monitoring, reducing moisture inconsistencies across batches.
+</p>
+
+<h3 class="mt-3 mb-1">Smart Drying with Data</h3>
+<p>Our dryers come with smart sensor integrations, enabling operators to:</p>
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li>Monitor temperature and humidity in real time</li>
+  <li>Receive alerts on anomalies</li>
+  <li>Adjust parameters remotely via IoT dashboards</li>
+</ul>
+<p>
+  This level of control ensures every batch meets exact drying specifications – reducing rejection rates and improving product standardization.
+</p>
+
+<h3 class="mt-3 mb-1">Future-Proofing Your Investment</h3>
+<p>
+  Our dryers are built with scalable configurations meaning you can expand capacity as your production grows. We also provide retrofitting solutions for existing dryers, allowing you to update older systems without full replacement.
+</p>
+
+<h3 class="mt-3 mb-1">Case Study</h3>
+<p>A coconut flour facility in the Philippines replaced their legacy dryer with our hybrid smart dryer. Results included:</p>
+<ul style="list-style-type: disc; padding-left: 20px;">
+  <li>35% faster drying times</li>
+  <li>22% energy savings</li>
+  <li>50% reduction in rejected batches</li>
+</ul>
+
+<h3 class="mt-3 mb-1">Choose Smarter, Dry Better</h3>
+<p>
+  Your dryer is more than just a heat source, it’s a quality gatekeeper. Choose a system that works for your production today and scales with your ambitions tomorrow.
+</p>
+
+`
+  },
   {
     id: 7,
     slug: "rise-of-turnkey-coconut-processing-plants",