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