Skip to content

sujata / Akruti-Frontend

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

design review changes

1 parent c7500221
Inline Side-by-side
Showing 7 changed files with 122 additions and 88 deletions
components/Collection/InnerDetails.js
...@@ -80,13 +80,13 @@ const InnerDetails = ({ subCategories }) => { ...@@ -80,13 +80,13 @@ const InnerDetails = ({ subCategories }) => {
</Col> </Col>
))} ))}
</Row> </Row>
<Row> {/* <Row>
<Col> <Col>
<div className="text-center"> <div className="text-center">
<button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button> <button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button>
</div> </div>
</Col> </Col>
</Row> </Row> */}
</div> </div>
</section> </section>
); );
......
container/Home/ProjectSlider.js
...@@ -7,14 +7,15 @@ import { Autoplay, Navigation, Pagination } from "swiper/modules"; ...@@ -7,14 +7,15 @@ import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Container, Row, Col } from "react-bootstrap"; import { Container, Row, Col } from "react-bootstrap";
import FadeInStagger from "@/components/FadeInStagger"; import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading"; import Heading from "@/components/Heading";
import { cleanImage } from "@/components/services/imageHandling";
const CollectionData = [ const CollectionData = [
{ image: "/image/project.png", title: "The Imperial – Mumbai" }, { image: "/image/project/01.png", title: "The Imperial – Mumbai" },
{ image: "/image/project.png", title: "Azure Heights – Bengaluru" }, { image: "/image/project/02.png", title: "Azure Heights – Bengaluru" },
{ image: "/image/project.png", title: "The Imperial – Mumbai" }, { image: "/image/project/01.png", title: "The Imperial – Mumbai" },
{ image: "/image/project.png", title: "Azure Heights – Bengaluru" }, { image: "/image/project/02.png", title: "Azure Heights – Bengaluru" },
]; ];
console.log("CollectionData - new", CollectionData)
const ProjectSlider = () => { const ProjectSlider = () => {
const prevRef = useRef(null); const prevRef = useRef(null);
const nextRef = useRef(null); const nextRef = useRef(null);
...@@ -63,7 +64,7 @@ const ProjectSlider = () => { ...@@ -63,7 +64,7 @@ const ProjectSlider = () => {
<SwiperSlide key={index}> <SwiperSlide key={index}>
<div className="project-card"> <div className="project-card">
<img <img
src={item.image} src={item?.image}
alt={item.title} alt={item.title}
className="img-fluid rounded-lg hover-zoom" className="img-fluid rounded-lg hover-zoom"
/> />
......
container/Home/Video.js
...@@ -22,7 +22,7 @@ const Video = () => { ...@@ -22,7 +22,7 @@ const Video = () => {
return ( return (
<section className="video_sec sec_padd"> <section className="video_sec sec_padd">
<Container className="custom_container"> <div className="custom_containers">
<video <video
ref={videoRef} ref={videoRef}
autoPlay autoPlay
...@@ -34,7 +34,7 @@ const Video = () => { ...@@ -34,7 +34,7 @@ const Video = () => {
<source src="/image/dummy.mp4" type="video/mp4" /> <source src="/image/dummy.mp4" type="video/mp4" />
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>
</Container> </div>
</section> </section>
); );
}; };
......
pages/collections/[category]/[subCategory]/[productSlug].js
...@@ -44,8 +44,8 @@ const ProductPage = ({ productData, cataloguesData }) => { ...@@ -44,8 +44,8 @@ const ProductPage = ({ productData, cataloguesData }) => {
<Breadcrumb breadcrumbData={breadcrumbData} /> <Breadcrumb breadcrumbData={breadcrumbData} />
<InnerBannerproduct productData={productData} /> <InnerBannerproduct productData={productData} />
<AboutInfo productData={productData?.aboutInfo} /> <AboutInfo productData={productData?.aboutInfo} />
{/* {productData?.isDoorAndPartitionsLayouts === true && <CompanyOverview productData={CompanyOverview} />} */} {productData?.isDoorAndPartitionsLayouts === true && <CompanyOverview productData={CompanyOverview} />}
<CompanyOverview productData={CompanyOverview} /> {/* <CompanyOverview productData={CompanyOverview} /> */}
<Video productData={productData?.video} /> <Video productData={productData?.video} />
{productData?.isDoorAndPartitionsLayouts === true && <TechnicalDetails />} {productData?.isDoorAndPartitionsLayouts === true && <TechnicalDetails />}
......
pages/index.js
...@@ -8,8 +8,9 @@ import ProjectSlider from "@/container/Home/ProjectSlider"; ...@@ -8,8 +8,9 @@ import ProjectSlider from "@/container/Home/ProjectSlider";
import { Contact } from "@/container/Home/Contact"; import { Contact } from "@/container/Home/Contact";
import BlogHome from "@/container/Home/BlogHome"; import BlogHome from "@/container/Home/BlogHome";
import Catalogues from "@/container/Home/Catalogues"; import Catalogues from "@/container/Home/Catalogues";
import { getCataloguesBySlug } from "@/services/cataloguesApi";
const Home = ({ homepage }) => { const Home = ({ homepage, cataloguesData={cataloguesData} }) => {
return ( return (
<> <>
<Head> <Head>
...@@ -24,10 +25,25 @@ const Home = ({ homepage }) => { ...@@ -24,10 +25,25 @@ const Home = ({ homepage }) => {
<Overview /> <Overview />
<ProjectSlider /> <ProjectSlider />
<BlogHome /> <BlogHome />
<Catalogues /> <Catalogues cataloguesData={cataloguesData} />
<Contact /> <Contact />
</> </>
); );
}; };
export default Home; export default Home;
/* ---------- SSR ---------- */
export async function getServerSideProps({ params }) {
try {
const cataloguesData = await getCataloguesBySlug();
return {
props: {
cataloguesData,
},
};
} catch (error) {
console.error("Product page SSR error:", error);
return { notFound: true };
}
}
\ No newline at end of file \ No newline at end of file
public/image/sketch-bg.svg 0 → 100644
This diff could not be displayed because it is too large.
styles/globals.css
...@@ -109,10 +109,10 @@ ...@@ -109,10 +109,10 @@
cursor: pointer; cursor: pointer;
letter-spacing: 0.5px; letter-spacing: 0.5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
white-space: nowrap; white-space: nowrap;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
...@@ -121,8 +121,11 @@ ...@@ -121,8 +121,11 @@
color: #000; color: #000;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
} }
.btn1 i,.btn2 i,.btn3 i,.btn4 i { .btn1 i,
margin-left: 0; .btn2 i,
.btn3 i,
.btn4 i {
margin-left: 0;
opacity: 0; opacity: 0;
transform: translateX(-8px); transform: translateX(-8px);
max-width: 0; max-width: 0;
...@@ -134,7 +137,10 @@ ...@@ -134,7 +137,10 @@
margin-left 0.3s ease; margin-left 0.3s ease;
} }
.btn1:hover i,.btn2:hover i,.btn3:hover i,.btn4:hover i { .btn1:hover i,
.btn2:hover i,
.btn3:hover i,
.btn4:hover i {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
max-width: 20px; max-width: 20px;
...@@ -151,10 +157,12 @@ ...@@ -151,10 +157,12 @@
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
white-space: nowrap; white-space: nowrap;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
transition: background-color 0.3s ease, color 0.3s ease; transition:
background-color 0.3s ease,
color 0.3s ease;
} }
.btn2:hover { .btn2:hover {
...@@ -163,7 +171,7 @@ ...@@ -163,7 +171,7 @@
color: #000; color: #000;
} }
.btn3 { .btn3 {
border: 1px solid #000; border: 1px solid #000;
padding: 12px 28px; padding: 12px 28px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
...@@ -186,7 +194,7 @@ ...@@ -186,7 +194,7 @@
white-space: nowrap; white-space: nowrap;
background-color: transparent; background-color: transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
white-space: nowrap; white-space: nowrap;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
...@@ -271,6 +279,7 @@ button.cust-swiper-button-next { ...@@ -271,6 +279,7 @@ button.cust-swiper-button-next {
cursor: pointer; cursor: pointer;
transition: all 1s ease-out; transition: all 1s ease-out;
transform: scale(0.6); transform: scale(0.6);
height: 52vw;
} }
/* Make video fully visible when in viewport */ /* Make video fully visible when in viewport */
...@@ -301,14 +310,13 @@ button.cust-swiper-button-next { ...@@ -301,14 +310,13 @@ button.cust-swiper-button-next {
.contact_sec { .contact_sec {
background: url(../public/image/getintouch.png) no-repeat center; background: url(../public/image/getintouch.png) no-repeat center;
color: #fff; color: #fff;
padding: 2.5vw 0 ; padding: 2.5vw 0;
} }
.contact_sec h2 { .contact_sec h2 {
color: #fff; color: #fff;
} }
.inputField, .inputField,
textarea { textarea {
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
width: 100%; width: 100%;
...@@ -328,23 +336,24 @@ textarea { ...@@ -328,23 +336,24 @@ textarea {
color: #666666; color: #666666;
} }
.get-in-touch-form .inputField, .get-in-touch-form .inputField,
.get-in-touch-form textarea,.get-in-touch-form .form-select { .get-in-touch-form textarea,
.get-in-touch-form .form-select {
/* border: 0; */ /* border: 0; */
/* border-bottom: 1px solid #cccccc; */ /* border-bottom: 1px solid #cccccc; */
color: #666666; color: #666666;
border-radius: 2px; border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.20); border: 1px solid rgba(0, 0, 0, 0.2);
} }
.get-in-touch-form .form-select{ .get-in-touch-form .form-select {
width: 100%; width: 100%;
padding: 0.6rem 1.2rem; padding: 0.6rem 1.2rem;
border: 0.2px solid #fff; border: 0.2px solid #fff;
color: #666666; color: #666666;
border-radius: 2px; border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.20); border: 1px solid rgba(0, 0, 0, 0.2);
} }
.form-select:focus{ .form-select:focus {
box-shadow: none; box-shadow: none;
} }
input:focus-visible { input:focus-visible {
...@@ -427,7 +436,7 @@ input:focus-visible { ...@@ -427,7 +436,7 @@ input:focus-visible {
width: 100%; width: 100%;
height: auto; height: auto;
min-height: 29vw; min-height: 29vw;
object-fit: cover; object-fit: cover;
} }
.collections-item .title { .collections-item .title {
margin-top: 1rem; margin-top: 1rem;
...@@ -447,8 +456,9 @@ input:focus-visible { ...@@ -447,8 +456,9 @@ input:focus-visible {
color: #fff; color: #fff;
} }
.about-section { .about-section {
margin-bottom: 3rem; padding-bottom: 4rem;
margin-top: 3rem; padding-top: 4rem;
background: url(/image/sketch-bg.svg) no-repeat left center;
} }
.about-info-section .headings { .about-info-section .headings {
margin-bottom: 0 !important; margin-bottom: 0 !important;
...@@ -461,10 +471,15 @@ input:focus-visible { ...@@ -461,10 +471,15 @@ input:focus-visible {
.gallery-image-wrapper { .gallery-image-wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
aspect-ratio: 16 / 9; /* adjust if needed */ aspect-ratio: 16 / 9;
overflow: hidden; overflow: hidden;
} }
.gallery-items .col-md-6 .gallery-image-wrapper{
aspect-ratio: 16 / 13;
}
.gallery-items .col-md-12 .gallery-image-wrapper{
aspect-ratio: 16 / 7;
}
.gallery-image { .gallery-image {
object-fit: cover; object-fit: cover;
} }
...@@ -511,7 +526,7 @@ input:focus-visible { ...@@ -511,7 +526,7 @@ input:focus-visible {
.hover-zoom:hover { .hover-zoom:hover {
transform: scale(1.03); transform: scale(1.03);
} }
.collectionSwiper .collection-card>img{ .collectionSwiper .collection-card > img {
width: 100%; width: 100%;
} }
/* ====Blog=== */ /* ====Blog=== */
...@@ -528,7 +543,7 @@ input:focus-visible { ...@@ -528,7 +543,7 @@ input:focus-visible {
} }
.custom-navbar .dropdown-menu { .custom-navbar .dropdown-menu {
width: 100%; width: 100%;
top: 2.6vw; top: 2.5vw;
left: 0; left: 0;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
...@@ -537,6 +552,7 @@ input:focus-visible { ...@@ -537,6 +552,7 @@ input:focus-visible {
background: #fbfbfb; background: #fbfbfb;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
border-radius: 0; border-radius: 0;
border-top: 1px solid #d1d3d7;
} }
.navbar-expand-lg .navbar-nav .nav-link:hover .dropdown-menu { .navbar-expand-lg .navbar-nav .nav-link:hover .dropdown-menu {
...@@ -577,11 +593,11 @@ input:focus-visible { ...@@ -577,11 +593,11 @@ input:focus-visible {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.navList01 li{ .navList01 li {
padding: 0.3rem 0; padding: 0.3rem 0;
} }
.navList01 a { .navList01 a {
color: #666B71; color: #666b71;
font-size: 0.83vw; font-size: 0.83vw;
} }
.navList01 a:hover, .navList01 a:hover,
...@@ -646,7 +662,7 @@ input:focus-visible { ...@@ -646,7 +662,7 @@ input:focus-visible {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
.homeBannerSwiper{ .homeBannerSwiper {
margin-top: 3.7rem; margin-top: 3.7rem;
height: calc(100vh - 58px); height: calc(100vh - 58px);
} }
...@@ -677,14 +693,15 @@ input:focus-visible { ...@@ -677,14 +693,15 @@ input:focus-visible {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show { .navbar-nav .nav-link.active,
color: var(--secondary-color);; .navbar-nav .nav-link.show {
color: var(--secondary-color);
} }
.gry-img { .gry-img {
/* Set initial state to grayscale (100% grey) */ /* Set initial state to grayscale (100% grey) */
filter: grayscale(100%); filter: grayscale(100%);
-webkit-filter: grayscale(100%); -webkit-filter: grayscale(100%);
/* Add a smooth transition effect */ /* Add a smooth transition effect */
transition: all 0.5s ease; transition: all 0.5s ease;
} }
...@@ -694,80 +711,80 @@ input:focus-visible { ...@@ -694,80 +711,80 @@ input:focus-visible {
filter: grayscale(0%); filter: grayscale(0%);
-webkit-filter: grayscale(0%); -webkit-filter: grayscale(0%);
} }
.copyright{ .copyright {
font-size: 14px; font-size: 14px;
} }
.custom-navbar .dropdown-menu-inner .img-head{ .custom-navbar .dropdown-menu-inner .img-head {
color: #000; color: #000;
text-transform: uppercase; text-transform: uppercase;
} }
.m-para{ .m-para {
font-size: 0.73vw; font-size: 0.73vw;
padding: 2rem 0.8rem; padding: 2rem 0.8rem;
} }
.m-link{ .m-link {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
.m-link a{ .m-link a {
display: inline-block; display: inline-block;
border-right: 1px solid #E0E0E0; border-right: 1px solid #e0e0e0;
padding: 2rem 1rem; padding: 2rem 1rem;
} }
.m-link a:last-child{ .m-link a:last-child {
border-right: 0; border-right: 0;
padding-right: 0; padding-right: 0;
} }
.custom-navbar .dropdown-menu.brands .dropdown-menu-inner { .custom-navbar .dropdown-menu.brands .dropdown-menu-inner {
padding: 0; padding: 0;
} }
.dropdown-custom:hover .dropdown-menu.brands{ .dropdown-custom:hover .dropdown-menu.brands {
padding: 0; padding: 0;
} }
.company-overview-section{ .company-overview-section {
background: #F5F5F5; background: #f5f5f5;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 1px; padding-bottom: 1px;
} }
.about-info-section.company-overview-section .luxury-items .title{ .about-info-section.company-overview-section .luxury-items .title {
font-size: 1.25vw; font-size: 1.25vw;
font-weight: 700; font-weight: 700;
line-height: 116.667%; line-height: 116.667%;
padding-top: 1rem; padding-top: 1rem;
} }
.about-info-section.company-overview-section .luxury-items .info{ .about-info-section.company-overview-section .luxury-items .info {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.about-info-section.company-overview-section .luxury-items { .about-info-section.company-overview-section .luxury-items {
padding: 0rem 5rem 2rem 0rem; padding: 0rem 5rem 2rem 0rem;
} }
.about-info-section.company-overview-section .luxury-items.option02 { .about-info-section.company-overview-section .luxury-items.option02 {
padding: 5rem 2rem 5rem 4rem !important; padding: 5rem 2rem 5rem 4rem !important;
} }
.custom-navbar .nav-link{ .custom-navbar .nav-link {
font-size: 0.73vw; font-size: 0.73vw;
} }
.contactPage-form{ .contactPage-form {
padding: 0 5rem 0 5rem; padding: 0 5rem 0 5rem;
} }
.get-in-touch-sec{ .get-in-touch-sec {
padding: 3rem 0 0 0; padding: 3rem 0 0 0;
} }
.get-in-touch-sec .heading{ .get-in-touch-sec .heading {
font-size: 1.25vw; font-size: 1.25vw;
font-weight: 500; font-weight: 500;
} }
.contactPage-address{ .contactPage-address {
padding: 0 5rem; padding: 0 5rem;
} }
.contactPage-address a{ .contactPage-address a {
color: #666; color: #666;
} }
.heading{ .heading {
font-size: 1.67vw; font-size: 1.67vw;
} }
.technicalDetails-section{ .technicalDetails-section {
margin-top: 3rem; margin-top: 3rem;
} }
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
...@@ -863,34 +880,34 @@ padding-top: 1rem; ...@@ -863,34 +880,34 @@ padding-top: 1rem;
.accordion01 .accordion .item { .accordion01 .accordion .item {
margin-bottom: 0rem; margin-bottom: 0rem;
padding: 1rem 0 0 0; padding: 1rem 0 0 0;
} }
.accordion01 .accordion-button { .accordion01 .accordion-button {
font-size: 12px; font-size: 12px;
line-height: 18px line-height: 18px;
} }
.contactPage-address { .contactPage-address {
padding: 0; padding: 0;
} }
.contactPage-form { .contactPage-form {
padding: 0; padding: 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;
} }
.about-info-section.company-overview-section .luxury-items { .about-info-section.company-overview-section .luxury-items {
padding: 0rem 0rem 2rem 0rem; padding: 0rem 0rem 2rem 0rem;
} }
.about-info-section.company-overview-section .luxury-items.option02 { .about-info-section.company-overview-section .luxury-items.option02 {
padding: 2rem 0rem 3rem 0rem !important; padding: 2rem 0rem 3rem 0rem !important;
} }
.homeBannerSwiper { .homeBannerSwiper {
margin-top: 66px; margin-top: 66px;
height: calc(100vh - 125px); height: calc(100vh - 125px);
} }
.form-check-label{ .form-check-label {
font-size: 12px; font-size: 12px;
} }
.contact-map{ .contact-map {
margin-top: 2rem; margin-top: 2rem;
} }
.breadcrumb li:first-child { .breadcrumb li:first-child {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!