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 = [
const Explore = () => {
return (
<section className="explore-section">
<section className="explore-section mb-5">
<Container className="custom_container">
<Row className="text-center justify-content-center">
<Col md={8}>
......@@ -48,7 +48,7 @@ const Explore = () => {
<Row>
<Col>
<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>
</Col>
</Row>
......
components/Brands/InnerDetailsBrands.js
......@@ -96,7 +96,7 @@ const InnerDetailsBrands = ({ subCategories }) => {
<Row>
<Col>
<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>
</Col>
</Row>
......
components/Catalogue/InnerDetailsCatalogue.js
......@@ -110,7 +110,7 @@ const InnerDetailsCatalogue = ({ subCategory = "indoor-kitchen" }) => {
<Row>
<Col>
<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>
</Col>
</Row>
......
components/Collection/InnerDetails.js
......@@ -71,7 +71,7 @@ const InnerDetails = ({ subCategories }) => {
<Row>
<Col>
<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>
</Col>
</Row>
......
components/Contacts/GetInTouchForm.js
......@@ -109,7 +109,7 @@ const GetInTouchForm = () => {
<Row>
<Col className="mb-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>
</Col>
</Row>
......
container/Home/BlogHome.js
......@@ -6,13 +6,13 @@ import { Col, Container, Row } from "react-bootstrap";
const BlogHome = () => {
const rightBlogs = [
{
image: "/image/blog1.png",
image: "/image/blogs/02.png",
date: "News | 10.05.25",
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 ",
},
{
image: "/image/blog1.png",
image: "/image/blogs/03.png",
date: "News | 04.06.25",
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",
......@@ -34,15 +34,15 @@ const BlogHome = () => {
<Row className="g-4">
{/* Left Blog (large) */}
<Col lg={7} md={12}>
<Col lg={6} md={12}>
<div className="blog-large">
<FadeInStagger direction="right">
<Image
src="/image/blog.png"
src="/image/blogs/01.png"
alt="About"
width={1000}
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">
<h5 className="mb-1">Where light meets glass the Artematica kitchen redefines Villa Embassy </h5>
......@@ -54,14 +54,14 @@ const BlogHome = () => {
</p>
<button className="read-more-btn">
Read More
{/* <i className="fa-solid fa-arrow-right"></i> */}
<i className="fa-solid fa-arrow-right"></i>
</button>
</FadeInStagger>
</div>
</Col>
{/* Right Blogs (list) */}
<Col lg={5} md={12}>
<Col lg={6} md={12}>
<FadeInStagger direction="right">
{rightBlogs.map((blog, index) => (
<div
......@@ -73,7 +73,7 @@ const BlogHome = () => {
alt={blog.title}
width={350}
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">
......@@ -82,7 +82,7 @@ const BlogHome = () => {
<p className="blog_desc">{blog.desc}</p>
<button className="read-more-btn">
Read More
{/* <i className="fa-solid fa-arrow-right"></i> */}
<i className="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
......
container/Home/Catalogues.js
......@@ -42,7 +42,7 @@ const Catalogues = () => {
<FadeInStagger direction="top">
<Swiper
slidesPerView={4}
spaceBetween={30}
spaceBetween={60}
navigation={{
nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev",
......@@ -54,8 +54,8 @@ const Catalogues = () => {
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 },
992: { slidesPerView: 3, spaceBetween: 25 },
1200: { slidesPerView: 3, spaceBetween: 30 },
992: { slidesPerView: 3, spaceBetween: 30 },
1200: { slidesPerView: 3, spaceBetween: 60 },
}}
>
{CollectionData.map((item, index) => (
......@@ -73,7 +73,7 @@ const Catalogues = () => {
</Swiper>
</FadeInStagger>
<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>
</Col>
</Row>
......
container/Home/Contact.js
......@@ -5,7 +5,7 @@ import { Col, Container, Row } from "react-bootstrap";
export const Contact = () => {
return (
<>
<section className="contact_sec sec_padd">
<section className="contact_sec">
<Container className="custom_container">
<Row className="justify-content-end">
<Col md={5}>
......@@ -85,7 +85,7 @@ export const Contact = () => {
<Row>
<Col className="mb-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>
</Col>
</Row>
......
container/Home/HomeBanner.js
......@@ -70,7 +70,7 @@ const HomeBanner = () => {
<h2>{item.title}</h2>
<div className="text-btn-row">
<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>
......
container/Home/Overview.js
......@@ -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">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>
</Col>
......
container/Home/ProjectSlider.js
......@@ -140,7 +140,7 @@ const ProjectSlider = () => {
</button>
</div> */}
<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>
</Container>
......
styles/globals.css
......@@ -107,18 +107,39 @@
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
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;
align-items: center;
}
.btn1:hover {
background: #fff;
color: #000;
transform: translateY(-2px); /* slight lift effect */
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 {
background: #000;
......@@ -130,27 +151,30 @@
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
display: inline-flex;
align-items: center;
transition: background-color 0.3s ease, color 0.3s ease;
}
.btn2:hover {
background: #fff;
border: 1px solid #000;
color: #000;
}
.btn3 {
border: 1px solid #000;
border: 1px solid #000;
padding: 12px 28px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
background-color: #fff;
}
white-space: nowrap;
.btn3:hover {
background: #000;
color: #fff;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.btn4 {
border: 1px solid #000;
......@@ -161,6 +185,10 @@
transition: all 0.3s ease;
white-space: nowrap;
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 {
......@@ -271,6 +299,7 @@ button.cust-swiper-button-next {
.contact_sec {
background: url(../public/image/getintouch.png) no-repeat center;
color: #fff;
padding: 2.5vw 0 ;
}
.contact_sec h2 {
......@@ -626,6 +655,22 @@ input:focus-visible {
.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;
}
.gry-img:hover {
/* Change to full color on hover */
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
}
@media only screen and (max-width: 1023px) {
}
/* ===== Mobile ===== */
......
styles/style.css
......@@ -352,6 +352,9 @@ li {
.read-more-btn i {
font-size: 14px;
transition: transform 0.3s ease;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.read-more-btn:hover {
......@@ -359,5 +362,7 @@ li {
}
.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!