Skip to content

sujata / Akruti-Frontend

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

updated mobile

1 parent d77937f4
Inline Side-by-side
Showing 17 changed files with 114 additions and 36 deletions
components/About/AboutAkruti.js
...@@ -5,7 +5,7 @@ const AboutAkruti = () => { ...@@ -5,7 +5,7 @@ const AboutAkruti = () => {
return ( return (
<> <>
<section className='about-section'> <section className='about-section'>
<div className='custom_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="About akruti luxe" /> <Heading el="h2" heading="About akruti luxe" />
......
components/Brands/InnerBannerBrands.js
...@@ -8,7 +8,7 @@ const InnerBannerBrands = ({data}) => { ...@@ -8,7 +8,7 @@ const InnerBannerBrands = ({data}) => {
return ( return (
<> <>
<section className='innerbanner-section'> <section className='innerbanner-section'>
<div className='innerbanner product-details'> <div className='innerbanner product-details container'>
<Row> <Row>
<Col> <Col>
<div className='product-banner'> <div className='product-banner'>
......
components/Brands/InnerDetailsBrands.js
...@@ -32,7 +32,7 @@ const InnerDetailsBrands = ({ subCategories }) => { ...@@ -32,7 +32,7 @@ const InnerDetailsBrands = ({ subCategories }) => {
return ( return (
<section className="collection-m-section sec_padd"> <section className="collection-m-section sec_padd">
<div className="custom_container"> <div className="custom_container container">
{/* Header Row */} {/* Header Row */}
<Row className="align-content-center"> <Row className="align-content-center">
<Col xs={6}> <Col xs={6}>
......
components/Catalogue/InnerDetailsCatalogue.js
...@@ -68,7 +68,7 @@ const InnerDetailsCatalogue = ({ subCategory = "All Catalogue", cataloguesData } ...@@ -68,7 +68,7 @@ const InnerDetailsCatalogue = ({ subCategory = "All Catalogue", cataloguesData }
return ( return (
<section className="collection-m-section sec_padd"> <section className="collection-m-section sec_padd">
<div className="custom_container"> <div className="custom_container container">
<Row> <Row>
<Col xs={6}> <Col xs={6}>
<h3> <h3>
...@@ -94,7 +94,7 @@ const InnerDetailsCatalogue = ({ subCategory = "All Catalogue", cataloguesData } ...@@ -94,7 +94,7 @@ const InnerDetailsCatalogue = ({ subCategory = "All Catalogue", cataloguesData }
<Row> <Row>
{sortedProducts.map((product, index) => ( {sortedProducts.map((product, index) => (
<Col md={4} key={`${product.productSlug}-${index}`}> <Col xs={6} md={4} key={`${product.productSlug}-${index}`}>
<div className="collections-item"> <div className="collections-item">
<Link href={cleanImage(product?.pdfLink?.url || "#")} target="_blank"> <Link href={cleanImage(product?.pdfLink?.url || "#")} target="_blank">
<Image <Image
......
components/Collection/AboutInfo.js
...@@ -6,7 +6,7 @@ const AboutInfo = ({productData}) => { ...@@ -6,7 +6,7 @@ const AboutInfo = ({productData}) => {
return ( return (
<> <>
<section className='about-section about-info-section pb-0'> <section className='about-section about-info-section pb-0'>
<div className='custom_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="Every person is unique," />
......
components/Collection/Gallery.js
...@@ -43,8 +43,8 @@ const Gallery = ({ productData }) => { ...@@ -43,8 +43,8 @@ const Gallery = ({ productData }) => {
return ( return (
<Col <Col
key={item.id} key={item.id}
xs={12} xs={6}
md={isFullWidth ? 12 : 6} xs={isFullWidth ? 12 : 6}
className="mb-4" className="mb-4"
> >
<div className="gallery-image-wrapper"> <div className="gallery-image-wrapper">
......
components/Collection/InnerDetails.js
...@@ -28,7 +28,7 @@ const InnerDetails = ({ subCategories }) => { ...@@ -28,7 +28,7 @@ const InnerDetails = ({ subCategories }) => {
}); });
return ( return (
<section className="collection-m-section sec_padd"> <section className="collection-m-section sec_padd">
<div className="custom_container"> <div className="custom_container container">
{/* Header Row */} {/* Header Row */}
<Row> <Row>
<Col xs={6}> <Col xs={6}>
......
components/Collection/InnerDetailsSubCategory.js
...@@ -28,7 +28,7 @@ const [showFilter, setShowFilter] = useState(false); ...@@ -28,7 +28,7 @@ const [showFilter, setShowFilter] = useState(false);
return ( return (
<section className="collection-m-section sec_padd"> <section className="collection-m-section sec_padd">
<div className="custom_container"> <div className="custom_container container">
{/* Header */} {/* Header */}
<Row className="align-content-center"> <Row className="align-content-center">
......
components/Common/Breadcrumb.js
...@@ -6,9 +6,9 @@ const Breadcrumb = ({breadcrumbData}) => { ...@@ -6,9 +6,9 @@ const Breadcrumb = ({breadcrumbData}) => {
return ( return (
<> <>
<section className='breadcrumb-section'> <section className='breadcrumb-section'>
<div className='custom_container'> <div className='custom_container container'>
<div className='row'> <div className='row'>
<div className='col'> <div className='col-12'>
<nav aria-label="Breadcrumb" className="breadcrumb" role="navigation"> <nav aria-label="Breadcrumb" className="breadcrumb" role="navigation">
<ol> <ol>
{breadcrumbData.map((it, idx) => { {breadcrumbData.map((it, idx) => {
......
components/Common/HeadTitle.js
...@@ -6,8 +6,8 @@ const HeadTitle = ({categoryData}) => { ...@@ -6,8 +6,8 @@ const HeadTitle = ({categoryData}) => {
return ( return (
<> <>
<section className='let-connect-section'> <section className='let-connect-section '>
<div className='custom_container'> <div className='custom_container container'>
<Row className='text-center'> <Row className='text-center'>
<Col> <Col>
<Heading el="h2" heading={categoryData?.title} /> <Heading el="h2" heading={categoryData?.title} />
......
components/Contacts/InnerContent.js
...@@ -7,7 +7,7 @@ const InnerContent = () => { ...@@ -7,7 +7,7 @@ const InnerContent = () => {
return ( return (
<> <>
<section className="innercontent-section sec_padd"> <section className="innercontent-section sec_padd">
<div className="custom_container"> <div className="custom_container container">
<Row className="align-items-center"> <Row className="align-items-center">
<Col md={6}> <Col md={6}>
<div className=""> <div className="">
...@@ -37,7 +37,7 @@ const InnerContent = () => { ...@@ -37,7 +37,7 @@ const InnerContent = () => {
</div> </div>
</section> </section>
<section className="innercontent-section catalogues-sec sec_padd"> <section className="innercontent-section catalogues-sec sec_padd">
<div className="custom_container"> <div className="custom_container container">
<Row className="align-items-center "> <Row className="align-items-center ">
<Col md={6} className="d-flex justify-content-md-center"> <Col md={6} className="d-flex justify-content-md-center">
<div className="contactPage-address"> <div className="contactPage-address">
......
components/Layout/SubMenu.js
...@@ -14,7 +14,7 @@ export const SubMenu = ({ data, menuTitle }) => { ...@@ -14,7 +14,7 @@ export const SubMenu = ({ data, menuTitle }) => {
return ( return (
<section className='submenu_header_desktop'> <section className='submenu_header_desktop'>
<div className='custom_container'> <div className='custom_container container'>
<Row className='justify-content-between'> <Row className='justify-content-between'>
<div className={classname}> <div className={classname}>
<Row> <Row>
......
container/Home/Catalogues.js
...@@ -49,10 +49,10 @@ const Catalogues = ({cataloguesData}) => { ...@@ -49,10 +49,10 @@ const Catalogues = ({cataloguesData}) => {
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 }}
loop={true} loop={true}
modules={[Navigation]} modules={[Navigation,Pagination]}
className="cataloguesSwiper pb-3 pb-md-5" className="cataloguesSwiper pb-5 pb-md-5"
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 }, 320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 }, 640: { slidesPerView: 2, spaceBetween: 20 },
...@@ -74,13 +74,13 @@ const Catalogues = ({cataloguesData}) => { ...@@ -74,13 +74,13 @@ const Catalogues = ({cataloguesData}) => {
))} ))}
</Swiper> </Swiper>
</FadeInStagger> </FadeInStagger>
<div className="text-center"> <div className="text-center mt-3">
<Link href="/catalogue" className="btn3">View More <i className="fa-solid fa-arrow-right"></i></Link> <Link href="/catalogue" className="btn3">View More <i className="fa-solid fa-arrow-right"></i></Link>
</div> </div>
</Col> </Col>
</Row> </Row>
</Container> </Container>
<Container className="custom_container position-absolute swiperbtn1"> <Container className="custom_container position-absolute swiperbtn1 d-none d-md-block">
<div className=" d-flex d-nones justify-content-between align-items-center w-100 "> <div className=" d-flex d-nones justify-content-between align-items-center w-100 ">
<button className="cust-swiper-button-prev"> <button className="cust-swiper-button-prev">
<svg <svg
......
container/Home/Collection.js
...@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => {
</div> </div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
<Col lg={4} md={4} className="d-flex justify-content-end mt-2 mb-3 mb-md-0 d-nones d-md-blocks"> <Col lg={4} md={4} className="d-flex justify-content-end mt-2 mb-3 mb-md-0 d-none d-md-flex">
<div className="d-flex gap-2"> <div className="d-flex gap-2">
<button className="cust-swiper-button-prev"> <button className="cust-swiper-button-prev">
<svg <svg
...@@ -130,9 +130,9 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -130,9 +130,9 @@ const CollectionSlider = ({CollectionData}) => {
modules={[Navigation, Autoplay,Pagination]} modules={[Navigation, Autoplay,Pagination]}
className="collectionSwiper" className="collectionSwiper"
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 }, 320: { slidesPerView: 1.1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 }, 640: { slidesPerView: 2.1, spaceBetween: 20 },
992: { slidesPerView: 3, spaceBetween: 25 }, 992: { slidesPerView: 3.1, spaceBetween: 25 },
1200: { slidesPerView: 3.7, spaceBetween: 25 }, 1200: { slidesPerView: 3.7, spaceBetween: 25 },
}} }}
> >
......
pages/collections/[category]/[subCategory]/[productSlug].js
...@@ -54,7 +54,7 @@ useEffect(() => { ...@@ -54,7 +54,7 @@ useEffect(() => {
{productData?.isDoorAndPartitionsLayouts == true ? ( {productData?.isDoorAndPartitionsLayouts == true ? (
<section className="details-tab-section"> <section className="details-tab-section">
<div className="custom_containers"> <div className="custom_containers container">
<div className="details-tab"> <div className="details-tab">
<div className="head">Products:</div> <div className="head">Products:</div>
<Tabs <Tabs
......
pages/collections/[category]/[subCategory]/index.js
...@@ -63,7 +63,7 @@ const SubCategoryOrProductPage = ({ ...@@ -63,7 +63,7 @@ const SubCategoryOrProductPage = ({
{productData?.isDoorAndPartitionsLayouts == true ? ( {productData?.isDoorAndPartitionsLayouts == true ? (
<section className="details-tab-section"> <section className="details-tab-section">
<div className="custom_containers"> <div className="custom_containers container">
<div className="details-tab"> <div className="details-tab">
<div className="head">Products:</div> <div className="head">Products:</div>
<Tabs <Tabs
......
styles/globals.css
...@@ -261,6 +261,23 @@ body { ...@@ -261,6 +261,23 @@ body {
height: 12px; height: 12px;
opacity: 1; opacity: 1;
} }
.swiper-pagination-bullet-active {
background-color: #000 !important;
width: 12px !important;
height: 12px !important;
}
.swiper-pagination-bullet {
border: 1px solid #000 !important;
background-color: #fff;
width: 12px !important;
height: 12px !important;
opacity: 1;
}
.studioSwiper .swiper-pagination-bullet-active, .explore-swiper .swiper-pagination-bullet-active, .projectSwiper .swiper-pagination-bullet-active { .studioSwiper .swiper-pagination-bullet-active, .explore-swiper .swiper-pagination-bullet-active, .projectSwiper .swiper-pagination-bullet-active {
background-color: #000 !important; background-color: #000 !important;
width: 12px; width: 12px;
...@@ -274,7 +291,7 @@ body { ...@@ -274,7 +291,7 @@ body {
height: 12px; height: 12px;
opacity: 1; opacity: 1;
} }
.projectSwiper{ .projectSwiper.swiper{
padding-bottom: 3rem; padding-bottom: 3rem;
} }
/* .collection-section button.cust-swiper-button-prev { /* .collection-section button.cust-swiper-button-prev {
...@@ -423,7 +440,7 @@ input:focus-visible { ...@@ -423,7 +440,7 @@ input:focus-visible {
} }
.breadcrumb li { .breadcrumb li {
padding: 1rem 0 1rem 1rem; padding: 1rem 0 1rem 0;
} }
.breadcrumb li a { .breadcrumb li a {
...@@ -539,10 +556,10 @@ input:focus-visible { ...@@ -539,10 +556,10 @@ input:focus-visible {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
overflow: hidden; overflow: hidden;
} }
.gallery-items .col-md-6 .gallery-image-wrapper { .gallery-items .col-6 .gallery-image-wrapper {
aspect-ratio: 16 / 16; aspect-ratio: 16 / 16;
} }
.gallery-items .col-md-12 .gallery-image-wrapper { .gallery-items .col-12 .gallery-image-wrapper {
aspect-ratio: 16 / 8; aspect-ratio: 16 / 8;
} }
.gallery-image { .gallery-image {
...@@ -576,8 +593,12 @@ input:focus-visible { ...@@ -576,8 +593,12 @@ input:focus-visible {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover;
/* border-radius: 15px; */ /* border-radius: 15px; */
} }
.blog-section img{
object-fit: cover;
}
.project-section{ .project-section{
padding-top: 5.21vw; padding-top: 5.21vw;
} }
...@@ -1224,6 +1245,53 @@ footer a:hover { ...@@ -1224,6 +1245,53 @@ footer a:hover {
} }
/* ===Media query==== */ /* ===Media query==== */
@media (max-width: 767px) { @media (max-width: 767px) {
.gallery-items .col-12 .gallery-image-wrapper {
aspect-ratio: 16 / 10;
}
.gallery-items .col-6 .gallery-image-wrapper {
aspect-ratio: 16 / 20;
}
footer .footer-cotent h6 {
margin-bottom: 1rem;
}
.collections-item img {
min-height: 270px;
}
.collections-item {
margin-bottom: 2rem;
}
.collections-item .title {
margin-top: 1rem;
font-size: 16px;
}
.sortby-select {
font-size: 16px;
}
.blog-section img {
max-height: 214px;
}
.blog-content img, .blog-large img {
max-height: 390px;
}
.project-section .swiper{
padding-bottom: 3rem;
}
.project-card img{
max-height: 290px;
}
.btn1 i,
.btn2 i,
.btn3 i,
.btn4 i,.read-more-btn i,.collectionSwiper .collection-card p i {
opacity: 1 !important;
transform: translateX(0) !important;
max-width: 20px !important;
margin-left: 0.2rem !important;
}
.collectionSwiper .swiper-wrapper {
padding-bottom: 1rem;
}
.catalogues-sec .swiperbtn1 { .catalogues-sec .swiperbtn1 {
top: 50%; top: 50%;
left: 0%; left: 0%;
...@@ -1251,16 +1319,26 @@ footer a:hover { ...@@ -1251,16 +1319,26 @@ footer a:hover {
margin: 0.4rem; margin: 0.4rem;
} }
.collectionSwiper .collection-card { .collectionSwiper .collection-card {
height: 390px; height: auto;
} }
.collectionSwiper .collection-card img { .collectionSwiper .collection-card img {
height: 340px; height: 400px;
}
.h-slider .collectionSwiper .collection-card:hover img {
height: inherit;
} }
.text-btn-row .banner-title{ .text-btn-row .banner-title{
width: 100%; width: 100%;
} }
.collectionSwiper .collection-card img{
position: relative;
}
.collectionSwiper .collection-card p {
position: relative;
bottom: inherit;
}
body { body {
font-size: 16px; font-size: 14px;
} }
footer a, footer a,
footer li { footer li {
...@@ -1323,7 +1401,7 @@ footer a:hover { ...@@ -1323,7 +1401,7 @@ footer a:hover {
padding: 0; padding: 0;
} }
.contactPage-form { .contactPage-form {
padding: 0; padding: 2rem 0 0 0;
} }
.about-info-section.company-overview-section .luxury-items .title { .about-info-section.company-overview-section .luxury-items .title {
font-size: 14px; font-size: 14px;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!