responsive checked
This commit is contained in:
parent
3ac13f9ce2
commit
46f8463ffa
@ -5,7 +5,7 @@ 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() {
|
||||
export default function Products() {
|
||||
return (
|
||||
<section className="service-section fix section-padding">
|
||||
<div className="container">
|
||||
@ -23,7 +23,7 @@ export default function Products() {
|
||||
{products.map((product) => (
|
||||
<div
|
||||
key={product.id}
|
||||
className="col-xl-4 col-lg-6 col-md-6 wow fadeInUp"
|
||||
className={`col-xl-4 col-lg-6 col-md-6 wow fadeInUp ${product.id === 33 ? "highlight-product" : ""}`}
|
||||
data-wow-delay={product.delay}
|
||||
>
|
||||
<div className="service-box-items items-bg">
|
||||
|
||||
@ -41,19 +41,6 @@ export default function Sustainability() {
|
||||
<p className="mt-3">
|
||||
At Cibus Industries, our impact extends beyond our machines - it reaches the environment and the communities we serve. Every piece of equipment is designed with lifecycle efficiency in mind, reducing energy demands, water usage, and material waste without compromising performance. We actively prioritize sustainable sourcing, eco-friendly materials, and technologies that help our clients achieve their own green goals. Our factory initiatives include rainwater harvesting, waste heat recovery, and solar power integration to cut down on emissions and utility consumption. We also engage in rural development programs - like converting coconut shells into fuel briquettes, supporting local farmers, and offering skill-based training for sustainable livelihoods. We believe engineering excellence should go hand in hand with environmental responsibility. By embedding sustainability into our products and processes, we help create value not only for today’s operations but for tomorrow’s ecosystems. With every machine we deliver, we aim to leave behind a cleaner, smarter, and more sustainable coconut processing industry.
|
||||
</p>
|
||||
|
||||
<div className="row mt-5 mb-5">
|
||||
<div className="col-12 d-flex justify-content-center mt-2">
|
||||
<div className="details-image">
|
||||
<Image
|
||||
src="/assets/img/about-page/about/sustainability.jpg"
|
||||
width={375}
|
||||
height={800}
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -236,7 +236,7 @@ export const products = [
|
||||
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.",
|
||||
description: "Effortlessly remove coconut shells with high-speed, durable, low-maintenance, energy-efficient deshellers built for continuous production.",
|
||||
delay: ".2s",
|
||||
},
|
||||
{
|
||||
@ -263,7 +263,7 @@ export const products = [
|
||||
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.",
|
||||
description: "Extract rich, pure coconut milk with hygienic, food-grade, corrosion-resistant machinery suitable for small and industrial-scale operations.",
|
||||
delay: ".2s",
|
||||
},
|
||||
{
|
||||
@ -281,7 +281,7 @@ export const products = [
|
||||
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.",
|
||||
description: "Sterilize, filter, and bottle coconut water with our modular, maintainable setups. Designed for scalability, these systems ensure purity and shelf stability.",
|
||||
delay: ".6s",
|
||||
},
|
||||
];
|
||||
|
||||
@ -5,20 +5,20 @@
|
||||
.container-fluid {
|
||||
padding: 0 175px;
|
||||
|
||||
@include breakpoint (max-xxxl){
|
||||
padding: 0 30px;
|
||||
@include breakpoint (max-xxxl) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
@include breakpoint (max-xl){
|
||||
@include breakpoint (max-xl) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.array-button {
|
||||
@include breakpoint (max-xl){
|
||||
@include breakpoint (max-xl) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.array-prev {
|
||||
|
||||
background-color: $white;
|
||||
@ -55,13 +55,13 @@
|
||||
background-color: $white;
|
||||
color: $header-color;
|
||||
border: none;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: $theme-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.array-next {
|
||||
background-color: $theme-color;
|
||||
color: $white;
|
||||
@ -89,7 +89,7 @@
|
||||
justify-content: space-between;
|
||||
margin-top: 40px;
|
||||
|
||||
@include breakpoint (max-md){
|
||||
@include breakpoint (max-md) {
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@ -104,25 +104,25 @@
|
||||
transition: 0.6s;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
opacity: 1;
|
||||
background: $theme-color;
|
||||
}
|
||||
|
||||
@include breakpoint (max-md){
|
||||
|
||||
@include breakpoint (max-md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.array-buttons {
|
||||
@include flex;
|
||||
gap: 10px;
|
||||
|
||||
|
||||
.array-prev {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
.array-next {
|
||||
color: $theme-color;
|
||||
}
|
||||
@ -156,10 +156,14 @@
|
||||
}
|
||||
|
||||
.service-content {
|
||||
padding: 0 30px 30px 30px;
|
||||
position: relative;
|
||||
padding: 0 30px 30px 30px;
|
||||
position: relative;
|
||||
|
||||
.number {
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 10px 30px 10px;
|
||||
}
|
||||
|
||||
.number {
|
||||
text-align: right;
|
||||
-webkit-text-stroke: 1px rgba(102, 102, 102, 0.5);
|
||||
-webkit-text-fill-color: transparent;
|
||||
@ -173,9 +177,9 @@
|
||||
&:hover {
|
||||
-webkit-text-stroke: 1px rgba(245, 91, 31, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
h3 {
|
||||
margin-bottom: 15px;
|
||||
|
||||
a {
|
||||
@ -183,20 +187,20 @@
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
p {
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.service-content {
|
||||
.number {
|
||||
-webkit-text-stroke: 1px rgba(245, 91, 31, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -284,23 +288,23 @@
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
background-color: $white;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
h3 {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .35);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
.link-btn {
|
||||
color: $white;
|
||||
}
|
||||
@ -315,7 +319,7 @@
|
||||
|
||||
.service-details-wrapper {
|
||||
margin-bottom: -5px;
|
||||
|
||||
|
||||
.service-details-image {
|
||||
|
||||
img {
|
||||
@ -342,7 +346,7 @@
|
||||
font-size: 16px;
|
||||
color: $header-color;
|
||||
|
||||
&:not(:last-child){
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@ -357,7 +361,7 @@
|
||||
font-size: 38px;
|
||||
margin-top: 30px;
|
||||
|
||||
@include breakpoint (max-sm){
|
||||
@include breakpoint (max-sm) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
@ -387,4 +391,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.highlight-product .service-content {
|
||||
padding: 0 10px 4px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user