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 = () => {
return (
<>
<section className='about-section'>
<div className='custom_container'>
<div className='custom_container container'>
<Row className='text-center justify-content-center'>
<Col md={8}>
<Heading el="h2" heading="About akruti luxe" />
......
components/Brands/InnerBannerBrands.js
......@@ -8,7 +8,7 @@ const InnerBannerBrands = ({data}) => {
return (
<>
<section className='innerbanner-section'>
<div className='innerbanner product-details'>
<div className='innerbanner product-details container'>
<Row>
<Col>
<div className='product-banner'>
......
components/Brands/InnerDetailsBrands.js
......@@ -32,7 +32,7 @@ const InnerDetailsBrands = ({ subCategories }) => {
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
<div className="custom_container container">
{/* Header Row */}
<Row className="align-content-center">
<Col xs={6}>
......
components/Catalogue/InnerDetailsCatalogue.js
......@@ -68,7 +68,7 @@ const InnerDetailsCatalogue = ({ subCategory = "All Catalogue", cataloguesData }
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
<div className="custom_container container">
<Row>
<Col xs={6}>
<h3>
......@@ -94,7 +94,7 @@ const InnerDetailsCatalogue = ({ subCategory = "All Catalogue", cataloguesData }
<Row>
{sortedProducts.map((product, index) => (
<Col md={4} key={`${product.productSlug}-${index}`}>
<Col xs={6} md={4} key={`${product.productSlug}-${index}`}>
<div className="collections-item">
<Link href={cleanImage(product?.pdfLink?.url || "#")} target="_blank">
<Image
......
components/Collection/AboutInfo.js
......@@ -6,7 +6,7 @@ const AboutInfo = ({productData}) => {
return (
<>
<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'>
<Col md={8}>
{/* <Heading el="h2" heading="Every person is unique," />
......
components/Collection/Gallery.js
......@@ -43,8 +43,8 @@ const Gallery = ({ productData }) => {
return (
<Col
key={item.id}
xs={12}
md={isFullWidth ? 12 : 6}
xs={6}
xs={isFullWidth ? 12 : 6}
className="mb-4"
>
<div className="gallery-image-wrapper">
......
components/Collection/InnerDetails.js
......@@ -28,7 +28,7 @@ const InnerDetails = ({ subCategories }) => {
});
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
<div className="custom_container container">
{/* Header Row */}
<Row>
<Col xs={6}>
......
components/Collection/InnerDetailsSubCategory.js
......@@ -28,7 +28,7 @@ const [showFilter, setShowFilter] = useState(false);
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
<div className="custom_container container">
{/* Header */}
<Row className="align-content-center">
......
components/Common/Breadcrumb.js
......@@ -6,9 +6,9 @@ const Breadcrumb = ({breadcrumbData}) => {
return (
<>
<section className='breadcrumb-section'>
<div className='custom_container'>
<div className='custom_container container'>
<div className='row'>
<div className='col'>
<div className='col-12'>
<nav aria-label="Breadcrumb" className="breadcrumb" role="navigation">
<ol>
{breadcrumbData.map((it, idx) => {
......
components/Common/HeadTitle.js
......@@ -6,8 +6,8 @@ const HeadTitle = ({categoryData}) => {
return (
<>
<section className='let-connect-section'>
<div className='custom_container'>
<section className='let-connect-section '>
<div className='custom_container container'>
<Row className='text-center'>
<Col>
<Heading el="h2" heading={categoryData?.title} />
......
components/Contacts/InnerContent.js
......@@ -7,7 +7,7 @@ const InnerContent = () => {
return (
<>
<section className="innercontent-section sec_padd">
<div className="custom_container">
<div className="custom_container container">
<Row className="align-items-center">
<Col md={6}>
<div className="">
......@@ -37,7 +37,7 @@ const InnerContent = () => {
</div>
</section>
<section className="innercontent-section catalogues-sec sec_padd">
<div className="custom_container">
<div className="custom_container container">
<Row className="align-items-center ">
<Col md={6} className="d-flex justify-content-md-center">
<div className="contactPage-address">
......
components/Layout/SubMenu.js
......@@ -14,7 +14,7 @@ export const SubMenu = ({ data, menuTitle }) => {
return (
<section className='submenu_header_desktop'>
<div className='custom_container'>
<div className='custom_container container'>
<Row className='justify-content-between'>
<div className={classname}>
<Row>
......
container/Home/Catalogues.js
......@@ -49,10 +49,10 @@ const Catalogues = ({cataloguesData}) => {
nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev",
}}
// pagination={{ clickable: true }}
pagination={{ clickable: true }}
loop={true}
modules={[Navigation]}
className="cataloguesSwiper pb-3 pb-md-5"
modules={[Navigation,Pagination]}
className="cataloguesSwiper pb-5 pb-md-5"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 },
......@@ -74,13 +74,13 @@ const Catalogues = ({cataloguesData}) => {
))}
</Swiper>
</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>
</div>
</Col>
</Row>
</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 ">
<button className="cust-swiper-button-prev">
<svg
......
container/Home/Collection.js
......@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => {
</div>
</FadeInStagger>
</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">
<button className="cust-swiper-button-prev">
<svg
......@@ -130,9 +130,9 @@ const CollectionSlider = ({CollectionData}) => {
modules={[Navigation, Autoplay,Pagination]}
className="collectionSwiper"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 },
992: { slidesPerView: 3, spaceBetween: 25 },
320: { slidesPerView: 1.1, spaceBetween: 15 },
640: { slidesPerView: 2.1, spaceBetween: 20 },
992: { slidesPerView: 3.1, spaceBetween: 25 },
1200: { slidesPerView: 3.7, spaceBetween: 25 },
}}
>
......
pages/collections/[category]/[subCategory]/[productSlug].js
......@@ -54,7 +54,7 @@ useEffect(() => {
{productData?.isDoorAndPartitionsLayouts == true ? (
<section className="details-tab-section">
<div className="custom_containers">
<div className="custom_containers container">
<div className="details-tab">
<div className="head">Products:</div>
<Tabs
......
pages/collections/[category]/[subCategory]/index.js
......@@ -63,7 +63,7 @@ const SubCategoryOrProductPage = ({
{productData?.isDoorAndPartitionsLayouts == true ? (
<section className="details-tab-section">
<div className="custom_containers">
<div className="custom_containers container">
<div className="details-tab">
<div className="head">Products:</div>
<Tabs
......
styles/globals.css
......@@ -261,6 +261,23 @@ body {
height: 12px;
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 {
background-color: #000 !important;
width: 12px;
......@@ -274,7 +291,7 @@ body {
height: 12px;
opacity: 1;
}
.projectSwiper{
.projectSwiper.swiper{
padding-bottom: 3rem;
}
/* .collection-section button.cust-swiper-button-prev {
......@@ -423,7 +440,7 @@ input:focus-visible {
}
.breadcrumb li {
padding: 1rem 0 1rem 1rem;
padding: 1rem 0 1rem 0;
}
.breadcrumb li a {
......@@ -539,10 +556,10 @@ input:focus-visible {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.gallery-items .col-md-6 .gallery-image-wrapper {
.gallery-items .col-6 .gallery-image-wrapper {
aspect-ratio: 16 / 16;
}
.gallery-items .col-md-12 .gallery-image-wrapper {
.gallery-items .col-12 .gallery-image-wrapper {
aspect-ratio: 16 / 8;
}
.gallery-image {
......@@ -576,8 +593,12 @@ input:focus-visible {
overflow: hidden;
width: 100%;
height: 100%;
object-fit: cover;
/* border-radius: 15px; */
}
.blog-section img{
object-fit: cover;
}
.project-section{
padding-top: 5.21vw;
}
......@@ -1224,6 +1245,53 @@ footer a:hover {
}
/* ===Media query==== */
@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 {
top: 50%;
left: 0%;
......@@ -1251,16 +1319,26 @@ footer a:hover {
margin: 0.4rem;
}
.collectionSwiper .collection-card {
height: 390px;
height: auto;
}
.collectionSwiper .collection-card img {
height: 340px;
height: 400px;
}
.h-slider .collectionSwiper .collection-card:hover img {
height: inherit;
}
.text-btn-row .banner-title{
width: 100%;
}
.collectionSwiper .collection-card img{
position: relative;
}
.collectionSwiper .collection-card p {
position: relative;
bottom: inherit;
}
body {
font-size: 16px;
font-size: 14px;
}
footer a,
footer li {
......@@ -1323,7 +1401,7 @@ footer a:hover {
padding: 0;
}
.contactPage-form {
padding: 0;
padding: 2rem 0 0 0;
}
.about-info-section.company-overview-section .luxury-items .title {
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!