Compare commits

...

30 Commits

Author SHA1 Message Date
1a929aaa0f images updated 2025-07-22 21:18:58 +05:30
10cba3d48e images updated 2025-07-22 21:10:26 +05:30
a6f52b0db8 images updated 2025-07-22 21:07:58 +05:30
akashluca-l
187059fd44 Images Updated 2025-07-22 19:24:36 +05:30
b907357b0d images updated 2025-07-22 18:29:48 +05:30
90729d96a9 images updated 2025-07-22 18:29:13 +05:30
akashluca-l
70176d997b About content updated 2025-07-22 14:42:36 +05:30
cdfdd2be13 Projects tab updated 2025-07-21 16:22:12 +05:30
225b9ade3d Home images updated 2025-07-21 13:34:35 +05:30
akashluca-l
fd9ba7c165 Corprate Profile and Product Dynamic added 2025-07-19 20:39:03 +05:30
16d8596efd 2 page structure updated 2025-07-19 18:12:18 +05:30
23db236976 blog details content updated 2025-07-19 13:51:25 +05:30
akashluca-l
e0a7da69b9 Nav Bar issue Fixed 2025-07-18 21:58:56 +05:30
c339c5edcc blog page structure updated 2025-07-18 21:40:34 +05:30
8079d03bed theme blue updated 2025-07-18 21:01:18 +05:30
1522f0d40c product content updated 2025-07-18 20:33:46 +05:30
4649a4a248 about content updated 2025-07-18 18:20:22 +05:30
946f4be4b6 home content updated 2025-07-18 17:57:52 +05:30
6f44362f30 home content updated 2025-07-18 17:57:33 +05:30
akashluca-l
d0aadabed7 Banner Updated 2025-07-18 17:53:17 +05:30
akashluca-l
97165a1b3d Bannre Changes Updated 2025-07-18 17:53:17 +05:30
cf383b098e about page structure updated 2025-07-18 14:56:06 +05:30
6c6772b17d about page structure updated 2025-07-18 14:55:32 +05:30
akashluca-l
6fbfef459e Products and Contact Page Updated 2025-07-18 11:28:01 +05:30
akashluca-l
5c26f54506 Products and Contact Page Updated 2025-07-18 11:27:29 +05:30
af218ed688 home content updated 2025-07-17 20:04:06 +05:30
0a5dcd8554 logo updated 2025-07-17 09:51:58 +05:30
3b31bf4b66 nav structure corrected 2025-07-16 12:44:58 +05:30
7dd99527be theme color changed 2025-07-15 19:45:28 +05:30
7ec433e176 Home structure updated 2025-07-14 18:29:02 +05:30
128 changed files with 3745 additions and 1504 deletions

View File

@ -2,8 +2,8 @@ import Achievments from "@/components/about/Achievments";
import Team from "@/components/about/Team";
import Brands from "@/components/common/Brands";
import Footer1 from "@/components/footers/Footer1";
import Header2 from "@/components/headers/Header2";
import About from "@/components/homes/home-1/About";
import Header1 from "@/components/headers/Header1";
import About from "@/components/homes/home-1/AboutPage";
import Testimonials from "@/components/homes/home-1/Testimonials";
import Image from "next/image";
@ -17,19 +17,19 @@ export const metadata = {
export default function page() {
return (
<>
<Header2 />
<Header1 />
<div
className="breadcrumb-wrapper bg-cover"
style={{ backgroundImage: 'url("/assets/img/breadcrumb-bg.jpg")' }}
style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
>
<div className="shape-image float-bob-y">
{/* <div className="shape-image float-bob-y">
<Image
src="/assets/img/vector.png"
width={84}
height={186}
alt="img"
/>
</div>
</div> */}
<div className="container">
<div className="breadcrumb-wrapper-items">
<div className="page-heading">
@ -52,13 +52,13 @@ export default function page() {
</ul>
</div>
<div className="breadcrumb-image">
<Image
{/* <Image
src="/assets/img/breadcrumb-image.png"
width={540}
height={450}
alt="img"
className="float-bob-x"
/>
/> */}
<div className="bar-shape">
<Image
src="/assets/img/breadcrumb-bar.png"
@ -73,12 +73,12 @@ export default function page() {
</div>
<About />
<Achievments />
<Testimonials />
{/* <Testimonials /> */}
<Team />
<div className="brand-section fix section-padding pt-0">
{/* <div className="brand-section fix section-padding pt-0">
<Brands />
</div>
</div> */}
<Footer1 />
</>
);

View File

@ -0,0 +1,66 @@
// app/news-details/[slug]/page.jsx
import BlogDetails from "@/components/blogs/BlogDetails";
import Footer1 from "@/components/footers/Footer1";
import Header1 from "@/components/headers/Header1";
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 async function generateStaticParams() {
return allBlogs.map((item) => ({ slug: item.slug }));
}
export default function Page({ params }) {
const newsItem = allBlogs.find((elm) => elm.slug === params.slug);
if (!newsItem) {
notFound(); // Show 404 if not found
}
return (
<>
<Header1 />
<div
className="breadcrumb-wrapper bg-cover"
style={{ backgroundImage: `url(${newsItem.bannerImage})` }}
>
<div className="container">
<div className="breadcrumb-wrapper-items">
<div className="page-heading">
<div className="breadcrumb-sub-title">
<h1 className="wow fadeInUp" data-wow-delay=".3s">
{newsItem.title}
</h1>
</div>
<ul
className="breadcrumb-items wow fadeInUp"
data-wow-delay=".5s"
>
<li>
<Link href={`/`}> Home </Link>
</li>
<li>
<i className="fa-sharp fa-solid fa-slash-forward" />
</li>
<li>Blog Details</li>
</ul>
</div>
<div className="breadcrumb-image" />
</div>
</div>
</div>
<BlogDetails newsItem={newsItem} />
{/* <div className="brand-section fix section-padding pt-0">
<Brands />
</div> */}
<Footer1 />
</>
);
}

View File

@ -1,7 +1,7 @@
import Blogs from "@/components/blogs/Blogs";
import Brands from "@/components/common/Brands";
import Footer1 from "@/components/footers/Footer1";
import Header2 from "@/components/headers/Header2";
import Header1 from "@/components/headers/Header1";
import Image from "next/image";
import Link from "next/link";
export const metadata = {
@ -11,25 +11,25 @@ export const metadata = {
export default function page() {
return (
<>
<Header2 />
<Header1 />
<div
className="breadcrumb-wrapper bg-cover"
style={{ backgroundImage: 'url("/assets/img/breadcrumb-bg.jpg")' }}
style={{ backgroundImage: 'url("/assets/img/blog/blog-banner.webp")' }}
>
<div className="shape-image float-bob-y">
{/* <div className="shape-image float-bob-y">
<Image
src="/assets/img/vector.png"
width={84}
height={186}
alt="img"
/>
</div>
</div> */}
<div className="container">
<div className="breadcrumb-wrapper-items">
<div className="page-heading">
<div className="breadcrumb-sub-title">
<h1 className="wow fadeInUp" data-wow-delay=".3s">
Blogs Grid
Blog
</h1>
</div>
<ul
@ -42,11 +42,11 @@ export default function page() {
<li>
<i className="fa-sharp fa-solid fa-slash-forward" />
</li>
<li>Blogs Grid</li>
<li>Blog</li>
</ul>
</div>
<div className="breadcrumb-image">
<Image
{/* <Image
src="/assets/img/breadcrumb-image.png"
width={540}
height={450}
@ -60,15 +60,15 @@ export default function page() {
height={604}
alt="img"
/>
</div>
</div> */}
</div>
</div>
</div>
</div>
<Blogs />
<div className="brand-section fix section-padding pt-0">
{/* <div className="brand-section fix section-padding pt-0">
<Brands />
</div>
</div> */}
<Footer1 />
</>
);

View File

@ -1,31 +1,24 @@
import Brands from "@/components/common/Brands";
import ContactForm from "@/components/contact/ContactForm";
import ContactInfo from "@/components/contact/ContactInfo";
import Map from "@/components/contact/Map";
import Footer1 from "@/components/footers/Footer1";
import Header2 from "@/components/headers/Header2";
import Header1 from "@/components/headers/Header1";
import Image from "next/image";
import Link from "next/link";
import React from "react";
export const metadata = {
title: "Contact || Xbuild - Constriction nextjs Template",
title: "About || Xbuild - Constriction nextjs Template",
description: "Xbuild - Constriction nextjs Template",
};
export default function page() {
return (
<>
<Header2 />
<Header1 />
<div
className="breadcrumb-wrapper bg-cover"
style={{ backgroundImage: 'url("/assets/img/breadcrumb-bg.jpg")' }}
style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
>
<div className="shape-image float-bob-y">
<Image
src="/assets/img/vector.png"
width={84}
height={186}
alt="img"
/>
</div>
<div className="container">
<div className="breadcrumb-wrapper-items">
<div className="page-heading">
@ -48,13 +41,6 @@ export default function page() {
</ul>
</div>
<div className="breadcrumb-image">
<Image
src="/assets/img/breadcrumb-image.png"
width={540}
height={450}
alt="img"
className="float-bob-x"
/>
<div className="bar-shape">
<Image
src="/assets/img/breadcrumb-bar.png"
@ -67,12 +53,10 @@ export default function page() {
</div>
</div>
</div>
<ContactInfo />
<ContactForm />
<Map />
<div className="brand-section fix section-padding">
<Brands />
</div>
<ContactInfo/>
<ContactForm/>
<Map/>
<Footer1 />
</>
);

View File

@ -0,0 +1,66 @@
import Footer1 from "@/components/footers/Footer1";
import Header1 from "@/components/headers/Header1";
import CorporateProfile from "@/components/homes/home-1/CorporateProfile/corporate-profile";
import Image from "next/image";
import Link from "next/link";
import React from "react";
export const metadata = {
title: "About || Xbuild - Constriction nextjs Template",
description: "Xbuild - Constriction nextjs Template",
};
export default function page() {
return (
<>
<Header1 />
<div
className="breadcrumb-wrapper bg-cover"
style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
>
<div className="container">
<div className="breadcrumb-wrapper-items">
<div className="page-heading">
<div className="breadcrumb-sub-title">
<h1 className="wow fadeInUp" data-wow-delay=".3s">
Corporate Profile
</h1>
</div>
<ul
className="breadcrumb-items wow fadeInUp"
data-wow-delay=".5s"
>
<li>
<Link href={`/`}> Home </Link>
</li>
<li>
<i className="fa-sharp fa-solid fa-slash-forward" />
</li>
<li>Corporate Profile</li>
</ul>
</div>
<div className="breadcrumb-image">
{/* <Image
src="/assets/img/breadcrumb-image.png"
width={540}
height={450}
alt="img"
className="float-bob-x"
/> */}
<div className="bar-shape">
<Image
src="/assets/img/breadcrumb-bar.png"
width={631}
height={604}
alt="img"
/>
</div>
</div>
</div>
</div>
</div>
<CorporateProfile/>
<Footer1 />
</>
);
}

View File

@ -0,0 +1,43 @@
import Brands from "@/components/common/Brands";
import Footer1 from "@/components/footers/Footer1";
import Header1 from "@/components/headers/Header1";
import HeaderTop1 from "@/components/headers/HeaderTop1";
import About from "@/components/homes/home-1/About";
import Blogs from "@/components/homes/home-1/Blogs";
import Contact from "@/components/homes/home-1/Contact";
import Cta from "@/components/homes/home-1/Cta";
import Faq from "@/components/homes/home-1/Faq";
import Hero from "@/components/homes/home-1/Hero";
import Projects from "@/components/homes/home-1/Projects";
import Services from "@/components/homes/home-1/Services";
import Skills from "@/components/homes/home-1/Skills";
import Team from "@/components/homes/home-1/Team";
import Testimonials from "@/components/homes/home-1/Testimonials";
export const metadata = {
title: "Home 1 || Xbuild - Constriction nextjs Template",
description: "Xbuild - Constriction nextjs Template",
};
export default function Home1() {
return (
<>
<HeaderTop1 />
<Header1 />
<Hero />
<About />
<Services />
<Cta />
<Skills />
<Testimonials />
<Projects />
<Faq />
<Team />
<Contact />
<Blogs />
<div className="brand-section fix section-padding">
<Brands />
</div>
<Footer1 />
</>
);
}

View File

@ -9,7 +9,7 @@ import Contact from "@/components/homes/home-1/Contact";
import Cta from "@/components/homes/home-1/Cta";
import Faq from "@/components/homes/home-1/Faq";
import Hero from "@/components/homes/home-1/Hero";
import Projects from "@/components/homes/home-1/Projects";
import Projects from "@/components/project/Projects";
import Services from "@/components/homes/home-1/Services";
import Skills from "@/components/homes/home-1/Skills";
import Team from "@/components/homes/home-1/Team";
@ -21,22 +21,23 @@ export const metadata = {
export default function Home1() {
return (
<>
<HeaderTop1 />
{/* <HeaderTop1 /> */}
<Header1 />
<Hero />
<About />
<Services />
<Cta />
<Skills />
<Cta />
<Testimonials />
<Projects />
<Faq />
<Team />
<Contact />
<Blogs />
<div className="brand-section fix section-padding">
<Brands />
</div>
{/* <Team /> */}
{/* <Contact /> */}
<Blogs />
<Footer1 />
</>
);

View File

@ -0,0 +1,66 @@
import Footer1 from "@/components/footers/Footer1";
import Header1 from "@/components/headers/Header1";
import Products from "@/components/homes/home-1/Products/product";
import Image from "next/image";
import Link from "next/link";
import React from "react";
export const metadata = {
title: "About || Xbuild - Constriction nextjs Template",
description: "Xbuild - Constriction nextjs Template",
};
export default function page() {
return (
<>
<Header1 />
<div
className="breadcrumb-wrapper bg-cover"
style={{ backgroundImage: 'url("/assets/img/products/products-banner.webp")' }}
>
<div className="container">
<div className="breadcrumb-wrapper-items">
<div className="page-heading">
<div className="breadcrumb-sub-title">
<h1 className="wow fadeInUp" data-wow-delay=".3s">
Products
</h1>
</div>
<ul
className="breadcrumb-items wow fadeInUp"
data-wow-delay=".5s"
>
<li>
<Link href={`/`}> Home </Link>
</li>
<li>
<i className="fa-sharp fa-solid fa-slash-forward" />
</li>
<li>About Us</li>
</ul>
</div>
<div className="breadcrumb-image">
{/* <Image
src="/assets/img/breadcrumb-image.png"
width={540}
height={450}
alt="img"
className="float-bob-x"
/> */}
<div className="bar-shape">
<Image
src="/assets/img/breadcrumb-bar.png"
width={631}
height={604}
alt="img"
/>
</div>
</div>
</div>
</div>
</div>
<Products/>
<Footer1 />
</>
);
}

View File

@ -1,8 +1,7 @@
import Brands from "@/components/common/Brands";
import Footer1 from "@/components/footers/Footer1";
import Header2 from "@/components/headers/Header2";
import Projects from "@/components/project/Projects";
import Image from "next/image";
import Header1 from "@/components/headers/Header1";
import ProjectsData from "@/components/project/Projects2";
import Link from "next/link";
export const metadata = {
title: "Project || Xbuild - Constriction nextjs Template",
@ -12,19 +11,11 @@ export const metadata = {
export default function page() {
return (
<>
<Header2 />
<Header1 />
<div
className="breadcrumb-wrapper bg-cover"
style={{ backgroundImage: 'url("/assets/img/breadcrumb-bg.jpg")' }}
>
<div className="shape-image float-bob-y">
<Image
src="/assets/img/vector.png"
width={84}
height={186}
alt="img"
/>
</div>
<div className="container">
<div className="breadcrumb-wrapper-items">
<div className="page-heading">
@ -47,29 +38,14 @@ export default function page() {
</ul>
</div>
<div className="breadcrumb-image">
<Image
src="/assets/img/breadcrumb-image.png"
width={540}
height={450}
alt="img"
className="float-bob-x"
/>
<div className="bar-shape">
<Image
src="/assets/img/breadcrumb-bar.png"
width={631}
height={604}
alt="img"
/>
</div>
</div>
</div>
</div>
</div>
<Projects />
<div className="brand-section fix section-padding pt-0">
<ProjectsData />
{/* <div className="brand-section fix section-padding pt-0">
<Brands />
</div>
</div> */}
<Footer1 />
</>
);

View File

@ -0,0 +1,67 @@
import Footer1 from "@/components/footers/Footer1";
import Header1 from "@/components/headers/Header1";
import Products from "@/components/homes/home-1/Products/product";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import About from "@/components/turnkey-solutions/page";
export const metadata = {
title: "About || Xbuild - Constriction nextjs Template",
description: "Xbuild - Constriction nextjs Template",
};
export default function page() {
return (
<>
<Header1 />
<div
className="breadcrumb-wrapper bg-cover"
style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
>
<div className="container">
<div className="breadcrumb-wrapper-items">
<div className="page-heading">
<div className="breadcrumb-sub-title">
<h1 className="wow fadeInUp" data-wow-delay=".3s">
Turnkey Solutions
</h1>
</div>
<ul
className="breadcrumb-items wow fadeInUp"
data-wow-delay=".5s"
>
<li>
<Link href={`/`}> Home </Link>
</li>
<li>
<i className="fa-sharp fa-solid fa-slash-forward" />
</li>
<li>Turnkey Solutions</li>
</ul>
</div>
<div className="breadcrumb-image">
{/* <Image
src="/assets/img/breadcrumb-image.png"
width={540}
height={450}
alt="img"
className="float-bob-x"
/> */}
<div className="bar-shape">
<Image
src="/assets/img/breadcrumb-bar.png"
width={631}
height={604}
alt="img"
/>
</div>
</div>
</div>
</div>
</div>
<About />
<Products />
<Footer1 />
</>
);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
app/favicon1.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -24,8 +24,8 @@ export default function Achievments() {
<i className="fa-regular fa-arrow-right-long"></i>
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Industrial Power," /> <br />
<AnimatedText text="Worldwide Influence" />
<AnimatedText text="Smart Engineering," /> <br />
<AnimatedText text="Seamless Integration" />
</h2>
</div>
<Link
@ -33,7 +33,7 @@ export default function Achievments() {
className="theme-btn bg-white mt-3 mt-md-0 wow fadeInUp"
data-wow-delay=".4s"
>
MAKE AN APPOINTMENT
EXPLORE OUR CAPABILITIES
<i className="fa-regular fa-arrow-right"></i>
</Link>
</div>
@ -65,7 +65,7 @@ export default function Achievments() {
</div>
<div className="content">
<h2>
<span className="count">{elm.count}</span>k+
<span className="count">{elm.count}</span>
</h2>
<p>{elm.description}</p>
</div>
@ -89,7 +89,7 @@ export default function Achievments() {
</div>
<div className="content">
<h2>
<span className="count">{elm.count}</span>k+
<span className="count">{elm.count}</span>
</h2>
<p>{elm.description}</p>
</div>

View File

@ -22,7 +22,7 @@ export default function Team() {
/>
</div>
<div className="container">
<div className="section-title text-center">
{/* <div className="section-title text-center">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long" />
our team members
@ -31,7 +31,7 @@ export default function Team() {
<h2 className="splt-txt wow">
<AnimatedText text="Our Professional Team" />
</h2>
</div>
</div> */}
<div className="row">
{teamMembers2.map((member) => (
<div
@ -42,18 +42,11 @@ export default function Team() {
data-wow-delay={member.delay}
>
<div className="team-box-items">
<div className="social-icon d-grid align-items-center">
{member.socials.map((link, index) => (
<a key={index} href={link.href}>
<i className={link.iconClass} />
</a>
))}
</div>
<div className="team-image">
<Image
src={member.image}
width={240}
height={288}
width={305}
height={358}
alt="Team"
/>
</div>
@ -63,7 +56,7 @@ export default function Team() {
{member.name}
</Link>
</h5>
<p>{member.role}</p>
{/* <p>{member.role}</p> */}
<a href="team-details" className="icon">
<i className="fa-solid fa-link" />
</a>

View File

@ -0,0 +1,78 @@
import { teamMembers2 } from "@/data/team";
import Link from "next/link";
import Image from "next/image";
import AnimatedText from "../common/AnimatedText";
export default function Team() {
return (
<section className="team-section section-padding">
<div className="shape-1 float-bob-y">
<Image
src="/assets/img/team/shape-1.png"
width={161}
height={250}
alt="img"
/>
</div>
<div className="shape-2">
<Image
src="/assets/img/team/shape-2.png"
width={352}
height={428}
alt="img"
/>
</div>
<div className="container">
<div className="section-title text-center">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long" />
our team members
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Our Professional Team" />
</h2>
</div>
<div className="row">
{teamMembers2.map((member) => (
<div
key={member.id}
className={`col-xl-3 col-lg-4 col-md-6 col-sm-6 wow fadeInUp${
member.active ? " active" : ""
}`}
data-wow-delay={member.delay}
>
<div className="team-box-items">
<div className="social-icon d-grid align-items-center">
{member.socials.map((link, index) => (
<a key={index} href={link.href}>
<i className={link.iconClass} />
</a>
))}
</div>
<div className="team-image">
<Image
src={member.image}
width={240}
height={288}
alt="Team"
/>
</div>
<div className="team-content">
<h5>
<Link href={`/team-details/${member.id}`}>
{member.name}
</Link>
</h5>
<p>{member.role}</p>
<a href="team-details" className="icon">
<i className="fa-solid fa-link" />
</a>
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
}

View File

@ -1,239 +1,36 @@
"use client";
import Image from "next/image";
import Comments from "./Comments";
import CommentForm from "./CommentForm";
import { links, listItems, recentItems, socialLinks } from "@/data/blogs";
import Link from "next/link";
export default function BlogDetails({ newsItem }) {
return (
<section className="news-standard fix section-padding">
<div className="container">
<div className="row g-4">
<div className="col-12 col-lg-8">
<div className="col-12">
<div className="blog-post-details">
<div className="single-blog-post">
<div
className="post-featured-thumb bg-cover"
style={{
backgroundImage: 'url("/assets/img/news/post-4.jpg")',
backgroundImage: `url(${newsItem.image})`,
}}
/>
<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" />
18 Dec, 2024
<i className="fa-solid fa-calendar-days" /> {newsItem.date}
</li>
<li>
<i className="fa-solid fa-tag" />
Technology
<i className="fa-solid fa-tag" /> {newsItem.category}
</li>
</ul>
<h3>{newsItem.title}</h3>
<p className="mb-3">
Consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore of magna aliqua. Ut enim ad
minim veniam, made of owl the quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea dolor commodo
consequat. Duis aute irure and dolor in reprehenderit.
</p>
<p className="mb-3">
The is ipsum dolor sit amet consectetur adipiscing elit.
Fusce eleifend porta arcu In hac habitasse the is platea
augue thelorem turpoi dictumst. In lacus libero faucibus at
malesuada sagittis placerat eros sed istincidunt augue ac
ante rutrum sed the is sodales augue consequat.
</p>
<p>
Nulla facilisi. Vestibulum tristique sem in eros eleifend
imperdiet. Donec quis convallis neque. In id lacus pulvinar
lacus, eget vulputate lectus. Ut viverra bibendum lorem, at
tempus nibh mattis in. Sed a massa eget lacus consequat
auctor.
</p>
<div className="hilight-text mt-4 mb-4">
<p>
Pellentesque sollicitudin congue dolor non aliquam. Morbi
volutpat, nisi vel ultricies urnacondimentum, sapien neque
lobortis tortor, quis efficitur mi ipsum eu metus.
Praesent eleifend orci sit amet est vehicula.
</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 className="mt-4 mb-5">
Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et
massa mi. Aliquam in hendrerit urna. Pellentesque sit amet
sapien fringilla, mattis ligula consectetur, ultrices
mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet
augue. Vestibulum auctor ornare leo, non suscipit magna
interdum eu. Curabitur pellentesque nibh nibh, at maximus
ante fermentum sit amet. Pellentesque commodo lacus at
sodales sodales. Quisque sagittis orci ut diam condimentum,
vel euismod erat placerat. In iaculis arcu eros.
</p>
<div className="row g-4">
<div className="col-lg-6">
<div className="details-image">
<Image
src="/assets/img/news/post-5.jpg"
width={370}
height={269}
alt="img"
/>
</div>
</div>
<div className="col-lg-6">
<div className="details-image">
<Image
src="/assets/img/news/post-6.jpg"
width={370}
height={269}
alt="img"
/>
</div>
</div>
</div>
<p className="pt-5">
Consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore of magna aliqua. Ut enim ad
minim veniam, made of owl the quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea dolor commodo
consequat. Duis aute irure and dolor in
reprehenderit.Consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore of magna aliqua. Ut
enim ad minim veniam, made of owl the quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea dolor
commodo consequat. Duis aute irure and dolor in
reprehenderit.
</p>
</div>
</div>
<div className="row tag-share-wrap mt-4 mb-5">
<div className="col-lg-8 col-12">
<div className="tagcloud">
<span>Tags:</span>
<a href="#">Travel</a>
<a href="#">Services</a>
<a href="#">Agency</a>
</div>
</div>
<div className="col-lg-4 col-12 mt-3 mt-lg-0 text-lg-end">
<div className="social-share">
<span className="me-3">Share:</span>
{socialLinks.map((link, index) => (
<a href={link.href} key={index}>
<i className={link.iconClass} />
</a>
))}
</div>
</div>
</div>
<div className="comments-area">
<div className="comments-heading">
<h3>02 Comments</h3>
</div>
<Comments />
</div>
<div className="comment-form-wrap pt-5">
<h3>Leave a comments</h3>
<CommentForm />
</div>
</div>
</div>
<div className="col-12 col-lg-4">
<div className="main-sidebar">
<div className="single-sidebar-widget">
<div className="wid-title">
<h3>Search</h3>
</div>
<div className="search-widget">
<form onSubmit={(e) => e.preventDefault()}>
<input type="text" placeholder="Search here" />
<button type="submit">
<i className="fa-solid fa-magnifying-glass" />
</button>
</form>
</div>
</div>
<div className="single-sidebar-widget">
<div className="wid-title">
<h3>Categories</h3>
</div>
<div className="news-widget-categories">
<ul>
{listItems.map((item, index) => (
<li key={index} className={item.isActive ? "active" : ""}>
<a href={item.link}>{item.text}</a>{" "}
<span>{item.count}</span>
</li>
))}
</ul>
</div>
</div>
<div className="single-sidebar-widget">
<div className="wid-title">
<h3>Recent Post</h3>
</div>
<div className="recent-post-area">
{recentItems.map((item, index) => (
<div className="recent-items" key={index}>
<div className="recent-thumb">
<Image
src={item.imageSrc}
width={70}
height={70}
alt="img"
/>
</div>
<div className="recent-content">
<ul>
<li>
<i className="fa-solid fa-calendar-days" />
{item.date}
</li>
</ul>
<h6>
<Link
href={`/news-details/${item.id}`}
dangerouslySetInnerHTML={{ __html: item.title }}
/>
</h6>
</div>
</div>
))}
</div>
</div>
<div className="single-sidebar-widget">
<div className="wid-title">
<h3>Popular Tag</h3>
</div>
<div className="news-widget-categories">
<div className="tagcloud">
{links.map((link, index) => (
<Link href={link.href} key={index}>
{link.text}
</Link>
))}
</div>
<div
className="post-description blog-description"
dangerouslySetInnerHTML={{ __html: newsItem.description }}
/>
</div>
</div>
</div>

View File

@ -0,0 +1,245 @@
"use client";
import Image from "next/image";
import Comments from "./Comments";
import CommentForm from "./CommentForm";
import { links, listItems, recentItems, socialLinks } from "@/data/blogs";
import Link from "next/link";
export default function BlogDetails({ newsItem }) {
return (
<section className="news-standard fix section-padding">
<div className="container">
<div className="row g-4">
<div className="col-12 col-lg-8">
<div className="blog-post-details">
<div className="single-blog-post">
<div
className="post-featured-thumb bg-cover"
style={{
backgroundImage: 'url("/assets/img/news/post-4.jpg")',
}}
/>
<div className="post-content">
<ul className="post-list d-flex align-items-center">
<li>
<i className="fa-regular fa-user" />
By Admin
</li>
<li>
<i className="fa-solid fa-calendar-days" />
18 Dec, 2024
</li>
<li>
<i className="fa-solid fa-tag" />
Technology
</li>
</ul>
<h3>{newsItem.title}</h3>
<p className="mb-3">
Consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore of magna aliqua. Ut enim ad
minim veniam, made of owl the quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea dolor commodo
consequat. Duis aute irure and dolor in reprehenderit.
</p>
<p className="mb-3">
The is ipsum dolor sit amet consectetur adipiscing elit.
Fusce eleifend porta arcu In hac habitasse the is platea
augue thelorem turpoi dictumst. In lacus libero faucibus at
malesuada sagittis placerat eros sed istincidunt augue ac
ante rutrum sed the is sodales augue consequat.
</p>
<p>
Nulla facilisi. Vestibulum tristique sem in eros eleifend
imperdiet. Donec quis convallis neque. In id lacus pulvinar
lacus, eget vulputate lectus. Ut viverra bibendum lorem, at
tempus nibh mattis in. Sed a massa eget lacus consequat
auctor.
</p>
<div className="hilight-text mt-4 mb-4">
<p>
Pellentesque sollicitudin congue dolor non aliquam. Morbi
volutpat, nisi vel ultricies urnacondimentum, sapien neque
lobortis tortor, quis efficitur mi ipsum eu metus.
Praesent eleifend orci sit amet est vehicula.
</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 className="mt-4 mb-5">
Lorem ipsum dolor sit amet consectetur adipiscing elit Ut et
massa mi. Aliquam in hendrerit urna. Pellentesque sit amet
sapien fringilla, mattis ligula consectetur, ultrices
mauris. Maecenas vitae mattis tellus. Nullam quis imperdiet
augue. Vestibulum auctor ornare leo, non suscipit magna
interdum eu. Curabitur pellentesque nibh nibh, at maximus
ante fermentum sit amet. Pellentesque commodo lacus at
sodales sodales. Quisque sagittis orci ut diam condimentum,
vel euismod erat placerat. In iaculis arcu eros.
</p>
<div className="row g-4">
<div className="col-lg-6">
<div className="details-image">
<Image
src="/assets/img/news/post-5.jpg"
width={370}
height={269}
alt="img"
/>
</div>
</div>
<div className="col-lg-6">
<div className="details-image">
<Image
src="/assets/img/news/post-6.jpg"
width={370}
height={269}
alt="img"
/>
</div>
</div>
</div>
<p className="pt-5">
Consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore of magna aliqua. Ut enim ad
minim veniam, made of owl the quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea dolor commodo
consequat. Duis aute irure and dolor in
reprehenderit.Consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore of magna aliqua. Ut
enim ad minim veniam, made of owl the quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea dolor
commodo consequat. Duis aute irure and dolor in
reprehenderit.
</p>
</div>
</div>
<div className="row tag-share-wrap mt-4 mb-5">
<div className="col-lg-8 col-12">
<div className="tagcloud">
<span>Tags:</span>
<a href="#">Travel</a>
<a href="#">Services</a>
<a href="#">Agency</a>
</div>
</div>
<div className="col-lg-4 col-12 mt-3 mt-lg-0 text-lg-end">
<div className="social-share">
<span className="me-3">Share:</span>
{socialLinks.map((link, index) => (
<a href={link.href} key={index}>
<i className={link.iconClass} />
</a>
))}
</div>
</div>
</div>
<div className="comments-area">
<div className="comments-heading">
<h3>02 Comments</h3>
</div>
<Comments />
</div>
<div className="comment-form-wrap pt-5">
<h3>Leave a comments</h3>
<CommentForm />
</div>
</div>
</div>
<div className="col-12 col-lg-4">
<div className="main-sidebar">
<div className="single-sidebar-widget">
<div className="wid-title">
<h3>Search</h3>
</div>
<div className="search-widget">
<form onSubmit={(e) => e.preventDefault()}>
<input type="text" placeholder="Search here" />
<button type="submit">
<i className="fa-solid fa-magnifying-glass" />
</button>
</form>
</div>
</div>
<div className="single-sidebar-widget">
<div className="wid-title">
<h3>Categories</h3>
</div>
<div className="news-widget-categories">
<ul>
{listItems.map((item, index) => (
<li key={index} className={item.isActive ? "active" : ""}>
<a href={item.link}>{item.text}</a>{" "}
<span>{item.count}</span>
</li>
))}
</ul>
</div>
</div>
<div className="single-sidebar-widget">
<div className="wid-title">
<h3>Recent Post</h3>
</div>
<div className="recent-post-area">
{recentItems.map((item, index) => (
<div className="recent-items" key={index}>
<div className="recent-thumb">
<Image
src={item.imageSrc}
width={70}
height={70}
alt="img"
/>
</div>
<div className="recent-content">
<ul>
<li>
<i className="fa-solid fa-calendar-days" />
{item.date}
</li>
</ul>
<h6>
<Link
href={`/news-details/${item.id}`}
dangerouslySetInnerHTML={{ __html: item.title }}
/>
</h6>
</div>
</div>
))}
</div>
</div>
<div className="single-sidebar-widget">
<div className="wid-title">
<h3>Popular Tag</h3>
</div>
<div className="news-widget-categories">
<div className="tagcloud">
{links.map((link, index) => (
<Link href={link.href} key={index}>
{link.text}
</Link>
))}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}

View File

@ -1,14 +1,15 @@
import React from "react";
import Pagination from "../common/Pagination";
import { newsItems3 } from "@/data/blogs";
import { allBlogs } from "@/utlis/constant.utils";
import Link from "next/link";
import Image from "next/image";
export default function Blogs() {
return (
<section className="news-section fix section-padding">
<section className="news-section2 fix section-padding">
<div className="container">
<div className="row g-4">
{newsItems3.map((news) => (
{allBlogs.slice(-3).map((news) => (
<div
key={news.id}
className={`col-xl-4 col-lg-6 col-md-6 wow fadeInUp ${
@ -18,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}
@ -34,7 +35,9 @@ export default function Blogs() {
<li>{news.date}</li>
</ul>
<h4>
<Link href={`/news-details/${news.id}`}>{news.title}</Link>
<Link href={`/news-details/${news.slug}`}>
{news.title}
</Link>
</h4>
<div className="author-items">
<div className="author-info">
@ -50,7 +53,7 @@ export default function Blogs() {
</div>
</div>
<Link
href={`/news-details/${news.id}`}
href={`/news-details/${news.slug}`}
className="link-btn"
>
Read More <i className="fa-solid fa-arrow-right" />
@ -61,14 +64,9 @@ export default function Blogs() {
</div>
))}
</div>
<div
className="page-nav-wrap pt-5 text-center wow fadeInUp"
data-wow-delay=".3s"
>
<ul>
<Pagination />
</ul>
</div>
{/* Optional pagination if needed */}
{/* <Pagination /> */}
</div>
</section>
);

View File

@ -23,9 +23,9 @@ export default function Footer1() {
data-wow-delay=".2s"
>
<Image
src="/assets/img/logo/black-logo.svg"
width={149}
height={64}
src="/assets/img/logo/logo.png"
width={300}
height={60}
alt="img"
/>
</Link>

View File

@ -0,0 +1,119 @@
"use client";
import Nav from "./Nav";
import Link from "next/link";
import Offcanvas from "./Offcanvas";
import { openMobilemenu } from "@/utlis/toggleMobilemenu";
import Image from "next/image";
export default function Header1() {
return (
<>
<header className="header-section">
<div className="container-fluid">
<div className="main-header-wrapper">
<div className="logo-image">
<Link href={`/`}>
<Image
src="/assets/img/logo/black-logo.svg"
width={149}
height={64}
alt="img"
/>
</Link>
</div>
<div className="main-header-items">
<div className="header-contact-info-area">
<div className="contact-info-items">
<div className="icon">
<i className="fa-sharp fa-solid fa-location-dot"></i>
</div>
<div className="content">
<p>Office location</p>
<h3>4648 Rocky, New York</h3>
</div>
</div>
<div className="contact-info-items">
<div className="icon">
<i className="fa-solid fa-envelope"></i>
</div>
<div className="content">
<p>send email</p>
<h3>
<a href="mailto:example@gmail.com">example@gmail.com</a>
</h3>
</div>
</div>
<div className="contact-info-items style-2">
<div className="icon">
<i className="fa-solid fa-phone-volume"></i>
</div>
<div className="content">
<p>call emergency</p>
<h3>
<a href="tel:+88012365499">+88 0123 654 99</a>
</h3>
</div>
</div>
<div className="header-button">
<Link href={`/contact`} className="theme-btn">
GAT A QUOTE <i className="fa-regular fa-arrow-right"></i>
</Link>
</div>
</div>
<div id="header-sticky" className="header-1">
<div className="mega-menu-wrapper">
<div className="header-main">
<div className="logo">
<Link href={`/`} className="header-logo">
<Image
src="/assets/img/logo/black-logo.svg"
alt="logo-img"
width={149}
height={64}
/>
</Link>
</div>
<div className="header-left">
<div className="mean__menu-wrapper">
<div className="main-menu">
<nav id="mobile-menu">
<ul>
<Nav />
</ul>
</nav>
</div>
</div>
</div>
<div className="header-right d-flex justify-content-end align-items-center">
<a
href="#0"
onClick={() =>
document
.getElementById("searchWrap")
.classList.add("active")
}
className="search-trigger search-icon"
>
<i className="fal fa-search"></i>
</a>
<div className="header__hamburger d-xl-block my-auto">
<div
onClick={() => openMobilemenu()}
className="sidebar__toggle"
>
<i className="fas fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<Offcanvas>
<Nav />
</Offcanvas>
</>
);
}

View File

@ -4,6 +4,7 @@ import Link from "next/link";
import Offcanvas from "./Offcanvas";
import { openMobilemenu } from "@/utlis/toggleMobilemenu";
import Image from "next/image";
export default function Header1() {
return (
<>
@ -13,62 +14,24 @@ export default function Header1() {
<div className="logo-image">
<Link href={`/`}>
<Image
src="/assets/img/logo/black-logo.svg"
width={149}
height={64}
src="/assets/img/logo/logo.png"
width={300}
height={60}
alt="img"
/>
</Link>
</div>
<div className="main-header-items">
<div className="header-contact-info-area">
<div className="contact-info-items">
<div className="icon">
<i className="fa-sharp fa-solid fa-location-dot"></i>
</div>
<div className="content">
<p>Office location</p>
<h3>4648 Rocky, New York</h3>
</div>
</div>
<div className="contact-info-items">
<div className="icon">
<i className="fa-solid fa-envelope"></i>
</div>
<div className="content">
<p>send email</p>
<h3>
<a href="mailto:example@gmail.com">example@gmail.com</a>
</h3>
</div>
</div>
<div className="contact-info-items style-2">
<div className="icon">
<i className="fa-solid fa-phone-volume"></i>
</div>
<div className="content">
<p>call emergency</p>
<h3>
<a href="tel:+88012365499">+88 0123 654 99</a>
</h3>
</div>
</div>
<div className="header-button">
<Link href={`/contact`} className="theme-btn">
GAT A QUOTE <i className="fa-regular fa-arrow-right"></i>
</Link>
</div>
</div>
<div id="header-sticky" className="header-1">
<div className="mega-menu-wrapper">
<div className="header-main">
<div className="logo">
<Link href={`/`} className="header-logo">
<Image
src="/assets/img/logo/black-logo.svg"
src="/assets/img/logo/logo.png"
alt="logo-img"
width={149}
height={64}
width={300}
height={60}
/>
</Link>
</div>
@ -83,27 +46,23 @@ export default function Header1() {
</div>
</div>
</div>
<div className="header-right d-flex justify-content-end align-items-center">
<a
href="#0"
onClick={() =>
document
.getElementById("searchWrap")
.classList.add("active")
}
className="search-trigger search-icon"
>
<i className="fal fa-search"></i>
</a>
<div className="header__hamburger d-xl-block my-auto">
<div
onClick={() => openMobilemenu()}
className="sidebar__toggle"
>
<i className="fas fa-bars"></i>
</div>
</div>
</div>
<div className="header-right d-flex justify-content-end align-items-center">
<div className="header-button">
<Link
href="/contact"
className="theme-btn d-inline-flex align-items-center justify-content-center gap-2"
>
<span className="text-nowrap">GET A QUOTE</span>
<i className="fa-regular fa-arrow-right"></i>
</Link>
</div>
<div className="header__hamburger my-auto ms-3">
<div onClick={() => openMobilemenu()} className="sidebar__toggle">
<i className="fas fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
@ -116,4 +75,4 @@ export default function Header1() {
</Offcanvas>
</>
);
}
}

View File

@ -13,7 +13,7 @@ export default function About() {
>
<div className="about-shape-1 float-bob-x">
<Image
src="/assets/img/about/about-shape-1.png"
src="/assets/img/about/top-right.webp"
width={114}
height={419}
alt="img"
@ -21,7 +21,7 @@ export default function About() {
</div>
<div className="about-shape-2 float-bob-x">
<Image
src="/assets/img/about/about-shape-2.png"
src="/assets/img/about/bottom-left.webp"
width={318}
height={408}
alt="img"
@ -33,7 +33,7 @@ export default function About() {
<div className="col-lg-6">
<div className="about-image">
<Image
src="/assets/img/about/01.jpg"
src="/assets/img/home/about/about-big-image.webp"
alt="img"
width={485}
height={592}
@ -45,23 +45,17 @@ export default function About() {
data-wow-delay=".4s"
>
<Image
src="/assets/img/about/02.jpg"
src="/assets/img/about/about-small-image.webp"
width={260}
height={270}
style={{ height: '200px', objectFit: 'cover' }}
alt="img"
/>
<div className="video-box">
<a
onClick={() => setOpen(true)}
className="video-btn video-popup"
>
<i className="fas fa-play"></i>
</a>
</div>
</div>
<div className="about-line-shape">
<Image
src="/assets/img/about/about-shape-3.png"
src="/assets/img/about/right-side-scale-img.webp"
width={30}
height={545}
alt="img"
@ -73,35 +67,37 @@ export default function About() {
<div className="about-content">
<div className="section-title">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long"></i>1976
Building conpany
<i className="fa-regular fa-arrow-left-long"></i>About Us
<i className="fa-regular fa-arrow-right-long"></i>
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Create The Building You Want Here" />
<AnimatedText text="Engineering the Future of Coconut Processing" />
</h2>
</div>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
It is a long established fact that a reader will be
distracted the readable content of a page when looking at
layout the point of using lorem the is Ipsum less normal
distribution of letters.
We are pioneers in designing and delivering high-performance coconut processing equipment built for modern food processing industries. With decades of expertise, we offer complete turnkey solutions - from coconut deshelling to drying, grinding, and packaging.
</p>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
Our engineering capabilities include:
</p>
<ul className="list-items wow fadeInUp" data-wow-delay=".2s">
<li>
<i className="fa-solid fa-circle-check"></i>
Proactively pontificate client-centered relationships
Complete plant design & optimization
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
Is there a waiting list for desired work to be started
Custom-built coconut machinery for various capacities
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
Release of Letraset sheets containing Lorem Ipsum
Upgradation and automation of existing setups
</li>
</ul>
<div className="about-author">
<p className="mt-md-0 wow fadeInUp" data-wow-delay=".4s">
Let us help you boost your production efficiency and minimize downtime.
</p>
{/* <div className="about-author">
<div
className="author-image wow fadeInUp"
data-wow-delay=".2s"
@ -125,7 +121,7 @@ export default function About() {
className="wow fadeInUp"
data-wow-delay=".4s"
/>
</div>
</div> */}
</div>
</div>
</div>

View File

@ -0,0 +1,144 @@
"use client";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
import ModalVideo from "react-modal-video";
import { useState } from "react";
export default function About() {
const [isOpen, setOpen] = useState(false);
return (
<>
<section
id="about"
className="about-section fix section-padding scrollSpySection"
>
<div className="about-shape-1 float-bob-x">
<Image
src="/assets/img/about/about-shape-1.png"
width={114}
height={419}
alt="img"
/>
</div>
<div className="about-shape-2 float-bob-x">
<Image
src="/assets/img/about/about-shape-2.png"
width={318}
height={408}
alt="img"
/>
</div>
<div className="container">
<div className="about-wrapper">
<div className="row g-4">
<div className="col-lg-6">
<div className="about-image">
<Image
src="/assets/img/about/01.jpg"
alt="img"
width={485}
height={592}
className="wow fadeInLeft"
data-wow-delay=".2s"
/>
<div
className="about-image-2 wow fadeInUp"
data-wow-delay=".4s"
>
<Image
src="/assets/img/about/02.jpg"
width={260}
height={270}
alt="img"
/>
<div className="video-box">
<a
onClick={() => setOpen(true)}
className="video-btn video-popup"
>
<i className="fas fa-play"></i>
</a>
</div>
</div>
<div className="about-line-shape">
<Image
src="/assets/img/about/about-shape-3.png"
width={30}
height={545}
alt="img"
/>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="about-content">
<div className="section-title">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long"></i>1976
Building conpany
<i className="fa-regular fa-arrow-right-long"></i>
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Create The Building You Want Here" />
</h2>
</div>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
It is a long established fact that a reader will be
distracted the readable content of a page when looking at
layout the point of using lorem the is Ipsum less normal
distribution of letters.
</p>
<ul className="list-items wow fadeInUp" data-wow-delay=".2s">
<li>
<i className="fa-solid fa-circle-check"></i>
Proactively pontificate client-centered relationships
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
Is there a waiting list for desired work to be started
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
Release of Letraset sheets containing Lorem Ipsum
</li>
</ul>
<div className="about-author">
<div
className="author-image wow fadeInUp"
data-wow-delay=".2s"
>
<Image
src="/assets/img/about/author.png"
width={68}
height={68}
alt="author-img"
/>
<div className="content">
<p>Xbuild, CEO</p>
<h4>Brooklyn Simmons</h4>
</div>
</div>
<Image
src="/assets/img/about/signature.png"
alt="img"
width={85}
height={51}
className="wow fadeInUp"
data-wow-delay=".4s"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>{" "}
<ModalVideo
channel="youtube"
youtube={{ mute: 0, autoplay: 0 }}
isOpen={isOpen}
videoId="Cn4G2lZ_g2I"
onClose={() => setOpen(false)}
/>{" "}
</>
);
}

View File

@ -0,0 +1,138 @@
"use client";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
import ModalVideo from "react-modal-video";
import { useState } from "react";
export default function About() {
const [isOpen, setOpen] = useState(false);
return (
<>
<section
id="about"
className="about-section fix section-padding scrollSpySection"
>
<div className="about-shape-1 float-bob-x">
<Image
src="/assets/img/about/about-shape-1.png"
width={114}
height={419}
alt="img"
/>
</div>
<div className="about-shape-2 float-bob-x">
<Image
src="/assets/img/about/about-shape-2.png"
width={318}
height={408}
alt="img"
/>
</div>
<div className="container">
<div className="about-wrapper">
<div className="row g-4">
<div className="col-lg-6">
<div className="about-image">
<Image
src="/assets/img/about/01.jpg"
alt="img"
width={485}
height={592}
className="wow fadeInLeft"
data-wow-delay=".2s"
/>
<div
className="about-image-2 wow fadeInUp"
data-wow-delay=".4s"
>
<Image
src="/assets/img/about/02.jpg"
width={260}
height={270}
alt="img"
/>
</div>
<div className="about-line-shape">
<Image
src="/assets/img/about/about-shape-3.png"
width={30}
height={545}
alt="img"
/>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="about-content">
<div className="section-title">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long"></i>Pioneers in Coconut Processing
<i className="fa-regular fa-arrow-right-long"></i>
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Driven by Engineering Excellence" />
</h2>
</div>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
At Cibus Industries, we specialize in delivering innovative, end-to-end coconut processing solutions built for todays high-demand food industry. Our engineering team has decades of experience designing reliable, performance-driven machinery that supports every stage of coconut processing - from deshelling to drying, grinding, and packaging. We dont just build machines. We create tailored systems that drive efficiency, scalability, and sustainability.
</p>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
Our Core Engineering Strengths:
</p>
<ul className="list-items wow fadeInUp" data-wow-delay=".2s">
<li>
<i className="fa-solid fa-circle-check"></i>
End-to-End Plant Design & Process Optimization
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
Customized Coconut Machinery for Any Scale
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
System Upgrades & Smart Automation
</li>
</ul>
<p className="mt-md-0 wow fadeInUp" data-wow-delay=".4s">
Let us help you maximize productivity and minimize downtime with industry-leading technology.
</p>
{/* <div className="about-author">
<div
className="author-image wow fadeInUp"
data-wow-delay=".2s"
>
<Image
src="/assets/img/about/author.png"
width={68}
height={68}
alt="author-img"
/>
<div className="content">
<p>Xbuild, CEO</p>
<h4>Brooklyn Simmons</h4>
</div>
</div>
<Image
src="/assets/img/about/signature.png"
alt="img"
width={85}
height={51}
className="wow fadeInUp"
data-wow-delay=".4s"
/>
</div> */}
</div>
</div>
</div>
</div>
</div>
</section>{" "}
<ModalVideo
channel="youtube"
youtube={{ mute: 0, autoplay: 0 }}
isOpen={isOpen}
videoId="Cn4G2lZ_g2I"
onClose={() => setOpen(false)}
/>{" "}
</>
);
}

View File

@ -1,17 +1,27 @@
import { newsImageItems, newsItems } from "@/data/blogs";
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"
className="news-section fix section-padding fix section-bg-2 scrollSpySection"
className="news-section fix section-padding fix scrollSpySection"
>
<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.id}`}>
{item.title.split("<br />").map((line, index) => (
<React.Fragment key={index}>
{line}
<br />
</React.Fragment>
))}
<Link href={`/news-details/${leftBlog.slug}`}>
{truncateWords(leftBlog.title.replace(/<[^>]+>/g, ""), 12)
.split("<br />")
.map((line, index) => (
<React.Fragment key={index}>
{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" />
@ -90,16 +106,15 @@ export default function Blogs() {
</li>
</ul>
<h4>
<Link href={`/news-details/${item.id}`}>
{item.title}
<Link href={`/news-details/${item.slug}`}>
{truncateWords(item.title.replace(/<[^>]+>/g, ""), 6)}
</Link>
</h4>
<p>
Pellentesque vitae consectetur ante <br />
Integer non eros...
{truncateWords(item.description.replace(/<[^>]+>/g, ""), 10)}
</p>
<Link
href={`/news-details/${item.id}`}
href={`/news-details/${item.slug}`}
className="link-btn"
>
Read More <i className="fa-regular fa-arrow-right-long" />
@ -107,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"

View File

@ -0,0 +1,89 @@
import React from "react";
import Image from "next/image";
export default function CorporateProfile() {
return (
<section className="news-standard fix section-padding">
<div className="container">
<div className="row g-4">
<div className="col-12">
<div className="blog-post-details">
<div className="single-blog-post">
<div
className="post-featured-thumb bg-cover"
style={{
backgroundImage: `url("/assets/img/news/post-3.jpg")`,
height: "400px",
backgroundSize: "cover",
backgroundPosition: "center",
borderRadius: "10px"
}}
/>
<div className="post-content">
<h3>Revolutionizing Coconut Processing: The Rise of Turnkey Plants</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut ab asperiores rem nostrum at eveniet, atque repellendus voluptates nemo odio facilis doloremque earum error fuga. Sint totam dolores rerum nulla doloremque sit molestiae, ut, eligendi fuga culpa illum adipisci earum, beatae officiis laboriosam dolorem. Nam optio id vel asperiores, laboriosam soluta eaque at, amet, minus quaerat tempore esse repudiandae ipsa? Deserunt corporis minus unde possimus modi eum magnam doloremque iusto saepe necessitatibus cupiditate eos, perferendis, quibusdam magni ut quas, nesciunt quis consequuntur? Enim quidem voluptatibus possimus pariatur ipsam eveniet deleniti culpa consectetur dignissimos expedita, a laborum minima inventore, ab neque?
</p>
<div className="hilight-text mt-4 mb-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, nam voluptatem! Suscipit et, fugiat pariatur tempora beatae at assumenda sed quae minus voluptatum ratione quis. Quam provident modi earum. Aut molestiae totam illo necessitatibus aliquam adipisci nulla, quidem eveniet odit amet, perspiciatis sunt libero fuga dolores! Inventore tempora, vel quis magni ut optio. Officia inventore nostrum, voluptatem atque harum dolores!
</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 className="mt-3">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam similique autem debitis nulla qui quis, soluta illo rerum consequatur explicabo delectus dolores esse doloremque nesciunt ratione accusantium, quo dignissimos voluptate vero a sunt dolor odit, voluptatem minima? Ex nesciunt, numquam, maxime repudiandae rerum dolore illo ipsam nam vel omnis quaerat incidunt. Non consequuntur sit in ipsum perspiciatis molestias nulla esse neque quam officiis, itaque dolorum, dolor maiores quos ipsa cupiditate temporibus, natus quibusdam voluptate atque qui. Quibusdam placeat sint excepturi consequuntur, obcaecati soluta fugit perspiciatis, nam dolor dolore nobis. Nesciunt repellendus hic dolorem nulla ad voluptatem modi. Vitae, consectetur iste.
</p>
<p className="mt-3">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam voluptatem, sint molestias recusandae id cumque laborum beatae nam quibusdam. Est expedita corporis numquam voluptatum vitae similique ipsam nihil minima dolore voluptatibus ipsum tempore, corrupti obcaecati natus esse molestiae sunt nostrum suscipit magnam asperiores sint culpa atque labore! Iure architecto molestias amet obcaecati. Sapiente consequatur laborum expedita, eos dolores doloribus esse incidunt ratione, fugit molestiae fuga quia tempore reprehenderit architecto laudantium cupiditate? Explicabo natus, voluptatibus veniam adipisci reiciendis mollitia officia, ad doloremque ea, beatae provident quae. Alias minus ullam commodi vel modi. Odit vero velit repudiandae labore pariatur, ad harum nihil.
</p>
<div className="row mt-5 mb-5">
<div className="col-lg-6">
<div className="details-image">
<Image
src="/assets/img/news/post-5.jpg"
width={370}
height={269}
alt="img"
/>
</div>
</div>
<div className="col-lg-6 col-md-12">
<div className="details-image">
<Image
src="/assets/img/news/post-5.jpg"
width={370}
height={269}
alt="img"
/>
</div>
</div>
</div>
<p className="mt-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis ex vero praesentium odio impedit dicta magnam fugit facere ullam recusandae placeat nesciunt corrupti modi dignissimos veniam iusto molestiae fuga, maxime obcaecati doloribus, consectetur voluptates unde? Deserunt quasi possimus fugiat nobis cupiditate est porro laborum aperiam maiores doloribus repellendus recusandae eos, quae at expedita, accusantium aspernatur itaque molestiae distinctio odit earum dolore eligendi praesentium. Alias repellendus eos explicabo, dolorem laudantium quis. Debitis facere sed delectus doloribus, commodi velit officia eius amet eos, nihil pariatur accusamus iure voluptatibus provident vel at cum ut aliquam ipsam voluptatem inventore atque cupiditate porro cumque. Officia.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}

View File

@ -4,24 +4,23 @@ import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
export default function Cta() {
return (
<section className="cta-banner-section section-padding">
<section className="cta-banner-section section-padding pt-0">
<div className="container">
<div
className="cta-banner-wrapper fix bg-cover"
style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
style={{ backgroundImage: 'url("/assets/img/home/launch/ready-to-launch-bg.webp")' }}
>
<h2 className="splt-txt wow">
<AnimatedText text="Looking For Best Partner" /> <br />
<AnimatedText text="For Your" />{" "}
<AnimatedText text="Ready to Launch Your " /> <br />
<b>
<AnimatedText text="Next Construction" />
<AnimatedText text="Coconut Machinery" />
</b>{" "}
<br />
<AnimatedText text="Works?" />
<AnimatedText text="Project?" />
</h2>
<div className="cta-img wow fadeInUp" data-wow-delay=".4s">
<Image
src="/assets/img/cta-img.png"
src="/assets/img/home/launch/ready-to-launch.webp"
width={223}
height={256}
alt="img"

View File

@ -6,10 +6,10 @@ export default function Faq() {
return (
<section
className="faq-section fix section-padding section-bg-2 bg-cover"
style={{ backgroundImage: 'url("/assets/img/faq/bg-shape.png")' }}
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">
@ -23,25 +23,22 @@ export default function Faq() {
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Your Frequently Ask & " /> <br />
<AnimatedText text="Your Frequently Asked " /> <br />
<AnimatedText text="Questions" />
</h2>
</div>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
It is a long established fact that a reader will be distracted
the readable content of a page when looking at layout the
point of using lorem the is Ipsum less normal distribution of
letters.
Have questions about our coconut processing machinery or turnkey solutions? Weve compiled answers to the most common queries to help you make informed decisions. Whether you're just getting started or looking to scale up, we've got the answers you need.
</p>
<div className="icon-items wow fadeInUp" data-wow-delay=".2s">
<div className="icon">
<i className="fa-regular fa-check" />
</div>
<div className="content">
<h5>UNIQUE PROJECTS</h5>
<h5>ENGINEERED FOR PERFORMANCE</h5>
<span>
It is a long established fact that a reader will be
distracted the readable content of a page when
We deliver machines built for peak performance, safety, and longevity.
From selection to support, were with you at every step.
</span>
</div>
</div>
@ -50,10 +47,10 @@ export default function Faq() {
<i className="fa-regular fa-check" />
</div>
<div className="content">
<h5>UNIQUE PROJECTS</h5>
<h5>TAILORED TO YOUR NEEDS</h5>
<span>
It is a long established fact that a reader will be
distracted the readable content of a page when
Our solutions are customized to your production goals.
We support both small units and full-scale plants.
</span>
</div>
</div>
@ -70,9 +67,8 @@ export default function Faq() {
>
<h5 className="accordion-header">
<button
className={`accordion-button ${
faq.expanded ? "" : "collapsed"
}`}
className={`accordion-button ${faq.expanded ? "" : "collapsed"
}`}
type="button"
data-bs-toggle="collapse"
data-bs-target={`#faq${faq.id}`}
@ -84,9 +80,8 @@ export default function Faq() {
</h5>
<div
id={`faq${faq.id}`}
className={`accordion-collapse collapse ${
faq.expanded ? "show" : ""
}`}
className={`accordion-collapse collapse ${faq.expanded ? "show" : ""
}`}
data-bs-parent="#accordion"
>
<div className="accordion-body">{faq.answer}</div>

View File

@ -1,164 +1,88 @@
"use client";
import AnimatedText from "@/components/common/AnimatedText";
import { Autoplay, Navigation } from "swiper/modules";
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import ModalVideo from "react-modal-video";
import { useState } from "react";
import "swiper/css";
import "swiper/css/pagination";
export default function Hero() {
const [isOpen, setOpen] = useState(false);
const swiperOptions = {
spaceBetween: 30,
speed: 2000,
slidesPerView: 1,
loop: true,
speed: 1000,
freeMode: true,
autoplay: {
delay: 2000,
delay: 4000,
disableOnInteraction: false,
},
navigation: {
prevEl: ".array-prevs",
nextEl: ".array-nexts",
},
modules: [Autoplay, Navigation],
breakpoints: {
1199: {
slidesPerView: 2,
},
991: {
slidesPerView: 2,
},
767: {
slidesPerView: 2,
},
575: {
slidesPerView: 1,
},
0: {
slidesPerView: 1,
},
pagination: {
el: "bullets",
clickable: true,
},
modules: [Autoplay, Pagination],
};
const images = [
"/assets/img/hero/01.jpg",
"/assets/img/hero/02.jpg",
"/assets/img/hero/01.jpg",
"/assets/img/hero/02.jpg",
// Add more image paths as needed
];
return (
<>
<section className="hero-section hero-1 fix section-padding">
<div className="line-shape">
<Image
src="/assets/img/hero/line-shape.png"
width={365}
height={603}
alt="img"
/>
</div>
<div className="container-fluid">
<div className="row g-4">
<div className="col-lg-7">
<div className="hero-content">
<div className="vector-shape">
<Image
src="/assets/img/hero/vector.png"
width={254}
height={296}
alt="img"
/>
</div>
<div className="vector-shape-2">
<Image
src="/assets/img/hero/vector-2.png"
width={254}
height={296}
alt="img"
/>
</div>
<h1 className="splt-txt wow">
<AnimatedText text="Create the" />
<br /> <AnimatedText text="building you" />
<br /> <AnimatedText text="want here" />
</h1>
<p className="wow fadeInUp" data-wow-delay=".5s">
Proactively pontificate client-centered relationships visavis
process centric leadership skills. Credibly.
</p>
<div className="hero-button">
<Link
href={`/about`}
className="theme-btn bg-white wow fadeInUp"
data-wow-delay=".3s"
>
Explore More
<i className="fa-regular fa-arrow-right"></i>
</Link>
<span
className="button-text wow fadeInUp"
data-wow-delay=".5s"
>
<a
onClick={() => setOpen(true)}
className="video-btn video-popup"
>
<i className="fa-solid fa-play"></i>
</a>
<span className="ms-3 d-line">play reel</span>
</span>
</div>
</div>
</div>
<div className="col-lg-5">
<div className="hero-image-items">
<Swiper {...swiperOptions} className="swiper hero-slider">
{images.map((src, index) => (
<SwiperSlide className="swiper-slide" key={index}>
<div className="hero-image">
<Image
width={475}
height={635}
src={src}
alt={`Hero ${index + 1}`}
/>
</div>
</SwiperSlide>
))}
<div className="array-button">
<button className="array-prevs">
<Image
src="/assets/img/hero/prev.png"
width={15}
height={11}
alt="img"
/>
Previews
</button>
<button className="array-nexts">
Next{" "}
<Image
src="/assets/img/hero/next.png"
width={15}
height={11}
alt="img"
/>
</button>
const slides = [
{
id: 1,
image: "/assets/img/home/banner/banner-1.webp",
title: "Smart Coconut",
subtitle: "Solutions",
text: "Efficient machines for deshelling to drying coconut.",
buttonText: "Get A Quote",
buttonLink: "/about",
},
{
id: 2,
image: "/assets/img/home/banner/banner-2.webp",
title: "Future-Ready",
subtitle: "Engineering",
text: "Automation and precision for coconut processing plants.",
buttonText: "Discover Our Innovations",
buttonLink: "/about",
},
{
id: 3,
image: "/assets/img/home/banner/banner-3.webp",
title: "Global Processing",
subtitle: "Impact",
text: "Trusted coconut machinery in 20+ countries worldwide.",
buttonText: "Explore Global Projects",
buttonLink: "/about",
},
];
return (
<Swiper {...swiperOptions} className="hero-swiper">
{slides.map((slide) => (
<SwiperSlide key={slide.id}>
<section
className="hero-section hero-1"
style={{ backgroundImage: `url(${slide.image})` }}
>
<div className="container-fluid">
<div className="row">
<div className="col-lg-12">
<div className="hero-content">
<h1 className="splt-txt">
<span className="break-line">{slide.title}</span>
<span className="break-line">{slide.subtitle}</span>
</h1>
<p>{slide.text}</p>
<div className="hero-button">
<Link href={slide.buttonLink} className="theme-btn bg-white">
{slide.buttonText}
<i className="fa-regular fa-arrow-right"></i>
</Link>
</div>
</div>
</Swiper>
</div>
</div>
</div>
</div>
</div>
</section>
<ModalVideo
channel="youtube"
youtube={{ mute: 0, autoplay: 0 }}
isOpen={isOpen}
videoId="Cn4G2lZ_g2I"
onClose={() => setOpen(false)}
/>{" "}
</>
</section>
</SwiperSlide>
))}
<div className="swiper-pagination"></div>
</Swiper>
);
}

View File

@ -0,0 +1,164 @@
"use client";
import AnimatedText from "@/components/common/AnimatedText";
import { Autoplay, Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Image from "next/image";
import ModalVideo from "react-modal-video";
import { useState } from "react";
export default function Hero() {
const [isOpen, setOpen] = useState(false);
const swiperOptions = {
spaceBetween: 30,
speed: 2000,
loop: true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
navigation: {
prevEl: ".array-prevs",
nextEl: ".array-nexts",
},
modules: [Autoplay, Navigation],
breakpoints: {
1199: {
slidesPerView: 2,
},
991: {
slidesPerView: 2,
},
767: {
slidesPerView: 2,
},
575: {
slidesPerView: 1,
},
0: {
slidesPerView: 1,
},
},
};
const images = [
"/assets/img/hero/01.jpg",
"/assets/img/hero/02.jpg",
"/assets/img/hero/01.jpg",
"/assets/img/hero/02.jpg",
// Add more image paths as needed
];
return (
<>
<section className="hero-section hero-1 fix section-padding">
<div className="line-shape">
<Image
src="/assets/img/hero/line-shape.png"
width={365}
height={603}
alt="img"
/>
</div>
<div className="container-fluid">
<div className="row g-4">
<div className="col-lg-7">
<div className="hero-content">
<div className="vector-shape">
<Image
src="/assets/img/hero/vector.png"
width={254}
height={296}
alt="img"
/>
</div>
<div className="vector-shape-2">
<Image
src="/assets/img/hero/vector-2.png"
width={254}
height={296}
alt="img"
/>
</div>
<h1 className="splt-txt wow">
<AnimatedText text="Create the" />
<br /> <AnimatedText text="building you" />
<br /> <AnimatedText text="want here" />
</h1>
<p className="wow fadeInUp" data-wow-delay=".5s">
Proactively pontificate client-centered relationships visavis
process centric leadership skills. Credibly.
</p>
<div className="hero-button">
<Link
href={`/about`}
className="theme-btn bg-white wow fadeInUp"
data-wow-delay=".3s"
>
Explore More
<i className="fa-regular fa-arrow-right"></i>
</Link>
<span
className="button-text wow fadeInUp"
data-wow-delay=".5s"
>
<a
onClick={() => setOpen(true)}
className="video-btn video-popup"
>
<i className="fa-solid fa-play"></i>
</a>
<span className="ms-3 d-line">play reel</span>
</span>
</div>
</div>
</div>
<div className="col-lg-5">
<div className="hero-image-items">
<Swiper {...swiperOptions} className="swiper hero-slider">
{images.map((src, index) => (
<SwiperSlide className="swiper-slide" key={index}>
<div className="hero-image">
<Image
width={475}
height={635}
src={src}
alt={`Hero ${index + 1}`}
/>
</div>
</SwiperSlide>
))}
<div className="array-button">
<button className="array-prevs">
<Image
src="/assets/img/hero/prev.png"
width={15}
height={11}
alt="img"
/>
Previews
</button>
<button className="array-nexts">
Next{" "}
<Image
src="/assets/img/hero/next.png"
width={15}
height={11}
alt="img"
/>
</button>
</div>
</Swiper>
</div>
</div>
</div>
</div>
</section>
<ModalVideo
channel="youtube"
youtube={{ mute: 0, autoplay: 0 }}
isOpen={isOpen}
videoId="Cn4G2lZ_g2I"
onClose={() => setOpen(false)}
/>{" "}
</>
);
}

View File

@ -0,0 +1,76 @@
import React from "react";
import Pagination from "@/components/common/Pagination";
import { services } from "@/data/services";
import { products } from "@/data/services";
import Link from "next/link";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
export default function Products() {
return (
<section className="service-section fix section-padding">
<div className="container">
<div className="section-title text-center">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long"></i>Product Range
<i className="fa-regular fa-arrow-right-long"></i>
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Explore Our Advanced " /> <br />
<AnimatedText text="Coconut Processing Solutions" />
</h2>
</div>
<div className="row">
{products.map((product) => (
<div
key={product.id}
className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
data-wow-delay={product.delay}
>
<div className="service-box-items items-bg">
<div className="service-thumb">
<Image
src={product.image}
width={346}
height={236}
alt="img"
/>
<div className="icon">
<Image
src={product.icon}
width={32}
height={32}
alt="img"
/>
</div>
</div>
<div className="service-content">
{/* <h2 className="number">{product.number}</h2> */}
<h3>
<Link href={`/service-details/${product.id}`}>
{product.title}
</Link>
</h3>
<p>{product.description}</p>
<Link
href={`/service-details/${product.id}`}
className="link-btn"
>
Explore More <i className="fa-solid fa-arrow-right" />
</Link>
</div>
</div>
</div>
))}
</div>
{/* <div
className="page-nav-wrap pt-5 text-center wow fadeInUp"
data-wow-delay=".3s"
>
<ul>
<Pagination />
</ul>
</div> */}
</div>
</section>
);
}

View File

@ -48,18 +48,18 @@ 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">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long"></i>WHAT WE OFFER
<i className="fa-regular fa-arrow-left-long"></i>EXPLORE
<i className="fa-regular fa-arrow-right-long"></i>
</h6>
<h2 className="text-white splt-txt wow">
<AnimatedText text="Create The Building " />
<AnimatedText text="Explore Machinery " />
<br />
<AnimatedText text="You Want Here" />
<AnimatedText text="and Solutions" />
</h2>
</div>
<div className="array-button">

View File

@ -4,10 +4,10 @@ import AnimatedText from "@/components/common/AnimatedText";
import { skills } from "@/data/skills";
export default function Skills() {
return (
<section className="skills-section fix section-padding pt-0">
<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,10 +15,14 @@ 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"
style={{
opacity: 0.3,
zIndex: -1,
}}
/>
</div>
<div className="container">
@ -29,14 +33,14 @@ export default function Skills() {
<div className="col-lg-7 wow fadeInUp" data-wow-delay=".2s">
<div className="skills-image">
<Image
src="/assets/img/skills/01.jpg"
src="/assets/img/home/build/build-on-innovation-left.webp"
width={324}
height={520}
alt="img"
/>
<div className="logo-shape">
<Image
src="/assets/img/skills/logo.png"
src="/assets/img/home/build/logo.webp"
width={153}
height={167}
alt="img"
@ -47,7 +51,7 @@ export default function Skills() {
<div className="col-lg-5 wow fadeInUp" data-wow-delay=".4s">
<div className="skills-image">
<Image
src="/assets/img/skills/02.jpg"
src="/assets/img/home/build/build-on-innovation-right.webp"
width={227}
height={520}
alt="img"
@ -61,7 +65,7 @@ export default function Skills() {
<div className="section-title">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long" />
our skills
Built on Innovation, Powered by Trust
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="splt-txt wow">
@ -69,10 +73,7 @@ export default function Skills() {
</h2>
</div>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
It is a long established fact that a reader will be distracted
the readable content of a page when looking at layout the
point of using lorem the is Ipsum less normal distribution of
letters.
We specialize in building solutions that meet your exact needs. From machinery fabrication to installation and commissioning, we offer end-to-end support that ensures smooth plant operations.
</p>
<div className="skill-feature-items">
{skills.map((skill, index) => (

View File

@ -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"
@ -39,7 +39,7 @@ export default function Testimonials() {
</div>
<div className="testimonial-image">
<Image
src="/assets/img/testimonial/testimonial-image.jpg"
src="/assets/img/home/testimonial/testimonial-right.webp"
width={745}
height={708}
alt="img"
@ -57,7 +57,7 @@ export default function Testimonials() {
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="text-white splt-txt wow">
<AnimatedText text="What Clients Say" /> <br />
<AnimatedText text="Hear What Our Partners Say " /> <br />
<AnimatedText text="About Us!" />
</h2>
</div>
@ -89,7 +89,7 @@ export default function Testimonials() {
<div className="client-image-area">
<div className="client-img">
<Image
src="/assets/img/testimonial/client-1.png"
src="/assets/img/home/testimonial/testimonial-1.webp"
alt="img"
width={81}
height={89}
@ -97,7 +97,7 @@ export default function Testimonials() {
</div>
<div className="client-img">
<Image
src="/assets/img/testimonial/client-2.png"
src="/assets/img/home/testimonial/testimonial-2.webp"
alt="img"
width={81}
height={89}
@ -105,7 +105,7 @@ export default function Testimonials() {
</div>
<div className="client-img">
<Image
src="/assets/img/testimonial/client-3.png"
src="/assets/img/home/testimonial/testimonial-3.webp"
alt="img"
width={81}
height={89}

View File

@ -0,0 +1,140 @@
"use client";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
import ModalVideo from "react-modal-video";
import { useState } from "react";
export default function TurnKey() {
const [isOpen, setOpen] = useState(false);
return (
<>
<section
id="turnkey-solutions"
className="about-section fix section-padding scrollSpySection"
>
<div className="about-shape-1 float-bob-x">
<Image
src="/assets/img/about/about-shape-1.png"
width={114}
height={419}
alt="img"
/>
</div>
<div className="about-shape-2 float-bob-x">
<Image
src="/assets/img/about/about-shape-2.png"
width={318}
height={408}
alt="img"
/>
</div>
<div className="container">
<div className="about-wrapper">
<div className="row g-4">
<div className="col-lg-6">
<div className="about-image">
<Image
src="/assets/img/about/01.jpg"
alt="img"
width={485}
height={592}
className="wow fadeInLeft"
data-wow-delay=".2s"
/>
<div
className="about-image-2 wow fadeInUp"
data-wow-delay=".4s"
>
<Image
src="/assets/img/about/02.jpg"
width={260}
height={270}
alt="img"
/>
</div>
<div className="about-line-shape">
<Image
src="/assets/img/about/about-shape-3.png"
width={30}
height={545}
alt="img"
/>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="about-content">
<div className="section-title">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long"></i>Our Solutions
<i className="fa-regular fa-arrow-right-long"></i>
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Engineering the Future of Coconut Processing" />
</h2>
</div>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
We are pioneers in designing and delivering high-performance coconut processing equipment built for modern food processing industries. With decades of expertise, we offer complete turnkey solutions - from coconut deshelling to drying, grinding, and packaging.
</p>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
Our engineering capabilities include:
</p>
<ul className="list-items wow fadeInUp" data-wow-delay=".2s">
<li>
<i className="fa-solid fa-circle-check"></i>
Complete plant design & optimization
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
Custom-built coconut machinery for various capacities
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
Upgradation and automation of existing setups
</li>
</ul>
<p className="mt-md-0 wow fadeInUp" data-wow-delay=".4s">
Let us help you boost your production efficiency and minimize downtime.
</p>
{/* <div className="about-author">
<div
className="author-image wow fadeInUp"
data-wow-delay=".2s"
>
<Image
src="/assets/img/about/author.png"
width={68}
height={68}
alt="author-img"
/>
<div className="content">
<p>Xbuild, CEO</p>
<h4>Brooklyn Simmons</h4>
</div>
</div>
<Image
src="/assets/img/about/signature.png"
alt="img"
width={85}
height={51}
className="wow fadeInUp"
data-wow-delay=".4s"
/>
</div> */}
</div>
</div>
</div>
</div>
</div>
</section>{" "}
<ModalVideo
channel="youtube"
youtube={{ mute: 0, autoplay: 0 }}
isOpen={isOpen}
videoId="Cn4G2lZ_g2I"
onClose={() => setOpen(false)}
/>{" "}
</>
);
}

View File

@ -1,11 +1,24 @@
import { projects } from "@/data/projects";
import React from "react";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
import Link from "next/link";
export default function Projects() {
return (
<section className="project-section section-padding fix">
<div className="container">
<div className="section-title text-center">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long" />
Who we are
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Delivers Custom Food" />
<br />
<AnimatedText text="Processing Solutions" />
</h2>
</div>
<div className="row g-4">
{projects.map((project) => (
<div
@ -30,6 +43,12 @@ export default function Projects() {
<Link href={`/project-details/${project.id}`}>
{project.title}
</Link>
<Link
href={`/service-details/${project.id}`}
className="link-btn"
>
<i className="fa-solid fa-arrow-right"></i>
</Link>
</h3>
<p>{project.description}</p>
</div>

View File

@ -0,0 +1,98 @@
"use client";
import { useState } from "react";
import { projectsData } from "@/data/projects";
import React from "react";
import Image from "next/image";
import AnimatedText from "../common/AnimatedText";
const tabOptions = [
{ key: "desiccated", label: "Desiccated Coconut" },
{ key: "virgin", label: "Virgin Coconut Oil" },
{ key: "pare", label: "Pare Water Processing" },
];
export default function ProjectsData() {
const [activeTab, setActiveTab] = useState("desiccated");
const filteredProjects = projectsData.filter(
(project) =>
project.category &&
project.category.toLowerCase().includes(activeTab)
);
return (
<section className="project-section section-padding fix">
<div className="container">
<div className="section-title text-center">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long" />
Projects
<i className="fa-regular fa-arrow-right-long" />
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="projects" />
</h2>
{/* Tabs */}
<div className="project-tabs mt-4 d-flex justify-content-center gap-4">
{tabOptions.map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`nav-link ${
activeTab === tab.key ? "active fw-bold text-dark" : ""
}`}
style={{
border: "none",
background: "transparent",
fontSize: "1rem",
position: "relative",
}}
>
{tab.label}
{activeTab === tab.key && (
<div
style={{
height: "3px",
backgroundColor: "#ff5502",
width: "100%",
position: "absolute",
bottom: "-4px",
left: 0,
borderRadius: "2px",
}}
/>
)}
</button>
))}
</div>
</div>
<div className="row g-4 mt-5">
{filteredProjects.map((project) => (
<div
key={project.id}
className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
data-wow-delay={project.delay}
>
<div className="project-card-items">
<div className="project-image">
{project.images.map((image, index) => (
<Image
key={index}
width={370}
height={331}
src={image}
alt="img"
/>
))}
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
}

View File

@ -0,0 +1,138 @@
"use client";
import Image from "next/image";
import AnimatedText from "@/components/common/AnimatedText";
import ModalVideo from "react-modal-video";
import { useState } from "react";
export default function About() {
const [isOpen, setOpen] = useState(false);
return (
<>
<section
id="about"
className="about-section fix section-padding scrollSpySection"
>
<div className="about-shape-1 float-bob-x">
<Image
src="/assets/img/about/about-shape-1.png"
width={114}
height={419}
alt="img"
/>
</div>
<div className="about-shape-2 float-bob-x">
<Image
src="/assets/img/about/about-shape-2.png"
width={318}
height={408}
alt="img"
/>
</div>
<div className="container">
<div className="about-wrapper">
<div className="row g-4">
<div className="col-lg-6">
<div className="about-image">
<Image
src="/assets/img/about/01.jpg"
alt="img"
width={485}
height={592}
className="wow fadeInLeft"
data-wow-delay=".2s"
/>
<div
className="about-image-2 wow fadeInUp"
data-wow-delay=".4s"
>
<Image
src="/assets/img/about/02.jpg"
width={260}
height={270}
alt="img"
/>
</div>
<div className="about-line-shape">
<Image
src="/assets/img/about/about-shape-3.png"
width={30}
height={545}
alt="img"
/>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="about-content">
<div className="section-title">
<h6 className="wow fadeInUp">
<i className="fa-regular fa-arrow-left-long"></i>Our Solutions
<i className="fa-regular fa-arrow-right-long"></i>
</h6>
<h2 className="splt-txt wow">
<AnimatedText text="Engineering the Future of Coconut Processing" />
</h2>
</div>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
We are pioneers in designing and delivering high-performance coconut processing equipment built for modern food processing industries. With decades of expertise, we offer complete turnkey solutions - from coconut deshelling to drying, grinding, and packaging.
</p>
<p className="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".4s">
Our engineering capabilities include:
</p>
<ul className="list-items wow fadeInUp" data-wow-delay=".2s">
<li>
<i className="fa-solid fa-circle-check"></i>
Complete plant design & optimization
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
Custom-built coconut machinery for various capacities
</li>
<li>
<i className="fa-solid fa-circle-check"></i>
Upgradation and automation of existing setups
</li>
</ul>
<p className="mt-md-0 wow fadeInUp" data-wow-delay=".4s">
Let us help you boost your production efficiency and minimize downtime.
</p>
{/* <div className="about-author">
<div
className="author-image wow fadeInUp"
data-wow-delay=".2s"
>
<Image
src="/assets/img/about/author.png"
width={68}
height={68}
alt="author-img"
/>
<div className="content">
<p>Xbuild, CEO</p>
<h4>Brooklyn Simmons</h4>
</div>
</div>
<Image
src="/assets/img/about/signature.png"
alt="img"
width={85}
height={51}
className="wow fadeInUp"
data-wow-delay=".4s"
/>
</div> */}
</div>
</div>
</div>
</div>
</div>
</section>{" "}
<ModalVideo
channel="youtube"
youtube={{ mute: 0, autoplay: 0 }}
isOpen={isOpen}
videoId="Cn4G2lZ_g2I"
onClose={() => setOpen(false)}
/>{" "}
</>
);
}

View File

@ -3,18 +3,18 @@ export const newsItems = [
id: 1,
imgSrc: "/assets/img/news/02.jpg",
title: "Supervisor Disapproved of Latest Work.",
description: "Pellentesque vitae consectetur ante \nInteger non eros...",
description: "If you're still using outdated deshellers, you may be losing time and yield...",
author: "By Admin",
category: "Maintenance",
category: "Machine Insights",
delay: ".2s",
},
{
id: 2,
imgSrc: "/assets/img/news/03.jpg",
title: "Supervisor Disapproved of Latest Work.",
description: "Pellentesque vitae consectetur ante \nInteger non eros...",
description: " Selecting the wrong dryer can lead to uneven drying and product rejection...",
author: "By Admin",
category: "Maintenance",
category: "Operational Tips",
delay: ".4s",
},
];
@ -23,11 +23,10 @@ export const newsImageItems = [
{
id: 3,
backgroundImage: "/assets/img/news/01.jpg",
title: "Helping Companies in Their <br />Green Transition",
description:
"Pellentesque vitae consectetur ante Integer non eros id quam dapibus tincidunt non sed dolor Praesent maximus ...",
title: " Revolutionizing Coconut Processing: The Rise of Turnkey Plants",
description: " Turnkey coconut processing plants are helping manufacturers scale faster and reduce operational...",
author: "By Admin",
category: "Maintenance",
category: "Coconut Tech",
},
];
@ -64,9 +63,9 @@ export const newsItems2 = [
},
];
export const newsItems3 = [
export const BlogData = [
{
id: 7,
slug: "latest-work-disapproved-supervisor",
images: ["/assets/img/news/04.jpg", "/assets/img/news/04.jpg"],
category: "Construction",
date: "07 July 2024",
@ -78,7 +77,7 @@ export const newsItems3 = [
delay: ".2s",
},
{
id: 8,
slug: "manager-disapproved-most-recent-work",
images: ["/assets/img/news/05.jpg", "/assets/img/news/05.jpg"],
category: "Building",
date: "07 July 2024",
@ -91,7 +90,7 @@ export const newsItems3 = [
active: true,
},
{
id: 9,
slug: "manager-found-latest-work-unsatisfactory",
images: ["/assets/img/news/06.jpg", "/assets/img/news/06.jpg"],
category: "Industry",
date: "07 July 2024",
@ -102,42 +101,6 @@ export const newsItems3 = [
},
delay: ".6s",
},
{
id: 10,
images: ["/assets/img/news/07.jpg", "/assets/img/news/07.jpg"],
category: "Industry",
date: "07 July 2024",
title: "Manager Found Latest Work Unsatisfactory.",
author: {
name: "Guy Hawkins",
image: "/assets/img/news/author-3.png",
},
delay: ".2s",
},
{
id: 11,
images: ["/assets/img/news/08.jpg", "/assets/img/news/08.jpg"],
category: "Industry",
date: "07 July 2024",
title: "Manager Found Latest Work Unsatisfactory.",
author: {
name: "Guy Hawkins",
image: "/assets/img/news/author-3.png",
},
delay: ".4s",
},
{
id: 12,
images: ["/assets/img/news/09.jpg", "/assets/img/news/09.jpg"],
category: "Industry",
date: "07 July 2024",
title: "Manager Found Latest Work Unsatisfactory.",
author: {
name: "Guy Hawkins",
image: "/assets/img/news/author-3.png",
},
delay: ".6s",
},
];
export const newsItems4 = [
@ -203,7 +166,6 @@ export const allNews = [
...newsItems,
...newsImageItems,
...newsItems2,
...newsItems3,
...newsItems4,
...recentItems,
];

View File

@ -36,32 +36,33 @@ export const counterItems = [
export const achievements = [
{
id: 1,
icon: "/assets/img/icon/21.svg",
count: "45",
description: "project Complete",
delay: ".2s",
icon: "/assets/img/icon/24.svg",
count: "20+",
description: "Countries Served",
delay: ".4s",
style: "style-2",
},
{
id: 2,
icon: "/assets/img/icon/22.svg",
count: "25",
description: "Active On Clients",
delay: ".4s",
},
{
id: 3,
icon: "/assets/img/icon/23.svg",
count: "2.5",
description: "Experience Team",
count: "99.5%",
description: "Equipment Uptime",
delay: ".2s",
style: "style-2",
},
{
id: 4,
icon: "/assets/img/icon/24.svg",
count: "2.4",
description: "Winning Awards",
id: 3,
icon: "/assets/img/icon/22.svg",
count: "120+",
description: "Machinery Delivered",
delay: ".4s",
style: "style-2",
},
{
id: 4,
icon: "/assets/img/icon/21.svg",
count: "98%",
description: "Client Satisfaction",
delay: ".2s",
},
];

View File

@ -1,41 +1,41 @@
export const faqs = [
{
id: 1,
question: "How long should a business plan be?",
question: "What coconut processing machinery does Cibus offer?",
answer:
"It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.",
"We offer a wide range of coconut machinery, including deshelling machines, dryers, pulverizers, conveyors, and complete turnkey processing lines. Each machine is designed to optimize productivity, minimize waste, and ensure hygiene standards.",
delay: ".1s",
expanded: false,
},
{
id: 2,
question: "What are the different stages of a construction project?",
question: "How do I choose the right coconut dryer for my facility?",
answer:
"It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.",
"Choosing the right dryer depends on your production capacity, moisture removal requirements, energy sources, and available space. Our team will assess your specific needs and recommend the most efficient and cost-effective drying solution.",
delay: ".3s",
expanded: true,
},
{
id: 3,
question: "What are the different stages of a construction project?",
question: "Can your deshelling machines integrate with existing production lines?",
answer:
"It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.",
"Absolutely. Our deshelling machines are designed to be modular and flexible, making them easy to integrate into existing coconut processing lines. We also offer customization to ensure seamless operation.",
delay: ".5s",
expanded: false,
},
{
id: 4,
question: "What are the different stages of a construction project?",
question: "Do you offer on-site installation and post-sales service?",
answer:
"It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.",
"Yes, we provide full on-site installation, commissioning, and operator training. Our after-sales support includes maintenance, spare parts supply, and remote troubleshooting to ensure continuous uptime.",
delay: ".6s",
expanded: false,
},
{
id: 5,
question: "What are the different stages of a construction project?",
question: "What capacities are available for your processing machines?",
answer:
"It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.",
"Our machines are available in a variety of capacities to suit small, medium, and large-scale operations — ranging from 100 coconuts/hour to industrial-scale units handling several tons per day. We can also custom-build equipment to match your output goals.",
delay: ".7s",
expanded: false,
},

View File

@ -1,64 +1,76 @@
export const menuData = [
{
label: "Home",
href: "#",
iconClass: "fa-regular fa-plus",
href: "/",
// iconClass: "fa-regular fa-plus",
className: "has-dropdown active menu-thumb",
submenu: [
{
homeMenuItems: [
{
imageSrc: "/assets/img/header/home-1.jpg",
title: "Home 01",
buttons: [
{ label: "Multi Page", href: "/" },
{ label: "One Page", href: "/home-1-one-page" },
],
},
{
imageSrc: "/assets/img/header/home-2.jpg",
title: "Home 02",
buttons: [
{ label: "Multi Page", href: "/home-2" },
{ label: "One Page", href: "/home-2-one-page" },
],
},
],
},
],
// submenu: [
// {
// homeMenuItems: [
// {
// imageSrc: "/assets/img/header/home-1.jpg",
// title: "Home 01",
// buttons: [
// { label: "Multi Page", href: "/" },
// { label: "One Page", href: "/home-1-one-page" },
// ],
// },
// {
// imageSrc: "/assets/img/header/home-2.jpg",
// title: "Home 02",
// buttons: [
// { label: "Multi Page", href: "/home-2" },
// { label: "One Page", href: "/home-2-one-page" },
// ],
// },
// ],
// },
// ],
},
{
label: "About Us",
href: "/about",
},
{
label: "Pages",
href: "#",
iconClass: "fa-regular fa-plus",
className: "has-dropdown",
submenu: [
{ label: "Corporate Profile", href: "/corporate-profile" },
],
},
// {
// label: "Pages",
// href: "#",
// iconClass: "fa-regular fa-plus",
// className: "has-dropdown",
// submenu: [
// {
// label: "Our Team",
// href: "#",
// iconClass: "fas fa-angle-down",
// submenu: [
// { label: "Our Team", href: "/team" },
// { label: "Team Details", href: "/team-details/1" },
// ],
// },
// { label: "Pricing", href: "/pricing" },
// { label: "Faq's", href: "/faq" },
// { label: "404 Page", href: "/404" },
// ],
// },
// {
// label: "Services",
// href: "#",
// iconClass: "fa-regular fa-plus",
// submenu: [
// { label: "Services", href: "/service" },
// { label: "Service Details", href: "/service-details/1" },
// ],
// },
{
label: "Products",
href: "/product",
},
{
label: "Our Team",
href: "#",
iconClass: "fas fa-angle-down",
submenu: [
{ label: "Our Team", href: "/team" },
{ label: "Team Details", href: "/team-details/1" },
],
},
{ label: "Pricing", href: "/pricing" },
{ label: "Faq's", href: "/faq" },
{ label: "404 Page", href: "/404" },
],
},
{
label: "Services",
href: "#",
iconClass: "fa-regular fa-plus",
submenu: [
{ label: "Services", href: "/service" },
{ label: "Service Details", href: "/service-details/1" },
],
label: "Turnkey Solutions",
href: "/turnkey-solutions",
},
{
label: "Projects",

View File

@ -46,109 +46,346 @@ export const projectItems = [
export const projects = [
{
id: 7,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "General Construction",
description:
"There are many variations of a passages of Lorem Ipsum available.",
images: ["/assets/img/home/who-we-are/who-we-are-1.webp", "/assets/img/home/who-we-are/who-we-are-1.webp"],
title: "Mission",
delay: ".2s",
},
{
id: 8,
images: ["/assets/img/home/who-we-are/who-we-are-2.webp", "/assets/img/home/who-we-are/who-we-are-2.webp"],
title: "Vission",
delay: ".4s",
},
{
id: 9,
images: ["/assets/img/home/who-we-are/who-we-are-3.webp", "/assets/img/home/who-we-are/who-we-are-3.webp"],
title: "Core Values",
delay: ".6s",
},
]
export const projects2 = [
{
id: 7,
images: ["/assets/img/project/09.jpg"],
title: "Mission",
delay: ".2s",
},
{
id: 8,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Architecture & Building",
description:
"There are many variations of a passages of Lorem Ipsum available.",
title: "Vission",
delay: ".4s",
},
{
id: 9,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Interior Design",
description:
"There are many variations of a passages of Lorem Ipsum available.",
delay: ".6s",
},
{
id: 10,
images: ["/assets/img/project/12.jpg", "/assets/img/project/12.jpg"],
title: "Combine Electricity",
description:
"There are many variations of a passages of Lorem Ipsum available.",
delay: ".2s",
},
{
id: 11,
images: ["/assets/img/project/13.jpg", "/assets/img/project/13.jpg"],
title: "Bridge Trangle Core",
description:
"There are many variations of a passages of Lorem Ipsum available.",
delay: ".4s",
},
{
id: 12,
images: ["/assets/img/project/14.jpg", "/assets/img/project/14.jpg"],
title: "General Construction",
description:
"There are many variations of a passages of Lorem Ipsum available.",
delay: ".6s",
},
{
id: 13,
images: ["/assets/img/project/15.jpg", "/assets/img/project/15.jpg"],
title: "Contemporary Villa",
description:
"There are many variations of a passages of Lorem Ipsum available.",
delay: ".2s",
},
{
id: 14,
images: ["/assets/img/project/16.jpg", "/assets/img/project/16.jpg"],
title: "Rubix Carabil Tower",
description:
"There are many variations of a passages of Lorem Ipsum available.",
delay: ".4s",
},
{
id: 15,
images: ["/assets/img/project/17.jpg", "/assets/img/project/17.jpg"],
title: "Combine Electricity",
description:
"There are many variations of a passages of Lorem Ipsum available.",
title: "Core Values",
delay: ".6s",
},
// {
// id: 10,
// images: ["/assets/img/project/12.jpg", "/assets/img/project/12.jpg"],
// title: "Combine Electricity",
// description:
// "There are many variations of a passages of Lorem Ipsum available.",
// delay: ".2s",
// },
// {
// id: 11,
// images: ["/assets/img/project/13.jpg", "/assets/img/project/13.jpg"],
// title: "Bridge Trangle Core",
// description:
// "There are many variations of a passages of Lorem Ipsum available.",
// delay: ".4s",
// },
// {
// id: 12,
// images: ["/assets/img/project/14.jpg", "/assets/img/project/14.jpg"],
// title: "General Construction",
// description:
// "There are many variations of a passages of Lorem Ipsum available.",
// delay: ".6s",
// },
// {
// id: 13,
// images: ["/assets/img/project/15.jpg", "/assets/img/project/15.jpg"],
// title: "Contemporary Villa",
// description:
// "There are many variations of a passages of Lorem Ipsum available.",
// delay: ".2s",
// },
// {
// id: 14,
// images: ["/assets/img/project/16.jpg", "/assets/img/project/16.jpg"],
// title: "Rubix Carabil Tower",
// description:
// "There are many variations of a passages of Lorem Ipsum available.",
// delay: ".4s",
// },
// {
// id: 15,
// images: ["/assets/img/project/17.jpg", "/assets/img/project/17.jpg"],
// title: "Combine Electricity",
// description:
// "There are many variations of a passages of Lorem Ipsum available.",
// delay: ".6s",
// },
];
export const projects2 = [
export const projects3 = [
{
id: 16,
title: "Building Renovation",
bgClass: "",
delay: "",
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Mission",
delay: ".2s",
},
{
id: 17,
title: "Building Renovation",
bgClass: "bg-1",
delay: ".2s",
},
{
id: 18,
title: "Building Renovation",
bgClass: "bg-2 active",
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Vission",
delay: ".4s",
},
{
id: 19,
title: "Building Renovation",
bgClass: "bg-3",
id: 18,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Core Values",
delay: ".6s",
},
{
id: 19,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Mission",
delay: ".2s",
},
{
id: 20,
title: "Building Renovation",
bgClass: "bg-4",
delay: ".8s",
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Vission",
delay: ".4s",
},
{
id: 21,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Core Values",
delay: ".6s",
},
{
id: 22,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Mission",
delay: ".2s",
},
{
id: 23,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Vission",
delay: ".4s",
},
{
id: 24,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Core Values",
delay: ".6s",
},
];
export const allProjects = [...projectItems, ...projects, projects2];
export const projectsData = [
// Tab 1 - Desiccated Coconut
{
id: 1,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Project 1",
delay: ".2s",
category: "Desiccated Coconut",
},
{
id: 2,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Project 2",
delay: ".4s",
category: "Desiccated Coconut",
},
{
id: 3,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Project 3",
delay: ".6s",
category: "Desiccated Coconut",
},
{
id: 4,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Project 4",
delay: ".2s",
category: "Desiccated Coconut",
},
{
id: 5,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Project 5",
delay: ".4s",
category: "Desiccated Coconut",
},
{
id: 6,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Project 6",
delay: ".6s",
category: "Desiccated Coconut",
},
{
id: 7,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Project 7",
delay: ".2s",
category: "Desiccated Coconut",
},
{
id: 8,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Project 8",
delay: ".4s",
category: "Desiccated Coconut",
},
{
id: 9,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Project 9",
delay: ".6s",
category: "Desiccated Coconut",
},
// Tab 2 - Virgin Coconut Oil
{
id: 10,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Project 10",
delay: ".2s",
category: "Virgin Coconut Oil",
},
{
id: 11,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Project 11",
delay: ".4s",
category: "Virgin Coconut Oil",
},
{
id: 12,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Project 12",
delay: ".6s",
category: "Virgin Coconut Oil",
},
{
id: 13,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Project 13",
delay: ".2s",
category: "Virgin Coconut Oil",
},
{
id: 14,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Project 14",
delay: ".4s",
category: "Virgin Coconut Oil",
},
{
id: 15,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Project 15",
delay: ".6s",
category: "Virgin Coconut Oil",
},
{
id: 16,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Project 16",
delay: ".2s",
category: "Virgin Coconut Oil",
},
{
id: 17,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Project 17",
delay: ".4s",
category: "Virgin Coconut Oil",
},
{
id: 18,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Project 18",
delay: ".6s",
category: "Virgin Coconut Oil",
},
// Tab 3 - Pare Water Processing
{
id: 19,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Project 19",
delay: ".2s",
category: "Pare Water Processing",
},
{
id: 20,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Project 20",
delay: ".4s",
category: "Pare Water Processing",
},
{
id: 21,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Project 21",
delay: ".6s",
category: "Pare Water Processing",
},
{
id: 22,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Project 22",
delay: ".2s",
category: "Pare Water Processing",
},
{
id: 23,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Project 23",
delay: ".4s",
category: "Pare Water Processing",
},
{
id: 24,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Project 24",
delay: ".6s",
category: "Pare Water Processing",
},
{
id: 25,
images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
title: "Project 25",
delay: ".2s",
category: "Pare Water Processing",
},
{
id: 26,
images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
title: "Project 26",
delay: ".4s",
category: "Pare Water Processing",
},
{
id: 27,
images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
title: "Project 27",
delay: ".6s",
category: "Pare Water Processing",
},
];
export const allProjects = [...projectItems, ...projects, projects2, projects3];

View File

@ -1,67 +1,67 @@
export const serviceItems = [
{
id: 1,
imgSrc: "/assets/img/service/01.jpg",
iconSrc: "/assets/img/icon/01.svg",
imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
iconSrc: "/assets/img/home/explore/icon-1.webp",
number: "01",
title: "Building Construction",
description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
title: "Coconut Shell Removal System",
description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
},
{
id: 2,
imgSrc: "/assets/img/service/02.jpg",
iconSrc: "/assets/img/icon/02.svg",
imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
iconSrc: "/assets/img/home/explore/icon-2.webp",
number: "02",
title: "Architecture Design",
description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
title: "Energy-Efficient Coconut Dryer",
description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
},
{
id: 3,
imgSrc: "/assets/img/service/03.jpg",
iconSrc: "/assets/img/icon/03.svg",
imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
iconSrc: "/assets/img/home/explore/icon-3.webp",
number: "03",
title: "Building Renovation",
description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
title: "Coconut Processing Machinery",
description: "Custom-engineered coconut processing machinery tailored to your production line.",
},
{
id: 4,
imgSrc: "/assets/img/service/04.jpg",
iconSrc: "/assets/img/icon/04.svg",
imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
iconSrc: "/assets/img/home/explore/icon-4.webp",
number: "04",
title: "Quality Materials",
description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
title: "Coconut Processing Equipment",
description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",
},
{
id: 5,
imgSrc: "/assets/img/service/01.jpg",
iconSrc: "/assets/img/icon/01.svg",
imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
iconSrc: "/assets/img/home/explore/icon-1.webp",
number: "01",
title: "Building Construction",
description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
title: "Coconut Shell Removal System",
description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
},
{
id: 6,
imgSrc: "/assets/img/service/02.jpg",
iconSrc: "/assets/img/icon/02.svg",
imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
iconSrc: "/assets/img/home/explore/icon-2.webp",
number: "02",
title: "Architecture Design",
description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
title: "Energy-Efficient Coconut Dryer",
description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
},
{
id: 7,
imgSrc: "/assets/img/service/03.jpg",
iconSrc: "/assets/img/icon/03.svg",
imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
iconSrc: "/assets/img/home/explore/icon-3.webp",
number: "03",
title: "Building Renovation",
description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
title: "Coconut Processing Machinery",
description: "Custom-engineered coconut processing machinery tailored to your production line.",
},
{
id: 8,
imgSrc: "/assets/img/service/04.jpg",
iconSrc: "/assets/img/icon/04.svg",
imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
iconSrc: "/assets/img/home/explore/icon-4.webp",
number: "04",
title: "Quality Materials",
description: "Consectetur Phasellus a odio vel sapien pharetra placerat.",
title: "Coconut Processing Equipment",
description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",
},
];
@ -228,9 +228,129 @@ export const services2 = [
},
];
export const products = [
{
id: 28,
image: "/assets/img/products/coconut-deshelling.webp",
icon: "/assets/img/products/icon-1.webp",
number: "01",
title: "Coconut Deshelling Machine",
description: "Effortlessly remove coconut shells with high-speed, durable, low-maintenance, energy-efficient, precision-engineered deshellers built for continuous production lines.",
delay: ".2s",
},
{
id: 29,
image: "/assets/img/products/coconut-dryer.webp",
icon: "/assets/img/products/icon-2.webp",
number: "02",
title: "Coconut Dryer (Hot Air / Tray Type)",
description: "Achieve uniform drying with our energy-efficient, high-capacity dryers designed to preserve quality and extend shelf life.",
delay: ".4s",
},
{
id: 30,
image: "/assets/img/products/coconut-grinder.webp",
icon: "/assets/img/products/icon-3.webp",
number: "03",
title: "Coconut Pulverizer & Grinder",
description: "Grind dried coconut into fine powder with consistent output, low power consumption, minimal maintenance, high efficiency, and smooth operation.",
delay: ".6s",
},
{
id: 31,
image: "/assets/img/products/coconut-milk-extractor.webp",
icon: "/assets/img/products/icon-4.webp",
number: "04",
title: "Coconut Milk Extractor",
description: "Extract rich, pure coconut milk with hygienic, food-grade, corrosion-resistant, easy-to-clean machinery suitable for both small and industrial-scale operations.",
delay: ".2s",
},
{
id: 32,
image: "/assets/img/products/coconut-oil.webp",
icon: "/assets/img/products/icon-5.webp",
number: "05",
title: "Virgin Coconut Oil (VCO) Processing Equipment",
description: "From cold press systems to filtration and bottling, complete VCO machinery for value-added production.",
delay: ".4s",
},
{
id: 33,
image: "/assets/img/products/coconut-water.webp",
icon: "/assets/img/products/icon-6.webp",
number: "06",
title: "Coconut Water Processing Unit",
description: "Sterilize, filter, and bottle coconut water with our modular, easy-to-maintain setups. Designed for scalability, these systems ensure purity and extended shelf stability.",
delay: ".6s",
},
];
export const products2 = [
{
id: 34,
image: "/assets/img/service/01.jpg",
icon: "/assets/img/icon/01.svg",
number: "01",
title: "Coconut Deshelling Machine",
description: "Effortlessly remove coconut shells with high-speed, durable, low-maintenance, energy-efficient, precision-engineered deshellers built for continuous production lines.",
delay: ".2s",
},
{
id: 35,
image: "/assets/img/service/02.jpg",
icon: "/assets/img/icon/02.svg",
number: "02",
title: "Coconut Dryer (Hot Air / Tray Type)",
description: "Achieve uniform drying with our energy-efficient, high-capacity dryers designed to preserve quality and extend shelf life.",
delay: ".4s",
},
{
id: 36,
image: "/assets/img/service/03.jpg",
icon: "/assets/img/icon/03.svg",
number: "03",
title: "Coconut Pulverizer & Grinder",
description: "Grind dried coconut into fine powder with consistent output, low power consumption, minimal maintenance, high efficiency, and smooth operation.",
delay: ".6s",
},
{
id: 37,
image: "/assets/img/service/06.jpg",
icon: "/assets/img/icon/07.svg",
number: "04",
title: "Coconut Milk Extractor",
description: "Extract rich, pure coconut milk with hygienic, food-grade, corrosion-resistant, easy-to-clean machinery suitable for both small and industrial-scale operations.",
delay: ".2s",
},
{
id: 38,
image: "/assets/img/service/07.jpg",
icon: "/assets/img/icon/08.svg",
number: "05",
title: "Virgin Coconut Oil (VCO) Processing Equipment",
description: "From cold press systems to filtration and bottling, complete VCO machinery for value-added production.",
delay: ".4s",
},
{
id: 39,
image: "/assets/img/service/08.jpg",
icon: "/assets/img/icon/09.svg",
number: "06",
title: "Coconut Water Processing Unit",
description: "Sterilize, filter, and bottle coconut water with our modular, easy-to-maintain setups. Designed for scalability, these systems ensure purity and extended shelf stability.",
delay: ".6s",
},
];
export const allServices = [
...serviceItems,
...serviceItems2,
...services,
...services2,
...products,
...products2,
];

View File

@ -1,16 +1,16 @@
export const skills = [
{
title: "General Consulting",
title: "German-Grade Engineering Precision",
percentage: 85,
delay: ".2s",
},
{
title: "Design & Build",
title: "Scalable Designs to Fit All Budgets",
percentage: 90,
delay: ".4s",
},
{
title: "Construction Management",
title: "Minimal Maintenance with Maximum Uptime",
percentage: 75,
delay: ".2s",
},

View File

@ -105,7 +105,7 @@ export const teamMembers2 = [
{
id: 5,
image: "/assets/img/team/05.jpg",
name: "Shikhon Islam",
name: " At a Glance",
role: "Sr. engineer",
socials: [
{
@ -130,7 +130,7 @@ export const teamMembers2 = [
{
id: 6,
image: "/assets/img/team/06.jpg",
name: "Jenny Wilson",
name: "Factory & Workflows",
role: "Sr. engineer",
socials: [
{
@ -156,7 +156,7 @@ export const teamMembers2 = [
{
id: 7,
image: "/assets/img/team/07.jpg",
name: "Kawser Ahmed",
name: "Engineering & Innovation",
role: "Sr. engineer",
socials: [
{
@ -181,7 +181,7 @@ export const teamMembers2 = [
{
id: 8,
image: "/assets/img/team/08.jpg",
name: "Ronald Richards",
name: "Sustainability Impact",
role: "Sr. engineer",
socials: [
{

View File

@ -1,7 +1,7 @@
export const testimonials = [
"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock !",
"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock !",
"Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock !",
"Cibus Industry brought our processing operations to a whole new level. Their turnkey solutions were delivered on time and exceeded all performance expectations. !",
"The quality of engineering and attention to detail from the Cibus team is unmatched. Their machinery runs seamlessly and has significantly reduced our maintenance needs. !",
"Choosing Cibus was the best decision we made for scaling up our coconut processing line. Their after-sales support and training made the transition effortless. !",
];
export const testimonials2 = [

View File

@ -11,7 +11,8 @@ Version: 1.0.0
--body: #fff;
--black: #000;
--white: #fff;
--theme: #f55b1f;
/* --theme: #f55b1f; */
--theme: #F26522;
--theme2: #f55b1f;
--header: #121315;
--text: #666666;
@ -20,96 +21,68 @@ Version: 1.0.0
--bg: #1e2023;
--box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13);
}
.theme-btn {
background-color: var(--theme);
color: var(--white);
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
padding: 24px 50px;
padding: 16px 36px;
border-radius: 0;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: relative;
z-index: 1;
white-space: nowrap;
gap: 10px; /* Spacing between text and icon */
line-height: 1;
}
.theme-btn::before {
content: "";
background-color: var(--header);
width: 0;
height: 50%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
z-index: -1;
.theme-btn i {
font-size: 16px;
line-height: 1;
display: inline-block;
}
.theme-btn:hover {
color: var(--white);
}
.theme-btn::before,
.theme-btn::after {
content: "";
background-color: var(--header);
width: 0;
height: 50%;
position: absolute;
z-index: -1;
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.theme-btn::before {
top: 0;
left: 0;
}
.theme-btn::after {
bottom: 0;
right: 0;
-webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
z-index: -1;
}
.theme-btn i {
margin-left: 10px;
}
.theme-btn:hover {
color: var(--white);
}
.theme-btn:hover::before,
.theme-btn:hover::after {
width: 100%;
}
.theme-btn.bg-white {
background-color: var(--white);
color: var(--header);
}
.theme-btn.bg-white:hover {
color: var(--white);
}
@media (max-width: 767px) {
.theme-btn {
padding: 20px 32px;
}
}
@media (max-width: 575px) {
.theme-btn {
padding: 18px 30px;
padding: 14px 28px;
font-size: 14px;
}
}
.link-btn {
display: inline-block;
color: var(--text);
text-align: center;
font-family: "DM Sans";
font-size: 16px;
font-weight: 600;
text-transform: capitalize;
}
.link-btn i {
margin-left: 10px;
transform: rotate(-40deg);
transition: all 0.4s ease-in-out;
}
.link-btn:hover {
color: var(--theme);
}
.link-btn:hover i {
margin-left: 10px;
transform: rotate(0);
}
/* --------------------------------------------
Template Default Fonts & Fonts Styles
@ -5844,7 +5817,8 @@ input.main-search-input::placeholder {
}
.section-bg {
background-color: var(--bg);
/* background-color: var(--bg); */
background-color: #0b2273;
}
.section-bg-2 {

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Some files were not shown because too many files have changed in this diff Show More