Skip to content

sujata / Akruti-Frontend

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

updated button arrow

1 parent dadc4897
Inline Side-by-side
Showing 18 changed files with 86 additions and 36 deletions
components/Brands/Explore.js
...@@ -20,7 +20,7 @@ const exploreData = [ ...@@ -20,7 +20,7 @@ const exploreData = [
const Explore = () => { const Explore = () => {
return ( return (
<section className="explore-section"> <section className="explore-section mb-5">
<Container className="custom_container"> <Container className="custom_container">
<Row className="text-center justify-content-center"> <Row className="text-center justify-content-center">
<Col md={8}> <Col md={8}>
...@@ -48,7 +48,7 @@ const Explore = () => { ...@@ -48,7 +48,7 @@ const Explore = () => {
<Row> <Row>
<Col> <Col>
<div className="text-center"> <div className="text-center">
<button className="btn3">View More</button> <button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button>
</div> </div>
</Col> </Col>
</Row> </Row>
......
components/Brands/InnerDetailsBrands.js
...@@ -96,7 +96,7 @@ const InnerDetailsBrands = ({ subCategories }) => { ...@@ -96,7 +96,7 @@ const InnerDetailsBrands = ({ subCategories }) => {
<Row> <Row>
<Col> <Col>
<div className="text-center"> <div className="text-center">
<button className="btn3">View More</button> <button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button>
</div> </div>
</Col> </Col>
</Row> </Row>
......
components/Catalogue/InnerDetailsCatalogue.js
...@@ -110,7 +110,7 @@ const InnerDetailsCatalogue = ({ subCategory = "indoor-kitchen" }) => { ...@@ -110,7 +110,7 @@ const InnerDetailsCatalogue = ({ subCategory = "indoor-kitchen" }) => {
<Row> <Row>
<Col> <Col>
<div className="text-center"> <div className="text-center">
<button className="btn3">View More</button> <button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button>
</div> </div>
</Col> </Col>
</Row> </Row>
......
components/Collection/InnerDetails.js
...@@ -71,7 +71,7 @@ const InnerDetails = ({ subCategories }) => { ...@@ -71,7 +71,7 @@ const InnerDetails = ({ subCategories }) => {
<Row> <Row>
<Col> <Col>
<div className="text-center"> <div className="text-center">
<button className="btn3">View More</button> <button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button>
</div> </div>
</Col> </Col>
</Row> </Row>
......
components/Contacts/GetInTouchForm.js
...@@ -109,7 +109,7 @@ const GetInTouchForm = () => { ...@@ -109,7 +109,7 @@ const GetInTouchForm = () => {
<Row> <Row>
<Col className="mb-3"> <Col className="mb-3">
<div className="d-flex gap-3"> <div className="d-flex gap-3">
<button className="btn2">Submit</button> <button className="btn2">Submit <i className="fa-solid fa-arrow-right"></i></button>
</div> </div>
</Col> </Col>
</Row> </Row>
......
container/Home/BlogHome.js
...@@ -6,13 +6,13 @@ import { Col, Container, Row } from "react-bootstrap"; ...@@ -6,13 +6,13 @@ import { Col, Container, Row } from "react-bootstrap";
const BlogHome = () => { const BlogHome = () => {
const rightBlogs = [ const rightBlogs = [
{ {
image: "/image/blog1.png", image: "/image/blogs/02.png",
date: "News | 10.05.25", date: "News | 10.05.25",
title: "Archigraphica with Vela Wall Unit wins the...", title: "Archigraphica with Vela Wall Unit wins the...",
desc: "Archigraphica with Vela Wall Unit, designed by Gabriele Centazzo, has won the Archiproducts Design Award 2025 in the Kitchen category. Following the 2024 recognition for Artematica + New Logica, we confirm ", desc: "Archigraphica with Vela Wall Unit, designed by Gabriele Centazzo, has won the Archiproducts Design Award 2025 in the Kitchen category. Following the 2024 recognition for Artematica + New Logica, we confirm ",
}, },
{ {
image: "/image/blog1.png", image: "/image/blogs/03.png",
date: "News | 04.06.25", date: "News | 04.06.25",
title: "A villa among the olive trees on Lake Garda", title: "A villa among the olive trees on Lake Garda",
desc: "Set on the slopes of Monte Baldo in Torri del Benaco (Verona), this villa opens onto a privileged view of Lake Garda. Contemporary and minimal in character, it establishes a harmonious dialogue with the landscape", desc: "Set on the slopes of Monte Baldo in Torri del Benaco (Verona), this villa opens onto a privileged view of Lake Garda. Contemporary and minimal in character, it establishes a harmonious dialogue with the landscape",
...@@ -34,15 +34,15 @@ const BlogHome = () => { ...@@ -34,15 +34,15 @@ const BlogHome = () => {
<Row className="g-4"> <Row className="g-4">
{/* Left Blog (large) */} {/* Left Blog (large) */}
<Col lg={7} md={12}> <Col lg={6} md={12}>
<div className="blog-large"> <div className="blog-large">
<FadeInStagger direction="right"> <FadeInStagger direction="right">
<Image <Image
src="/image/blog.png" src="/image/blogs/01.png"
alt="About" alt="About"
width={1000} width={1000}
height={400} height={400}
className="img-fluid" className="img-fluid gry-img"
/> />
<div className="d-flex flex-column-reverse flex-md-row align-items-start align-items-md-center justify-content-between mt-2"> <div className="d-flex flex-column-reverse flex-md-row align-items-start align-items-md-center justify-content-between mt-2">
<h5 className="mb-1">Where light meets glass the Artematica kitchen redefines Villa Embassy </h5> <h5 className="mb-1">Where light meets glass the Artematica kitchen redefines Villa Embassy </h5>
...@@ -54,14 +54,14 @@ const BlogHome = () => { ...@@ -54,14 +54,14 @@ const BlogHome = () => {
</p> </p>
<button className="read-more-btn"> <button className="read-more-btn">
Read More Read More
{/* <i className="fa-solid fa-arrow-right"></i> */} <i className="fa-solid fa-arrow-right"></i>
</button> </button>
</FadeInStagger> </FadeInStagger>
</div> </div>
</Col> </Col>
{/* Right Blogs (list) */} {/* Right Blogs (list) */}
<Col lg={5} md={12}> <Col lg={6} md={12}>
<FadeInStagger direction="right"> <FadeInStagger direction="right">
{rightBlogs.map((blog, index) => ( {rightBlogs.map((blog, index) => (
<div <div
...@@ -73,7 +73,7 @@ const BlogHome = () => { ...@@ -73,7 +73,7 @@ const BlogHome = () => {
alt={blog.title} alt={blog.title}
width={350} width={350}
height={400} height={400}
className="blog-img img-fluid" className="blog-img img-fluid gry-img"
/> />
<div className="blog-content ms-md-3 mt-2 mt-md-0"> <div className="blog-content ms-md-3 mt-2 mt-md-0">
...@@ -82,7 +82,7 @@ const BlogHome = () => { ...@@ -82,7 +82,7 @@ const BlogHome = () => {
<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
{/* <i className="fa-solid fa-arrow-right"></i> */} <i className="fa-solid fa-arrow-right"></i>
</button> </button>
</div> </div>
</div> </div>
......
container/Home/Catalogues.js
...@@ -42,7 +42,7 @@ const Catalogues = () => { ...@@ -42,7 +42,7 @@ const Catalogues = () => {
<FadeInStagger direction="top"> <FadeInStagger direction="top">
<Swiper <Swiper
slidesPerView={4} slidesPerView={4}
spaceBetween={30} spaceBetween={60}
navigation={{ navigation={{
nextEl: ".cust-swiper-button-next", nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
...@@ -54,8 +54,8 @@ const Catalogues = () => { ...@@ -54,8 +54,8 @@ const Catalogues = () => {
breakpoints={{ breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 }, 320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 }, 640: { slidesPerView: 2, spaceBetween: 20 },
992: { slidesPerView: 3, spaceBetween: 25 }, 992: { slidesPerView: 3, spaceBetween: 30 },
1200: { slidesPerView: 3, spaceBetween: 30 }, 1200: { slidesPerView: 3, spaceBetween: 60 },
}} }}
> >
{CollectionData.map((item, index) => ( {CollectionData.map((item, index) => (
...@@ -73,7 +73,7 @@ const Catalogues = () => { ...@@ -73,7 +73,7 @@ const Catalogues = () => {
</Swiper> </Swiper>
</FadeInStagger> </FadeInStagger>
<div className="text-center"> <div className="text-center">
<button className="btn3">View More</button> <button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button>
</div> </div>
</Col> </Col>
</Row> </Row>
......
container/Home/Contact.js
...@@ -5,7 +5,7 @@ import { Col, Container, Row } from "react-bootstrap"; ...@@ -5,7 +5,7 @@ import { Col, Container, Row } from "react-bootstrap";
export const Contact = () => { export const Contact = () => {
return ( return (
<> <>
<section className="contact_sec sec_padd"> <section className="contact_sec">
<Container className="custom_container"> <Container className="custom_container">
<Row className="justify-content-end"> <Row className="justify-content-end">
<Col md={5}> <Col md={5}>
...@@ -85,7 +85,7 @@ export const Contact = () => { ...@@ -85,7 +85,7 @@ export const Contact = () => {
<Row> <Row>
<Col className="mb-3"> <Col className="mb-3">
<div className="d-flex gap-3"> <div className="d-flex gap-3">
<button className="btn3">Submit</button> <button className="btn3">Submit <i className="fa-solid fa-arrow-right"></i></button>
</div> </div>
</Col> </Col>
</Row> </Row>
......
container/Home/HomeBanner.js
...@@ -70,7 +70,7 @@ const HomeBanner = () => { ...@@ -70,7 +70,7 @@ const HomeBanner = () => {
<h2>{item.title}</h2> <h2>{item.title}</h2>
<div className="text-btn-row"> <div className="text-btn-row">
<p>{item.description}</p> <p>{item.description}</p>
<button className="btn1">Explore More</button> <button className="btn1">Explore More <i className="fa-solid fa-arrow-right"></i></button>
</div> </div>
</div> </div>
</div> </div>
......
container/Home/Overview.js
...@@ -18,7 +18,7 @@ const Overview = () => { ...@@ -18,7 +18,7 @@ const Overview = () => {
<p className="gray-text">a story of aspiration, design, and purpose. With extensive experience in luxury interiors, we’ve mastered the art of creating bespoke modular kitchens and wardrobes that blend beauty, innovation, and practicality. Our design philosophy is built on thoughtful detailing, precise craftsmanship, and an unwavering commitment to quality.</p> <p className="gray-text">a story of aspiration, design, and purpose. With extensive experience in luxury interiors, we’ve mastered the art of creating bespoke modular kitchens and wardrobes that blend beauty, innovation, and practicality. Our design philosophy is built on thoughtful detailing, precise craftsmanship, and an unwavering commitment to quality.</p>
<p className="gray-text">In collaboration with the renowned Italian brands Valcucine and Rimadesio, we bring the finest global design sensibilities to Indian homes. Each project is a curated experience from the first conversation to the final installation, shaped around our clients’ lifestyles and aspirations. At Akruti Luxe, we go beyond creating interiors; we craft experiences that reflect individuality, celebrate timeless aesthetics, and elevate everyday living.</p> <p className="gray-text">In collaboration with the renowned Italian brands Valcucine and Rimadesio, we bring the finest global design sensibilities to Indian homes. Each project is a curated experience from the first conversation to the final installation, shaped around our clients’ lifestyles and aspirations. At Akruti Luxe, we go beyond creating interiors; we craft experiences that reflect individuality, celebrate timeless aesthetics, and elevate everyday living.</p>
<div className="my-5"> <button className="btn4">Read More</button> </div> <div className="my-5"> <button className="btn4">Read More <i className="fa-solid fa-arrow-right"></i></button> </div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
......
container/Home/ProjectSlider.js
...@@ -140,7 +140,7 @@ const ProjectSlider = () => { ...@@ -140,7 +140,7 @@ const ProjectSlider = () => {
</button> </button>
</div> */} </div> */}
<Row className=""> <Row className="">
<Col className="d-flex justify-content-center" ><button className="btn3">View More</button></Col> <Col className="d-flex justify-content-center" ><button className="btn3">View More <i className="fa-solid fa-arrow-right"></i></button></Col>
</Row> </Row>
</Container> </Container>
......
styles/globals.css
...@@ -107,18 +107,39 @@ ...@@ -107,18 +107,39 @@
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
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;
white-space: nowrap;
display: inline-flex;
align-items: center;
} }
.btn1:hover { .btn1:hover {
background: #fff; background: #fff;
color: #000; color: #000;
transform: translateY(-2px); /* slight lift effect */
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 {
margin-left: 0;
opacity: 0;
transform: translateX(-8px);
max-width: 0;
overflow: hidden;
transition:
opacity 0.3s ease,
transform 0.3s ease,
max-width 0.3s ease,
margin-left 0.3s ease;
}
.btn1:hover i,.btn2:hover i,.btn3:hover i,.btn4:hover i {
opacity: 1;
transform: translateX(0);
max-width: 20px;
margin-left: 0.5rem;
}
.btn2 { .btn2 {
background: #000; background: #000;
...@@ -130,27 +151,30 @@ ...@@ -130,27 +151,30 @@
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
white-space: nowrap; white-space: nowrap;
display: inline-flex;
align-items: center;
transition: background-color 0.3s ease, color 0.3s ease;
} }
.btn2:hover { .btn2:hover {
background: #fff; background: #fff;
border: 1px solid #000;
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;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
background-color: #fff; background-color: #fff;
} white-space: nowrap;
.btn3:hover { display: inline-flex;
background: #000; align-items: center;
color: #fff;
transition: all 0.3s ease;
} }
.btn4 { .btn4 {
border: 1px solid #000; border: 1px solid #000;
...@@ -161,6 +185,10 @@ ...@@ -161,6 +185,10 @@
transition: all 0.3s ease; transition: all 0.3s ease;
white-space: nowrap; white-space: nowrap;
background-color: transparent; background-color: transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
white-space: nowrap;
display: inline-flex;
align-items: center;
} }
.btn4:hover { .btn4:hover {
...@@ -271,6 +299,7 @@ button.cust-swiper-button-next { ...@@ -271,6 +299,7 @@ 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 ;
} }
.contact_sec h2 { .contact_sec h2 {
...@@ -626,6 +655,22 @@ input:focus-visible { ...@@ -626,6 +655,22 @@ input:focus-visible {
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show { .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
color: var(--secondary-color);; 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;
}
.gry-img:hover {
/* Change to full color on hover */
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
}
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
} }
/* ===== Mobile ===== */ /* ===== Mobile ===== */
......
styles/style.css
...@@ -352,6 +352,9 @@ li { ...@@ -352,6 +352,9 @@ li {
.read-more-btn i { .read-more-btn i {
font-size: 14px; font-size: 14px;
transition: transform 0.3s ease; transition: transform 0.3s ease;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
} }
.read-more-btn:hover { .read-more-btn:hover {
...@@ -359,5 +362,7 @@ li { ...@@ -359,5 +362,7 @@ li {
} }
.read-more-btn:hover i { .read-more-btn:hover i {
transform: translateX(4px); /* slide arrow on hover */ /* transform: translateX(4px); slide arrow on hover */
opacity: 1;
transform: translateX(0);
} }
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!