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 14 additions and 82 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>
<Col>
{/* <div className='product-banner'>
<Image width={1856} height={1086} src={cleanImage(productData?.image[0]?.url)} alt="" />
<div className='info'>
<Heading el="h2" heading={productData?.title} />
<div dangerouslySetInnerHTML={{__html: productData?.description}}></div>
</div>
</div> */}
<div className="product-banner"> <div className="product-banner">
<div className="position-relative">
<Swiper <Swiper
navigation={{ navigation={{
nextEl: ".cust-swiper-button-next", nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
}} }}
pagination={{ clickable: true }} pagination={{ clickable: true }}
// autoplay={false}
autoplay={{ delay: 5000, disableOnInteraction: false }} autoplay={{ delay: 5000, disableOnInteraction: false }}
loop={false} loop={false}
modules={[Navigation, Pagination, Autoplay]} modules={[Navigation, Pagination, Autoplay]}
className="homeBannerSwiper" className="homeBannerSwiper"
> >
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between wrapper-full align-items-center w-100">
<SwiperBtn />
</div>
{productData?.image?.map((item, index) => ( {productData?.image?.map((item, index) => (
<SwiperSlide key={index}> <SwiperSlide key={index}>
<Image <Image
...@@ -55,6 +39,13 @@ const InnerBannerproduct = ({ productData }) => { ...@@ -55,6 +39,13 @@ const InnerBannerproduct = ({ productData }) => {
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
{/* Navigation buttons outside Swiper - hidden if only 1 image */}
{productData?.image?.length > 1 && (
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between wrapper-full align-items-center w-100">
<SwiperBtn />
</div>
)}
</div>
<div className="info"> <div className="info">
<Heading el="h2" heading={productData?.title} /> <Heading el="h2" heading={productData?.title} />
<div <div
...@@ -64,8 +55,6 @@ const InnerBannerproduct = ({ productData }) => { ...@@ -64,8 +55,6 @@ const InnerBannerproduct = ({ productData }) => {
></div> ></div>
</div> </div>
</div> </div>
</Col>
</Row>
</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!