Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 340c03f7 by Ravindra Kanojiya
Options

updated collection view more button

1 parent d99fc971
Inline Side-by-side
Showing 44 changed files with 889 additions and 33 deletions
components/Collection/AboutInfo.js
import React from 'react' import React, { useState } from "react";
import { Col, Row } from 'react-bootstrap' import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
const AboutInfo = ({productData}) => { import Link from "next/link";
/**
* Splits an HTML string into:
* - the first `count` <p>…</p> blocks
* - everything that comes after them
*/
function splitAfterParagraphs(html = "", count = 2) {
if (!html) return { preview: "", rest: "" };
// Match each <p …>…</p> block (handles multiline content)
const regex = /<p[\s\S]*?<\/p>/gi;
const matches = [];
let match;
while ((match = regex.exec(html)) !== null) {
matches.push({ start: match.index, end: match.index + match[0].length });
}
if (matches.length <= count) {
// Not enough paragraphs to hide anything
return { preview: html, rest: "" };
}
const splitIndex = matches[count - 1].end;
return {
preview: html.slice(0, splitIndex),
rest: html.slice(splitIndex),
};
}
const AboutInfo = ({ productData }) => {
const [expanded, setExpanded] = useState(false);
const { preview, rest } = splitAfterParagraphs(productData?.description, 2);
const hasMore = rest.trim().length > 0;
return ( return (
<> <>
<section className='about-section about-info-section pb-0'> <section className="about-section about-info-section pb-0">
<div className='custom_container container'> <div className="custom_container container">
<Row className='text-center justify-content-center'> <Row className="text-center justify-content-center">
<Col md={8}> <Col md={8}>
{/* <Heading el="h2" heading="Every person is unique," /> <Heading el="h2" heading={productData?.title || ""} isHtml />
<Heading el="h2" heading="Every kitchen too." /> */}
<Heading {/* Always-visible first 2 paragraphs */}
el="h2" <div
heading={productData?.title || ""} className="mb-0 gray-text"
isHtml dangerouslySetInnerHTML={{ __html: preview }}
/> />
<div className='mb-0 gray-text' dangerouslySetInnerHTML={{__html:productData?.description}}></div> {/* Hidden/shown extra content */}
</Col> {hasMore && (
</Row> <>
</div> <div className={`expandable-content ${expanded ? "expanded" : ""}`}>
</section> <div className="inner-content">
<div
className="mb-0 gray-text"
dangerouslySetInnerHTML={{ __html: rest }}
/>
</div>
</div>
<Link
href="#!"
onClick={(e) => {
e.preventDefault();
setExpanded((prev) => !prev);
}}
className="btn4 mt-3"
>
{expanded ? "Read Less" : "Read More"} <i className="fa-solid fa-arrow-right"></i>
</Link>
</>
)}
</Col>
</Row>
</div>
</section>
<style jsx>{`
.expandable-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s ease-in-out;
}
.expandable-content .inner-content {
overflow: hidden;
}
.expandable-content.expanded {
grid-template-rows: 1fr;
}
`}</style>
</> </>
) );
} };
export default AboutInfo;
export default AboutInfo
components/Inalco/AboutInfoBrands.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
import Image from 'next/image';
import Link from 'next/link';
const AboutInfoBrands = () => {
return (
<>
<section className='about-section about-info-section'>
<div className='container'>
<Row className='text-center justify-content-center'>
<Col md={10}>
<Heading el="h2" heading="THE STYLE-IN CONCEPT DEFINES OUR IDENTITY" />
<p className=''>INALCO'S OWN STYLE BASED ON THE CONCEPT OF EXCELLENCE</p>
<p className=''>Our mission is to provoke change through global leadership in innovation, creating new solutions and technological and fashion trends to conquer the future, generating the greatest differentiation and maximum added value for our partners.</p>
<p className=''> Through sustainable innovation, we strive for excellence every day.</p>
</Col>
</Row>
</div>
</section>
</>
)
}
export default AboutInfoBrands
components/Inalco/CompanyOverview.js 0 → 100644
import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const overviewData =[
{
title:"ETHICS",
image:"/image/brands/inalco/our-principles/01.png"
},
{
title:`SUSTAINABLE INNOVATION & </br> CREATIVITY`,
image:"/image/brands/inalco/our-principles/02.png"
},
{
title:`EXCELLENCE & MAXIMUM </br> QUALITY`,
image:"/image/brands/inalco/our-principles/03.png"
},
{
title:"SERVICE-MARKETING",
image:"/image/brands/inalco/our-principles/04.png"
},
{
title:"TAKE CARE OF STAKEHOLDERS",
image:"/image/brands/inalco/our-principles/05.png"
},
]
const CompanyOverview = () => {
return (
<section className=" our-principle-section catalogues-sec sec_padd">
<div className="custom_containers container">
{overviewData.map((item, index) => {
return (
<Row className="mb-5" key={index}>
<Col xs={12} className="mb-4">
<div className={`banner-item`}>
<Image
width={1510}
height={352}
src={item?.image}
alt={item?.title}
className="img-fluid w-100"
/>
<div className="title" dangerouslySetInnerHTML={{__html: item?.title}}></div>
</div>
</Col>
</Row>
);
})}
</div>
</section>
);
};
export default CompanyOverview;
components/Inalco/InnerBannerBrands.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../services/imageHandling'
import Heading from "@/components/Heading";
import Image from 'next/image';
const InnerBannerBrands = ({data}) => {
return (
<>
<section className='innerbanner-section'>
<div className='innerbanner product-details'>
<Row>
<Col>
<div className='product-banner'>
<Image width={1920} height={948} src={data?.image?.url} alt="" />
<div className='info'>
<Heading el="h2" heading={data?.title} />
<div dangerouslySetInnerHTML={{__html: data?.description}}></div>
</div>
</div>
</Col>
</Row>
</div>
</section>
</>
)
}
export default InnerBannerBrands
components/Inalco/WeCare.js 0 → 100644
import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const overviewData = [
{
title: `We Care About</br> The Future`,
description:
"We have a public commitment to the environment and society. That's why we dedicate tireless resources to prevent the impact of our activity.",
image: "/image/brands/inalco/we-care/01.png",
},
{
title: `SUSTAINABLE </br> INNOVATION`,
description:
"Innovation is part of our DNA. Therefore, we continue to develop technologies and products that are game-changers, paving the way to the future for our partners.",
image: "/image/brands/inalco/we-care/02.png",
},
{
title: `DISCOVER </br> BEYOND NATURE`,
description:
"A concept that encapsulates our purest essence. We draw inspiration from nature and, through our innovative production process and the purest minerals, we create sustainable surfaces without overexploiting the environment.",
image: "/image/brands/inalco/we-care/03.png",
},
];
const WeCare = () => {
return (
<section className=" we-care-section sec_padd">
<div className="custom_containers container">
{overviewData?.map((item, index) => {
const isEven = index % 2 === 0;
return (
<Row
className="mb-5 align-items-center justify-content-center"
key={index}
>
<Col
md={7}
className={`mb-4 ${isEven ? "order-md-1" : "order-md-2"}`}
>
<div className="img-banner">
<Image
width={868}
height={629}
src={item?.image}
alt={item?.title}
className="img-fluid"
/>
</div>
</Col>
<Col md={5} className={`${isEven ? "order-md-2" : "order-md-1"}`}>
<div
className="title"
dangerouslySetInnerHTML={{ __html: item?.title }}
></div>
<div
className="info"
dangerouslySetInnerHTML={{
__html: item?.description || "",
}}
/>
</Col>
</Row>
);
})}
</div>
</section>
);
};
export default WeCare;
components/Rimadesios/AboutInfoBrands.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
import Image from 'next/image';
import Link from 'next/link';
const AboutInfoBrands = () => {
return (
<>
<section className='about-section about-info-section'>
<div className='container'>
<Row className='text-center justify-content-center'>
<Col md={10}>
<Heading el="h2" heading="Company" />
<p className='mb-3 gray-text'>Rimadesio produces systems for sub-dividing environments and for the architectural definition of interiors. Doors, sliding panels, shelving units, walk-in wardrobes and a collection of complementary furniture: an offer which is continuously increasing in size and which is constantly developing in its style. Linear and functional designs where the simplicity of a concept is elaborated through an exceptional level of technical competence. Rimadesio’s aim is to continue to develop its own design culture and productive technology in order to be able to offer functionally innovative ideas which are exclusive from an aesthetic point of view and can ensure maximum reliability over time.</p>
</Col>
</Row>
</div>
</section>
</>
)
}
export default AboutInfoBrands
components/Rimadesios/CompanyOverview.js 0 → 100644
import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const overviewData =[
{
title:"Headquarters",
subTitle:"",
description:"The company’s headquarters are organized over a 30,000 square meter area and is the core location of the strategic activities of the brand: from production to logistic and commercial management through to the diverse marketing and communication activities. Our headquarters, just as every other dimension in our organization, reflect a clear and precise vision. We are convinced that the quality of the work environment, the professionalism and team satisfaction are essential requirements for ensuring the quality of our products.",
image:"/image/brands/rimadesio/overview/01.png"
},
{
title:"R-Academy",
subTitle:"",
description: `Structured on different themes and levels of deepening, R-Academy represents a fundamental path to acquire the technical know-how made necessary by the high degree of company innovation and therefore to allow to grasp all the design potential of the collections. Located inside Giussano's showroom, the space dedicated to R-Academy is equipped with an integrated system, fundamental to express all the qualities of the proposal: from the different technical components to the exclusive mechanisms, from infographic panels to samples of the material collection in different ways and sizes.`,
image:"/image/brands/rimadesio/overview/02.png"
},
{
title:"Sustainability",
subTitle:"",
description:"Production of energy from renewable sources, circularity in the use of materials, containment of plastic and consumption in general, production efficiency, company welfare, support of the territory: these are the areas to which Rimadesio dedicates its daily commitment. A program of constant research and investment, an expression of a precise vision that considers quality to be a fundamental objective and a balance with the environment and people to be an essential condition.",
image:"/image/brands/rimadesio/overview/03.png"
},
{
title:"Ethical Code",
subTitle:"",
description:`<p>The Board of Directors of Rimadesio has approved the Governance and Control Manual that contains the Ethical Code of Conduct and the Organisational Rules applied inside the company.</p><p>Considering the new regulatory framework defined by Law Decree No. 231/2001, which defines the concept of Corporate Administrative Responsibility, the Board of Directors of Rimadesio has approved the Governance and Control Manual that contains the Ethical Code of Conduct and the Organisational Rules applied inside the company. By adopting the Code of Conduct, Rimadesio confirms that its guiding principle for all activities performed is compliance with the law and with all regulations, both Italian and foreign, in a framework of integrity and fairness. The Code defines ethical values that are common both to the company Rimadesio’s strategic decisions and to all its personnel in terms of individual responsibility.</p>`,
image:"/image/brands/rimadesio/overview/04.png"
},
{
title:"Health, Safety, Environment",
subTitle:"",
description:"Alongside its long-term focus on environmental issues, the company is dedicated to occupational health and safety. Rimadesio has always been committed to creating, maintaining and improving a healthy and safe work environment for its employees and any third parties involved.",
image:"/image/brands/rimadesio/overview/05.png"
},
{
title:"Data and Reports",
subTitle:"",
description:`
<p>Investments, workforce, distribution, turnover: every aspect of Rimadesio reality is represented through data and charts that allow to grasp in detail the constant and progressive evolution.</p>
<p><strong>Ebit -</strong> Earnings Before Interest and Taxes – is the result of the company’s operating performance from which the costs for depreciation and provisions are deducted. It indicates the income created by the company during its normal activity, also considering the impact of investments in capital goods or assets.</p>
<p><strong>Ebitda -</strong> Earnings Before Interest, Taxes, Depreciation and Amortization – is the metric used of the company’s operating performance and indicates, whether it is able to generate income in its normal activity, without considering investments and extraordinary, financial and tax.</p>
`,
image:"/image/brands/rimadesio/overview/06.png"
},
]
const CompanyOverview = () => {
return (
<section className=" brands-overview-section catalogues-sec sec_padd">
<div className="custom_container container">
{overviewData.map((item, index) => {
return (
<Row className="my-5" key={index}>
<Col md={6} className="mb-4">
<div className={``}>
<Image
width={868}
height={538}
src={item?.image}
alt={item?.title}
className="img-fluid"
/>
</div>
</Col>
{/* FIXED HERE */}
<Col md={6}>
<div className="title">{item?.title}</div>
<div className="sub-title">{item?.subTitle}</div>
<div
className="info"
dangerouslySetInnerHTML={{
__html: item?.description || "",
}}
/>
</Col>
</Row>
);
})}
</div>
</section>
);
};
export default CompanyOverview;
components/Rimadesios/InnerBannerBrands.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../services/imageHandling'
import Heading from "@/components/Heading";
import Image from 'next/image';
const InnerBannerBrands = ({data}) => {
return (
<>
<section className='innerbanner-section'>
<div className='innerbanner product-details'>
<Row>
<Col>
<div className='product-banner'>
<Image width={1920} height={948} src={data?.image?.url} alt="" />
<div className='info'>
<Heading el="h2" heading={data?.title} />
<div dangerouslySetInnerHTML={{__html: data?.description}}></div>
</div>
</div>
</Col>
</Row>
</div>
</section>
</>
)
}
export default InnerBannerBrands
components/valcucines/AboutInfoBrands.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import Heading from "@/components/Heading";
import Image from 'next/image';
import Link from 'next/link';
const AboutInfoBrands = () => {
return (
<>
<section className='about-section about-info-section'>
<div className='container'>
<Row className='text-center justify-content-center'>
<Col md={10}>
<Heading el="h2" heading="Company" />
<p className='mb-3 gray-text'>Valcucine has been standing out in the kitchen sector “Made in Italy” for over forty years, focusing on sustainability, wellbeing, innovation and timeless kitchens, that are made to last.</p>
<p className='mb-3 gray-text'>Each collection is designed with people in mind to create products that contribute to the wellness and needs of the user. The company has earned a reputation for its dedication to improving the ergonomics and the use of space. This has led to the Logica System, which was created in the 90s. The innovative and ergonomic system features an equipped back section, jumbo drawers and wall units with lift-up doors that makes it easier to work in the kitchen because everything is within hand’s reach. The special New Logica System and Air Logica System units were developed as an evolved version of the equipped back section and the wall units. These systems blend aesthetics with functionality and are able to contain and conceal, when necessary, all the equipment required in the kitchen. To further contribute to the daily comfort of consumers, Valcucine has also designed specific details such as the luminous panel; when fitted in special units, the panel contributes to giving the kitchen a more airy appeal.</p>
<p className='mb-3 gray-text'>Moreover, Valcucine constantly carries out performance tests on harmful volatile substances, artificial radioactivity, and adheres to the strictest regulations on formaldehyde emissions. Valcucine is synonymous with innovation. It has revolutionised the kitchen space with numerous ground-breaking solutions. Valcucine changed the whole concept of kitchen doors with Artematica, the first door in the world with an aluminium frame that is invisible from the outside, plus a 5mm thick, aesthetic, HPL panel. The glass version, presented in 2006 with Invitrum base units, was the first-ever 100% recyclable kitchen.</p>
{/* <div className="my-5"> <Link href="#" className="btn4">Read More</Link> </div> */}
</Col>
</Row>
</div>
</section>
</>
)
}
export default AboutInfoBrands
components/valcucines/Certifications.js 0 → 100644
import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
import Link from "next/link";
const CertificationsData = [
{
title: "LEED",
description:`<p>For over forty years, Valcucine has stood out for the design and production of high-end kitchens. Always committed to providing excellence in terms of sustainability, innovation, and craftsmanship, Valcucine once again raises the bar with the LEED v.4.1 mapping of kitchens.</p>
<p>LEED, Leadership in Energy and Environmental Design, is the most widely used third-party verification system for eco-friendly buildings. LEED provides a framework for healthy, efficient, low-carbon, and cost-effective green buildings.
The LEED v.4.1 certification is a globally recognized symbol of success and leadership in sustainability.</p>`,
download: "Download the LEED contribution matrix",
url: "#",
image: "/image/brands/certification/01.png",
},
{
title: "FSC",
description:`<p>As a testament to its environmental commitment, Valcucine has expanded its range of FSC® certified kitchen furniture, ensuring that the wood or its derivatives come from FSC® certified supplier chains.</p>
<p>FSC requires forest managers, whether on public or private lands, to involve members of local communities in decision-making processes and to protect the rights of indigenous populations, ensuring that their voices are an integral part of the certification process and that the impact of management operations is surpassed. FSC also mandates that the results of certification audits be made public, even in the case of private properties: this is a distinctive feature compared to other types of certification.</p>`,
download: "Download the FSC certification",
url: "#",
image: "/image/brands/certification/02.png",
},
{
title: "ISO 14001",
description:`<p>The ISO 14001 environmental certification ensures that the company complies with environmental laws regarding toxic emissions, noise, and water discharge. It requires the company to have a controlled and documented waste disposal system, commit to reducing energy consumption, and implement projects aimed at this purpose. The certification also mandates that the company participate in environmental projects.</p>`,
download: "Download the ISO 14001 certification",
url: "#",
image: "/image/brands/certification/03.png",
},
{
title: "ISO 45001",
description:`<p>In 2011, Valcucine obtained the OHSAS (Occupational Health and Safety Assessment Series) certification, identifying an international standard for a workers’ health and safety management system. Subsequently, it obtained, as a replacement, the new ISO 45001 certification.</p>`,
download: "Download the ISO 45001 certification",
url: "#",
image: "/image/brands/certification/04.png",
},
{
title: "F4 STARS",
description:`<p>The F4 STARS certification involves its own testing methods and sets a very restrictive limit of 0.04 ppm. By comparison, the limits are 0.09 ppm for the American CARB 2/TSCA Title VI, 0.1 ppm for the European E1, and the German UBA. This certification applies to both raw and coated wood-derived panels and attests to compliance with the requirements specified by Japan for formaldehyde emissions from products intended for construction and furniture.</p>`,
download: "Certification upon request.",
url: "#",
image: "/image/brands/certification/05.png",
},
];
const Certifications = () => {
return (
<section className=" certifications-section sec_padd">
<div className=" container">
<Row className="text-center justify-content-center">
<Col>
<Heading el="h2" heading="Certifications" />
</Col>
</Row>
{CertificationsData.map((item, index) => {
return (
<>
<Row className="my-5 certifications-item" key={index}>
<Col md={3} className="mb-4">
<Image
width={348}
height={304}
src={item?.image}
alt={item?.title}
className="img-fluid"
/>
</Col>
{/* FIXED HERE */}
<Col md={9}>
<div className="title">{item?.title}</div>
<div className="sub-title">{item?.subTitle}</div>
<div
className="info"
dangerouslySetInnerHTML={{
__html: item?.description || "",
}}
/>
<div className="download-content"><Link href={item?.url || "#"}>{item?.download} <i class="fa-solid fa-arrow-right ms-2"></i></Link></div>
</Col>
</Row>
</>
);
})}
</div>
</section>
);
};
export default Certifications;
components/valcucines/CompanyOverview.js 0 → 100644
import React from "react";
import { Col, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";
const overviewData =[
{
title:"Mission and values",
subTitle:"Well-being, innovation, sustainability, craftsmanship",
description:"We put people and their well-being at the centre of what we do, stimulating their senses to bring about joy in everyday activities. We design unique kitchens, made to last generations, impervious to trends, timeless: an expression of craftsmanship that is masterfully renewed in the present. We transform cooking into an extraordinary experience through the constant innovation of forms and materials. We use our planet’s resources in a responsible way, focusing on sustainability and respecting nature.",
image:"/image/brands/overview/01.png"
},
{
title:"Mission and values",
subTitle:"",
description: `<p>2025 Archello Product of the Year – Public vote – for New Logica</p>
<p>2025 Archiproducts Design Awards | Archigraphica + Vela Wall Unit</p>
<p>2025 iF Design Award | Architectural Scenarios</p>
<p>2025 iF Design Award GOLD | Artematica + New Logica </p>`,
image:"/image/brands/overview/02.png"
},
{
title:"Symbol and Philosophy",
subTitle:"",
description:"True well-being comes from living in harmony with our environment. This philosophy is reflected in our logo, inspired by an ancient symbol where the four petals represent Fire, Water, Earth, and Air united in balance. At the centre stands Man, symbolised by an unbroken circle, embodying harmony itself—echoing the timeless ideals of proportion and perfection seen in the Vitruvian Man.",
image:"/image/brands/overview/03.png"
},
{
title:"Environmental, Social and Governance",
subTitle:"",
description:"We are committed to sustainable development through internationally recognized certifications and ESG principles aligned with the United Nations 2030 Agenda. By integrating environmental responsibility, social inclusion, and ethical governance into our operations, we promote transparency, protect natural resources, and foster a fair and responsible workplace. Our goal is continuous improvement toward a more sustainable and balanced future.",
image:"/image/brands/overview/04.png"
},
{
title:"History",
subTitle:"",
description:"We place people and their well-being at the heart of everything we do, creating timeless, handcrafted kitchens that bring joy to everyday life. Through innovative design, quality materials, and a deep commitment to sustainability, we transform cooking into an extraordinary experience while respecting our planet.",
image:"/image/brands/overview/05.png"
},
]
const CompanyOverview = () => {
return (
<section className=" brands-overview-section catalogues-sec sec_padd">
<div className="custom_container container">
{overviewData.map((item, index) => {
return (
<Row className="my-5" key={index}>
<Col md={6} className="mb-4">
<div className={``}>
<Image
width={868}
height={538}
src={item?.image}
alt={item?.title}
className="img-fluid"
/>
</div>
</Col>
{/* FIXED HERE */}
<Col md={6}>
<div className="title">{item?.title}</div>
<div className="sub-title">{item?.subTitle}</div>
<div
className="info"
dangerouslySetInnerHTML={{
__html: item?.description || "",
}}
/>
</Col>
</Row>
);
})}
</div>
</section>
);
};
export default CompanyOverview;
components/valcucines/InnerBannerBrands.js 0 → 100644
import React from 'react'
import { Col, Row } from 'react-bootstrap'
import { cleanImage } from '../services/imageHandling'
import Heading from "@/components/Heading";
import Image from 'next/image';
const InnerBannerBrands = ({data}) => {
return (
<>
<section className='innerbanner-section'>
<div className='innerbanner product-details'>
<Row>
<Col>
<div className='product-banner'>
<Image width={1920} height={948} src={data?.image?.url} alt="" />
<div className='info'>
<Heading el="h2" heading={data?.title} />
<div dangerouslySetInnerHTML={{__html: data?.description}}></div>
</div>
</div>
</Col>
</Row>
</div>
</section>
</>
)
}
export default InnerBannerBrands
container/Home/Catalogues.js
...@@ -10,14 +10,16 @@ import FadeInStagger from "@/components/FadeInStagger"; ...@@ -10,14 +10,16 @@ import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
import { cleanImage } from "@/components/services/imageHandling"; import { cleanImage } from "@/components/services/imageHandling";
import Link from "next/link"; import Link from "next/link";
const CollectionData = [ // const CollectionData = [
{ image: "/image/catalogues/01.png", title: "Ecosophia" }, // { image: "/image/catalogues/01.png", title: "Ecosophia" },
{ image: "/image/catalogues/02.png", title: "Architectural Scenarios" }, // { image: "/image/catalogues/02.png", title: "Architectural Scenarios" },
{ image: "/image/catalogues/03.png", title: "Vitrum Arte" }, // { image: "/image/catalogues/03.png", title: "Vitrum Arte" },
{ image: "/image/catalogues/02.png", title: "Design Studio" }, // { image: "/image/catalogues/02.png", title: "Design Studio" },
]; // ];
const Catalogues = ({cataloguesData}) => { const Catalogues = ({cataloguesData}) => {
const limitedCatalogues = cataloguesData?.slice(0, 5);
return ( return (
<> <>
<div className="catalogues-sec sec_padd position-relative"> <div className="catalogues-sec sec_padd position-relative">
...@@ -50,8 +52,9 @@ const Catalogues = ({cataloguesData}) => { ...@@ -50,8 +52,9 @@ const Catalogues = ({cataloguesData}) => {
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
}} }}
pagination={{ clickable: true }} pagination={{ clickable: true }}
autoplay={{ delay: 5000, disableOnInteraction: false, }} autoplay={false}
loop={true} // autoplay={{ delay: 5000, disableOnInteraction: false, }}
loop={false}
modules={[Navigation,Pagination,Autoplay]} modules={[Navigation,Pagination,Autoplay]}
className="cataloguesSwiper pb-5 pb-md-5" className="cataloguesSwiper pb-5 pb-md-5"
breakpoints={{ breakpoints={{
...@@ -61,7 +64,7 @@ const Catalogues = ({cataloguesData}) => { ...@@ -61,7 +64,7 @@ const Catalogues = ({cataloguesData}) => {
1200: { slidesPerView: 3, spaceBetween: 60 }, 1200: { slidesPerView: 3, spaceBetween: 60 },
}} }}
> >
{cataloguesData?.map((item, index) => ( {limitedCatalogues?.map((item, index) => (
<SwiperSlide key={index}> <SwiperSlide key={index}>
<div className="collection-card"> <div className="collection-card">
<img <img
......
pages/brands/inalcos.js 0 → 100644
"use client";
import InnerBannerBrands from "@/components/valcucines/InnerBannerBrands";
import Breadcrumb from "@/components/Common/Breadcrumb";
import { Contact } from "@/container/Home/Contact";
import { getBrandsBySlug } from "@/services/brandsApi";
import Head from "next/head";
import AboutInfoBrands from "@/components/Inalco/AboutInfoBrands";
import CompanyOverview from "@/components/Inalco/CompanyOverview";
import WeCare from "@/components/Inalco/WeCare";
const bannerData = [
{
id: 8,
title: "Inalco",
description: "<p>INALCO Is Synonymous With Sustainable Innovation, Creativity, Elegance, Excellence, Exclusivity And Emotions.</p>",
image: {
url: "/image/brands/Inalco.png",
}
}
];
console.log("bannerData", bannerData)
export default function inalcoPage({ brandData }) {
console.log("brandData new", brandData)
const breadcrumbData = [
{
href: "/brands",
label: "Brands",
},
{
href: `/brands/`,
label: "Inalco",
},
];
return (
<>
<Head>
<title>Akruti</title>
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={bannerData[0] || []} />
<AboutInfoBrands />
<CompanyOverview />
<WeCare />
<Contact />
</>
);
}
pages/brands/rimadesios.js 0 → 100644
"use client";
import InnerBannerBrands from "@/components/valcucines/InnerBannerBrands";
import Breadcrumb from "@/components/Common/Breadcrumb";
import { Contact } from "@/container/Home/Contact";
import { getBrandsBySlug } from "@/services/brandsApi";
import Head from "next/head";
import AboutInfoBrands from "@/components/Rimadesios/AboutInfoBrands";
import CompanyOverview from "@/components/Rimadesios/CompanyOverview";
const bannerData = [
{
id: 8,
title: "Rimadesio",
description: "<p>Our doors are more than entryways—they are crafted statements of design, blending timeless aesthetics with modern functionality. Each piece defines spaces with sophistication and enduring style.</p>",
image: {
url: "/image/brands/Rimadesio.png",
}
}
];
console.log("bannerData", bannerData)
export default function rimadesiosPage({ brandData }) {
console.log("brandData new", brandData)
const breadcrumbData = [
{
href: "/brands",
label: "Brands",
},
{
href: `/brands/`,
label: "Rimadesio",
},
];
return (
<>
<Head>
<title>Akruti</title>
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={bannerData[0] || []} />
<AboutInfoBrands />
<CompanyOverview />
<Contact />
</>
);
}
pages/brands/valcucines.js 0 → 100644
"use client";
import AboutInfoBrands from "@/components/valcucines/AboutInfoBrands";
import Certifications from "@/components/valcucines/Certifications";
import CompanyOverview from "@/components/valcucines/CompanyOverview";
import InnerBannerBrands from "@/components/valcucines/InnerBannerBrands";
import Breadcrumb from "@/components/Common/Breadcrumb";
import { Contact } from "@/container/Home/Contact";
import { getBrandsBySlug } from "@/services/brandsApi";
import Head from "next/head";
const bannerData = [
{
id: 8,
title: "Valcucine",
description: "<p>Our doors are more than entryways—they are crafted statements of design, blending timeless aesthetics with modern functionality. Each piece defines spaces with sophistication and enduring style.</p>",
image: {
url: "/image/brands/valcucine.png",
}
}
];
console.log("bannerData", bannerData)
export default function valcucinesPage({ brandData }) {
console.log("brandData new", brandData)
const breadcrumbData = [
{
href: "/brands",
label: "Brands",
},
{
href: `/brands/`,
label: "valcucine",
},
];
return (
<>
<Head>
<title>Akruti</title>
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={bannerData[0] || []} />
<AboutInfoBrands />
<CompanyOverview />
<Certifications />
<Contact />
</>
);
}
styles/globals.css
...@@ -225,13 +225,15 @@ body { ...@@ -225,13 +225,15 @@ body {
color: #fff; color: #fff;
} }
.homeBannerSwiper .swiper-pagination-bullet-active { .homeBannerSwiper .swiper-pagination-bullet-active {
background-color: #fff; background-color: #fff !important;
} }
.homeBannerSwiper .swiper-pagination-bullet { .homeBannerSwiper .swiper-pagination-bullet {
border: 1px solid #fff; border: 1px solid #fff !important;
width: 12px; width: 12px;
height: 12px; height: 12px;
opacity: 1;
background: transparent;
} }
/* ===Collection Slider=== */ /* ===Collection Slider=== */
...@@ -445,6 +447,7 @@ input:focus-visible { ...@@ -445,6 +447,7 @@ input:focus-visible {
.breadcrumb li a { .breadcrumb li a {
color: #666; color: #666;
text-transform: capitalize;
} }
.breadcrumb li span,.breadcrumb-item+.breadcrumb-item::before { .breadcrumb li span,.breadcrumb-item+.breadcrumb-item::before {
color: #000; color: #000;
...@@ -1019,6 +1022,7 @@ h2.heading > p { ...@@ -1019,6 +1022,7 @@ h2.heading > p {
font-size: inherit; font-size: inherit;
line-height: inherit; line-height: inherit;
font-family: inherit; font-family: inherit;
margin: 0 !important;
} }
.explore-swiper button.cust-swiper-button-prev { .explore-swiper button.cust-swiper-button-prev {
margin-left: -29px; margin-left: -29px;
...@@ -1139,6 +1143,54 @@ footer a:hover { ...@@ -1139,6 +1143,54 @@ footer a:hover {
.innercontent-section .contactPage-address .list-unstyled li i{ .innercontent-section .contactPage-address .list-unstyled li i{
color: #000; color: #000;
} }
.brands-overview-section .title,.certifications-item .title{
font-size: 1.25vw;
font-weight: 700;
color: #000;
padding-bottom: 0.5rem;
}
.certifications-item{
background: #F5F5F5;
padding: 1rem;
}
.certifications-item .download-content a{
text-transform: capitalize;
color: #000;
}
.certifications-item img{
width: 100%;
height: 100%;
}
.brands-overview-section .custom_container div:last-child,.our-principle-section .container div:last-child{
margin-bottom: 0 !important;
}
.our-principle-section .banner-item{
position: relative;
}
.our-principle-section .banner-item .title {
position: absolute;
top: 0px;
left: 7%;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
height: 100%;
color: #FFF;
font-size: 1.25vw;
font-weight: 600;
}
.we-care-section .title{
color: #000;
font-size: 3.33vw;
font-weight: 700;
line-height: 112.5%;
text-transform: uppercase;
}
.we-care-section .img-banner img{
object-fit: cover;
}
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
body { body {
font-size: 16px; font-size: 16px;
...@@ -1245,6 +1297,15 @@ footer a:hover { ...@@ -1245,6 +1297,15 @@ footer a:hover {
} }
/* ===Media query==== */ /* ===Media query==== */
@media (max-width: 767px) { @media (max-width: 767px) {
.we-care-section .img-banner img{
max-height: 300px;
}
.our-principle-section .banner-item .title {
font-size: 16px;
}
.brands-overview-section .title, .certifications-item .title {
font-size: 16px;
}
.innercontent-section iframe{ .innercontent-section iframe{
height: 235px; height: 235px;
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!