Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 1d1d2075 by Ravindra Kanojiya
Options

updated slider and pages

1 parent 335a8aa9
Inline Side-by-side
Showing 6 changed files with 45 additions and 113 deletions
components/Collection/InnerBannerproduct.js
import { Col, Row } from "react-bootstrap";
import { cleanImage } from "../services/imageHandling";
import Heading from "@/components/Heading";
import Image from "next/image";
import React, { useState, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css"; import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import "swiper/css/pagination"; import "swiper/css/pagination";
import { Navigation, Pagination, Autoplay } from "swiper/modules"; import { Navigation, Pagination, Autoplay } from "swiper/modules";
import SwiperBtn from "@/components/Layout/SwiperBtn"; import SwiperBtn from "@/components/Layout/SwiperBtn";
import Link from "next/link"; import { cleanImage } from "../services/imageHandling";
import Heading from "@/components/Heading";
import Image from "next/image";
import React from "react";
const InnerBannerproduct = ({ productData }) => { const InnerBannerproduct = ({ productData }) => {
console.log("productData", productData); console.log("productData", productData)
return ( return (
<> <>
<section className="innerbanner-section"> <section className="innerbanner-section">
<div className="innerbanner product-details"> <div className="innerbanner product-details">
<Row> <div className="product-banner">
<Col> <div className="position-relative">
{/* <div className='product-banner'> <Swiper
<Image width={1856} height={1086} src={cleanImage(productData?.image[0]?.url)} alt="" /> navigation={{
<div className='info'> nextEl: ".cust-swiper-button-next",
<Heading el="h2" heading={productData?.title} /> prevEl: ".cust-swiper-button-prev",
<div dangerouslySetInnerHTML={{__html: productData?.description}}></div> }}
</div> pagination={{ clickable: true }}
</div> */} autoplay={{ delay: 5000, disableOnInteraction: false }}
<div className="product-banner"> loop={false}
<Swiper modules={[Navigation, Pagination, Autoplay]}
navigation={{ className="homeBannerSwiper"
nextEl: ".cust-swiper-button-next", >
prevEl: ".cust-swiper-button-prev", {productData?.image?.map((item, index) => (
}} <SwiperSlide key={index}>
pagination={{ clickable: true }} <Image
// autoplay={false} width={1856}
autoplay={{ delay: 5000, disableOnInteraction: false }} height={1086}
loop={false} src={cleanImage(item?.url)}
modules={[Navigation, Pagination, Autoplay]} alt=""
className="homeBannerSwiper" />
> </SwiperSlide>
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between wrapper-full align-items-center w-100"> ))}
<SwiperBtn /> </Swiper>
</div> {/* Navigation buttons outside Swiper - hidden if only 1 image */}
{productData?.image?.length > 1 && (
{productData?.image?.map((item, index) => ( <div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between wrapper-full align-items-center w-100">
<SwiperSlide key={index}> <SwiperBtn />
<Image
width={1856}
height={1086}
src={cleanImage(item?.url)}
alt=""
/>
</SwiperSlide>
))}
</Swiper>
<div className="info">
<Heading el="h2" heading={productData?.title} />
<div
dangerouslySetInnerHTML={{
__html: productData?.description,
}}
></div>
</div> </div>
</div> )}
</Col> </div>
</Row> <div className="info">
<Heading el="h2" heading={productData?.title} />
<div
dangerouslySetInnerHTML={{
__html: productData?.description,
}}
></div>
</div>
</div>
</div> </div>
</section> </section>
</> </>
......
pages/brands/[slug].js deleted 100644 → 0
"use client";
import AboutInfoBrands from "@/components/Brands/AboutInfoBrands";
import CompanyOverview from "@/components/Brands/CompanyOverview";
import InnerBannerBrands from "@/components/Brands/InnerBannerBrands";
import Breadcrumb from "@/components/Common/Breadcrumb";
import { Contact } from "@/container/Home/Contact";
import { getBrandsBySlug } from "@/services/brandsApi";
import Head from "next/head";
export default function BrandDetailPage({ brandData }) {
console.log("brandData new", brandData)
const breadcrumbData = [
{
href: "/brands",
label: "Brands",
},
{
href: `/brands/${brandData?.slug}`,
label: brandData.banner?.title || brandData?.slug,
},
];
return (
<>
<Head>
<title>{brandData.banner?.title}</title>
</Head>
<Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerBrands data={brandData?.banner} />
<AboutInfoBrands data={brandData?.info} />
<CompanyOverview data={brandData?.companyOverview} />
<Contact />
</>
);
}
export async function getServerSideProps({ params }) {
try {
const { slug } = params;
const brandData = await getBrandsBySlug(slug);
if (!brandData) {
return { notFound: true };
}
return {
props: {
brandData,
},
};
} catch (error) {
return {
notFound: true,
};
}
}
styles/globals.css
...@@ -1213,6 +1213,7 @@ footer a:hover { ...@@ -1213,6 +1213,7 @@ footer a:hover {
width: 100%; width: 100%;
object-fit: cover; 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;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!