about page structure updated
This commit is contained in:
parent
af218ed688
commit
6c6772b17d
@ -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 />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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
|
||||
|
||||
78
components/about/Team2.jsx
Normal file
78
components/about/Team2.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -28,10 +28,10 @@ export default function Header1() {
|
||||
<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>
|
||||
|
||||
138
components/homes/home-1/AboutPage.jsx
Normal file
138
components/homes/home-1/AboutPage.jsx
Normal 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>About Us
|
||||
<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)}
|
||||
/>{" "}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -957,7 +957,7 @@
|
||||
@include before;
|
||||
z-index: -1;
|
||||
opacity: 0.85;
|
||||
background: $header-color;
|
||||
// background: $header-color;
|
||||
}
|
||||
|
||||
.shape-image {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user