Skip to content

sujata / Akruti-Frontend

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

updated contact form

1 parent 036aaa0b
Inline Side-by-side
Showing 8 changed files with 76 additions and 32 deletions
components/Brands/InnerDetailsBrands.js
...@@ -46,9 +46,9 @@ const InnerDetailsBrands = ({ subCategories }) => { ...@@ -46,9 +46,9 @@ const InnerDetailsBrands = ({ subCategories }) => {
<Col xs={6} className="d-flex justify-content-end"> <Col xs={6} className="d-flex justify-content-end">
<> <>
<FilterButton {/* <FilterButton
// onClick={() => setShowFilter(true)} onClick={() => setShowFilter(true)}
/> /> */}
{/* {showFilter && ( {/* {showFilter && (
<div className="filter-panel"> <div className="filter-panel">
......
components/Collection/InnerDetailsSubCategory.js
...@@ -43,9 +43,9 @@ const [showFilter, setShowFilter] = useState(false); ...@@ -43,9 +43,9 @@ const [showFilter, setShowFilter] = useState(false);
<Col xs={6} className="d-flex justify-content-end"> <Col xs={6} className="d-flex justify-content-end">
<> <>
<FilterButton {/* <FilterButton
// onClick={() => setShowFilter(true)} onClick={() => setShowFilter(true)}
/> /> */}
{/* {showFilter && ( {/* {showFilter && (
<div className="filter-panel"> <div className="filter-panel">
......
components/Heading.js
...@@ -20,7 +20,7 @@ const Heading = ({ ...@@ -20,7 +20,7 @@ const Heading = ({
// ✅ IF HTML → render directly // ✅ IF HTML → render directly
if (isHtml) { if (isHtml) {
return ( return (
<div className={`headings mb-4 ${className}`}> <div className={`headings mb-2 ${className}`}>
{subheading && <Wrapper className="subheading">{subheading}</Wrapper>} {subheading && <Wrapper className="subheading">{subheading}</Wrapper>}
<Wrapper <Wrapper
className="heading" className="heading"
...@@ -45,7 +45,7 @@ const Heading = ({ ...@@ -45,7 +45,7 @@ const Heading = ({
}; };
return ( return (
<div className={`headings mb-4 ${className}`}> <div className={`headings mb-2 ${className}`}>
<Wrapper className="subheading">{subheading}</Wrapper> <Wrapper className="subheading">{subheading}</Wrapper>
<div className="heading-container"> <div className="heading-container">
{headingArray.map((item, index) => ( {headingArray.map((item, index) => (
......
container/Home/BlogHome.js
...@@ -78,7 +78,7 @@ const BlogHome = () => { ...@@ -78,7 +78,7 @@ const BlogHome = () => {
<div className="blog-content ms-md-3 mt-2 mt-md-0"> <div className="blog-content ms-md-3 mt-2 mt-md-0">
<p className="blog-date mb-1">{blog.date}</p> <p className="blog-date mb-1">{blog.date}</p>
<h5 className="mb-1">{blog.title}</h5> <h5 className="">{blog.title}</h5>
<p className="blog_desc">{blog.desc}</p> <p className="blog_desc">{blog.desc}</p>
<button className="read-more-btn"> <button className="read-more-btn">
Read More Read More
......
container/Home/Catalogues.js
...@@ -74,7 +74,7 @@ const Catalogues = ({cataloguesData}) => { ...@@ -74,7 +74,7 @@ const Catalogues = ({cataloguesData}) => {
))} ))}
</Swiper> </Swiper>
</FadeInStagger> </FadeInStagger>
<div className="text-center"> <div className="text-center mt-5">
<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>
......
container/Home/Collection.js
...@@ -8,6 +8,7 @@ import { Container, Row, Col } from "react-bootstrap"; ...@@ -8,6 +8,7 @@ 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"; import { cleanImage } from "@/components/services/imageHandling";
import Link from "next/link";
// const CollectionData = [ // const CollectionData = [
// { image: "/image/collection/01.png", title: "Kitchen" }, // { image: "/image/collection/01.png", title: "Kitchen" },
...@@ -23,7 +24,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -23,7 +24,7 @@ const CollectionSlider = ({CollectionData}) => {
<div className="collection-section sec_padd h-slider"> <div className="collection-section sec_padd h-slider">
<Container className="custom_container_leftAuto"> <Container className="custom_container_leftAuto">
{/* Heading + Nav Row */} {/* Heading + Nav Row */}
<Row className="align-items-center justify-content-md-between mb-4"> <Row className="align-items-center justify-content-md-between">
<Col lg={8} md={8}> <Col lg={8} md={8}>
<Heading el="h2" heading={CollectionData?.title} /> <Heading el="h2" heading={CollectionData?.title} />
...@@ -34,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -34,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => {
</div> </div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
<Col lg={4} md={4} className="d-flex justify-content-md-end pe-5 mt-2"> <Col lg={4} md={4} className="d-flex justify-content-end pe-0 pe-md-5 mt-2 mb-3 mb-md-0">
<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
...@@ -134,14 +135,14 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -134,14 +135,14 @@ const CollectionSlider = ({CollectionData}) => {
> >
{CollectionData?.item?.map((item, index) => ( {CollectionData?.item?.map((item, index) => (
<SwiperSlide key={index}> <SwiperSlide key={index}>
<div className="collection-card"> <Link href={item?.url || "#"} className="collection-card">
<img <img
src={cleanImage(item?.image?.url)} src={cleanImage(item?.image?.url)}
alt={item.title} alt={item?.title}
className="img-fluid rounded-lg hover-zooms" className="img-fluid rounded-lg hover-zooms"
/> />
<p className="mt-3">{item.title}</p> <p className="mt-3">{item?.title}</p>
</div> </Link>
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
......
styles/globals.css
body{
font-size: 0.83vw;
color: #666;
}
/* =====Navigation Button=== */ /* =====Navigation Button=== */
.swiperbtn1 { .swiperbtn1 {
top: 50%; top: 50%;
...@@ -54,7 +59,7 @@ ...@@ -54,7 +59,7 @@
/* Heading animation */ /* Heading animation */
.slide-content h2 { .slide-content h2 {
font-size: 42px; font-size: 1.67vw;
font-weight: 400; font-weight: 400;
margin-bottom: 12px; margin-bottom: 12px;
text-transform: uppercase; text-transform: uppercase;
...@@ -92,7 +97,7 @@ ...@@ -92,7 +97,7 @@
} }
.text-btn-row p { .text-btn-row p {
font-size: 16px; font-size: 0.83vw;
line-height: 1.6; line-height: 1.6;
margin: 0; margin: 0;
flex: 1; flex: 1;
...@@ -104,7 +109,7 @@ ...@@ -104,7 +109,7 @@
border: 1px solid #fff; border: 1px solid #fff;
color: #fff; color: #fff;
padding: 12px 28px; padding: 12px 28px;
font-size: 14px; font-size: 0.73vw;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
letter-spacing: 0.5px; letter-spacing: 0.5px;
...@@ -152,7 +157,7 @@ ...@@ -152,7 +157,7 @@
color: #fff; color: #fff;
border: none; border: none;
padding: 12px 28px; padding: 12px 28px;
font-size: 14px; font-size: 0.73vw;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
...@@ -173,7 +178,7 @@ ...@@ -173,7 +178,7 @@
.btn3 { .btn3 {
border: 1px solid #000; border: 1px solid #000;
padding: 12px 28px; padding: 12px 28px;
font-size: 14px; font-size: 0.73vw;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: #fff;
...@@ -187,7 +192,7 @@ ...@@ -187,7 +192,7 @@
.btn4 { .btn4 {
border: 1px solid #000; border: 1px solid #000;
padding: 12px 28px; padding: 12px 28px;
font-size: 14px; font-size: 0.73vw;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
...@@ -426,6 +431,7 @@ input:focus-visible { ...@@ -426,6 +431,7 @@ input:focus-visible {
color: #000; color: #000;
width: auto; width: auto;
padding: 0; padding: 0;
margin-bottom: 0.5rem;
} }
.collections-item { .collections-item {
margin-bottom: 2rem; margin-bottom: 2rem;
...@@ -440,7 +446,9 @@ input:focus-visible { ...@@ -440,7 +446,9 @@ input:focus-visible {
object-fit: cover; object-fit: cover;
} }
.collections-item .title { .collections-item .title {
margin-top: 1rem; margin-top: 0.5rem;
font-size: 1.04vw;
color: #000;
} }
.product-banner { .product-banner {
position: relative; position: relative;
...@@ -538,13 +546,19 @@ aspect-ratio: 16 / 7; ...@@ -538,13 +546,19 @@ aspect-ratio: 16 / 7;
position: relative; position: relative;
height: 450px; height: 450px;
} }
.collectionSwiper .collection-card p{
font-size: 1.04vw;
line-height: 1.04vw;
text-transform: capitalize;
color: #000;
}
.collectionSwiper .collection-card img { .collectionSwiper .collection-card img {
width: 100%; width: 100%;
height: 460px; height: 460px;
object-fit: cover; object-fit: cover;
display: block; display: block;
transition: height 0.4s ease; /* 👈 add this */ transition: height 0.4s ease; /* 👈 add this */
position: absolute; /* position: absolute; */
} }
.h-slider .collectionSwiper .collection-card:hover img { .h-slider .collectionSwiper .collection-card:hover img {
...@@ -559,13 +573,13 @@ aspect-ratio: 16 / 7; ...@@ -559,13 +573,13 @@ aspect-ratio: 16 / 7;
.blog-date { .blog-date {
color: #333; color: #333;
background-color: #f5f5f5; background-color: #f5f5f5;
font-size: 14px; font-size: 0.73vw;
width: fit-content; width: fit-content;
padding: 4px 15px; padding: 4px 15px;
} }
.blog_desc { .blog-content h5{
color: #666666; font-size: 1.04vw;
font-size: 15px; margin: 0.5rem 0 0.5rem 0;
} }
.custom-navbar .dropdown-menu { .custom-navbar .dropdown-menu {
width: 100%; width: 100%;
...@@ -887,6 +901,15 @@ footer li { ...@@ -887,6 +901,15 @@ footer li {
color: #0F0F0F !important; color: #0F0F0F !important;
font-size: 14px; font-size: 14px;
} }
footer a:hover{
font-weight: 700;
color: #000;
}
.custom_container h3{
font-size: 1.25vw;
color: #000;
margin-bottom: 1rem;
}
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
} }
/* ===== Mobile ===== */ /* ===== Mobile ===== */
...@@ -977,6 +1000,24 @@ footer li { ...@@ -977,6 +1000,24 @@ footer li {
} }
/* ===Media query==== */ /* ===Media query==== */
@media (max-width: 767px) { @media (max-width: 767px) {
body{
font-size: 12px;
}
footer a, footer li {
font-size: 12px;
}
.text-btn-row p {
font-size: 12px;
}
.blog-date {
font-size: 12px;
}
.btn1,.btn2,.btn3,.btn4{
font-size: 12px;
}
.collectionSwiper .collection-card p {
font-size: 14px;
}
.about-info-section .luxury-items.option02 { .about-info-section .luxury-items.option02 {
padding: 2rem 0rem 2rem 0rem; padding: 2rem 0rem 2rem 0rem;
} }
...@@ -1107,6 +1148,7 @@ font-size: 12px; ...@@ -1107,6 +1148,7 @@ font-size: 12px;
} }
.blog-section h5 { .blog-section h5 {
font-size: 16px; font-size: 16px;
line-height: 24px;
font-weight: 700; font-weight: 700;
} }
.project-section .swiper { .project-section .swiper {
......
styles/style.css
...@@ -56,9 +56,10 @@ a { ...@@ -56,9 +56,10 @@ a {
} }
p { p {
font-size: calc(16px + (17 - 16) * ((100vw - 320px) / (1920 - 320))); /* font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320))); */
line-height: 1.6; line-height: 1.9;
font-family: Roboto-Regular; font-family: Roboto-Regular;
/* margin-bottom: 0.5rem; */
} }
/* ===== Scrollbar ===== */ /* ===== Scrollbar ===== */
...@@ -107,7 +108,7 @@ p { ...@@ -107,7 +108,7 @@ p {
.gray-text { .gray-text {
color: #666; color: #666;
font-size: 16px; /* font-size: 16px; */
text-transform: capitalize; text-transform: capitalize;
} }
...@@ -355,7 +356,7 @@ footer h6 { ...@@ -355,7 +356,7 @@ footer h6 {
border: none; border: none;
padding: 0; padding: 0;
color: #000; /* adjust to theme */ color: #000; /* adjust to theme */
font-size: 14px; /* font-size: 14px; */
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!