Skip to content

sujata / Akruti-Frontend

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

updated

1 parent 3e2c7270
Expand all
Inline Side-by-side
Showing 14 changed files with 51 additions and 41 deletions
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-2 ${className}`}> <div className={`headings ${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-2 ${className}`}> <div className={`headings ${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) => (
......
components/Layout/Footer.js
...@@ -6,7 +6,7 @@ import Link from "next/link"; ...@@ -6,7 +6,7 @@ import Link from "next/link";
const Footer = () => { const Footer = () => {
return ( return (
<footer className="footer"> <footer className="footer">
<Container className="custom_container py-5"> <Container className="custom_container sec_padd">
<Row className="gy-4 justify-content-between"> <Row className="gy-4 justify-content-between">
{/* Left - Logo + Contact Info */} {/* Left - Logo + Contact Info */}
<Col lg={3} md={6} className="footer-cotent"> <Col lg={3} md={6} className="footer-cotent">
......
components/Layout/Header.js
...@@ -197,12 +197,12 @@ const showLevel3 = collectionL2?.products?.length > 0; ...@@ -197,12 +197,12 @@ const showLevel3 = collectionL2?.products?.length > 0;
<Image <Image
src="/image/logo.svg" src="/image/logo.svg"
alt="logo" alt="logo"
width={140} width={166}
height={60} height={32}
className="img-fluid" className="img-fluid"
/> />
</Navbar.Brand> </Navbar.Brand>
<Nav className="d-none d-lg-flex ms-4 gap-4"> <Nav className="d-none d-lg-flex menu-desktop gap-3">
<Nav.Item <Nav.Item
className="nav-item dropdown-custom" className="nav-item dropdown-custom"
onMouseEnter={() => { onMouseEnter={() => {
......
container/Home/BlogHome.js
...@@ -9,13 +9,13 @@ const BlogHome = () => { ...@@ -9,13 +9,13 @@ const BlogHome = () => {
image: "/image/blogs/02.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/blogs/03.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...",
}, },
]; ];
...@@ -23,7 +23,7 @@ const BlogHome = () => { ...@@ -23,7 +23,7 @@ const BlogHome = () => {
<section className="blog-section sec_padd"> <section className="blog-section sec_padd">
<Container className="custom_container"> <Container className="custom_container">
{/* Heading Row */} {/* Heading Row */}
<Row className="align-items-center justify-content-between mb-4"> <Row className="align-items-center justify-content-between mb-2">
<Col lg={8} md={8}> <Col lg={8} md={8}>
<h2 className="heading mb-2">Blogs / News</h2> <h2 className="heading mb-2">Blogs / News</h2>
</Col> </Col>
...@@ -44,12 +44,12 @@ const BlogHome = () => { ...@@ -44,12 +44,12 @@ const BlogHome = () => {
height={400} height={400}
className="img-fluid gry-img" 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-3">
<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>
<p className="blog-date mb-1">Blogs | 07.04.25</p> <p className="blog-date mb-1">Blogs | 07.04.25</p>
</div> </div>
<p className="pt-2 blog_desc"> <p className=" blog_desc">
In the Embassy 821 villa in Bangalore, design becomes an immersive and harmonious experience. Spanning 6,200 square meters, designers Farah Ahmed Mathias and Dhaval Shellugar , from Fadd Studio, have crafted a visual... In the Embassy 821 villa in Bangalore, design becomes an immersive and harmonious experience. Spanning 6,200 square meters, designers Farah Ahmed Mathias and Dhaval Shellugar , from Fadd Studio, have crafted a visual...
</p> </p>
<button className="read-more-btn"> <button className="read-more-btn">
...@@ -65,9 +65,11 @@ const BlogHome = () => { ...@@ -65,9 +65,11 @@ const BlogHome = () => {
<FadeInStagger direction="right"> <FadeInStagger direction="right">
{rightBlogs.map((blog, index) => ( {rightBlogs.map((blog, index) => (
<div <div
key={index} key={index}
className="d-flex flex-column flex-md-row mb-4" className={`d-flex flex-column flex-md-row ${
> index !== rightBlogs.length - 1 ? "mb-4" : ""
}`}
>
<Image <Image
src={blog.image} src={blog.image}
alt={blog.title} alt={blog.title}
...@@ -77,7 +79,7 @@ const BlogHome = () => { ...@@ -77,7 +79,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">{blog.date}</p>
<h5 className="">{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">
...@@ -86,6 +88,7 @@ const BlogHome = () => { ...@@ -86,6 +88,7 @@ const BlogHome = () => {
</button> </button>
</div> </div>
</div> </div>
))} ))}
</FadeInStagger> </FadeInStagger>
</Col> </Col>
......
container/Home/Catalogues.js
...@@ -74,13 +74,13 @@ const Catalogues = ({cataloguesData}) => { ...@@ -74,13 +74,13 @@ const Catalogues = ({cataloguesData}) => {
))} ))}
</Swiper> </Swiper>
</FadeInStagger> </FadeInStagger>
<div className="text-center mt-5"> <div className="text-center">
<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>
</Row> </Row>
</Container> </Container>
<div className="position-absolute swiperbtn1 d-flex d-nones justify-content-between px-5 align-items-center w-100 "> <div className="position-absolute swiperbtn1 d-flex d-nones justify-content-between menu-desktop-full align-items-center w-100 ">
<button className="cust-swiper-button-prev"> <button className="cust-swiper-button-prev">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
......
container/Home/Collection.js
...@@ -24,7 +24,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -24,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"> <Row className="align-items-start 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} />
...@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => { ...@@ -35,7 +35,7 @@ const CollectionSlider = ({CollectionData}) => {
</div> </div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
<Col lg={4} md={4} className="d-flex justify-content-end pe-0 pe-md-5 mt-2 mb-3 mb-md-0"> <Col lg={4} md={4} className="d-flex justify-content-end mt-2 mb-3 mb-md-0 head-arrow-right">
<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
......
container/Home/Contact.js
...@@ -68,7 +68,7 @@ export const Contact = () => { ...@@ -68,7 +68,7 @@ export const Contact = () => {
<section className="contact_sec"> <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={4}>
<div className=""> <div className="">
<FadeInStagger direction="top"> <FadeInStagger direction="top">
<h2 className="heading">Let’s Connect</h2> <h2 className="heading">Let’s Connect</h2>
...@@ -133,7 +133,7 @@ export const Contact = () => { ...@@ -133,7 +133,7 @@ export const Contact = () => {
<div className="mb-1">Message</div> <div className="mb-1">Message</div>
<div> <div>
<textarea <textarea
rows="5" rows="4"
type="text" type="text"
placeholder="Type here" placeholder="Type here"
name="name" name="name"
......
container/Home/HomeBanner.js
...@@ -53,12 +53,13 @@ const HomeBanner = ({banner}) => { ...@@ -53,12 +53,13 @@ const HomeBanner = ({banner}) => {
prevEl: ".cust-swiper-button-prev", prevEl: ".cust-swiper-button-prev",
}} }}
pagination={{ clickable: true }} pagination={{ clickable: true }}
autoplay={{ delay: 5000 }} // autoplay={false}
autoplay={{ delay: 5000, disableOnInteraction: false, }}
loop loop
modules={[Navigation, Pagination, Autoplay]} modules={[Navigation, Pagination, Autoplay]}
className="homeBannerSwiper" className="homeBannerSwiper"
> >
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between px-5 align-items-center w-100"> <div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-md-between wrapper-full align-items-center w-100">
<SwiperBtn /> <SwiperBtn />
</div> </div>
...@@ -74,7 +75,7 @@ const HomeBanner = ({banner}) => { ...@@ -74,7 +75,7 @@ const HomeBanner = ({banner}) => {
<div className="slide-content"> <div className="slide-content">
<h2>{item.title}</h2> <h2>{item.title}</h2>
<div className="text-btn-row"> <div className="text-btn-row">
<div dangerouslySetInnerHTML={{__html:item?.description}}></div> <div className="banner-title" dangerouslySetInnerHTML={{__html:item?.description}}></div>
<Link href={item?.url || "#"} className="btn1">Explore More <i className="fa-solid fa-arrow-right"></i></Link> <Link href={item?.url || "#"} className="btn1">Explore More <i className="fa-solid fa-arrow-right"></i></Link>
</div> </div>
</div> </div>
......
container/Home/Overview.js
...@@ -12,14 +12,14 @@ const Overview = ({aboutData}) => { ...@@ -12,14 +12,14 @@ const Overview = ({aboutData}) => {
<Container className="custom_container"> <Container className="custom_container">
{/* Make row full height and align items center */} {/* Make row full height and align items center */}
<Row className="align-items-center"> <Row className="align-items-center">
<Col md={7} className="d-flex flex-column justify-content-center"> <Col md={7} className="d-flex flex-column justify-content-center pe-0 pe-md-5">
<Heading el="h2" heading={aboutData?.title} /> <Heading el="h2" heading={aboutData?.title} />
<FadeInStagger direction="left"> <FadeInStagger direction="left">
{/* <h2 className="heading mb-2">About</h2> */} {/* <h2 className="heading mb-2">About</h2> */}
<div dangerouslySetInnerHTML={{__html: aboutData?.description}}></div> <div dangerouslySetInnerHTML={{__html: aboutData?.description}}></div>
<div className="my-5"> <Link href={aboutData?.readMoreUrl || "#"} className="btn4">Read More <i className="fa-solid fa-arrow-right"></i></Link> </div> <div className="my-4"> <Link href={aboutData?.readMoreUrl || "#"} className="btn4">Read More <i className="fa-solid fa-arrow-right"></i></Link> </div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
......
container/Home/ProjectSlider.js
...@@ -22,7 +22,7 @@ const ProjectSlider = ({projectData}) => { ...@@ -22,7 +22,7 @@ const ProjectSlider = ({projectData}) => {
const nextRef = useRef(null); const nextRef = useRef(null);
return ( return (
<div className="project-section pt-5 position-relative"> <div className="project-section position-relative">
<Container className="custom_container"> <Container className="custom_container">
{/* Heading */} {/* Heading */}
<Row className="text-md-center mb-4"> <Row className="text-md-center mb-4">
...@@ -30,7 +30,7 @@ const ProjectSlider = ({projectData}) => { ...@@ -30,7 +30,7 @@ const ProjectSlider = ({projectData}) => {
<FadeInStagger direction="top"> <FadeInStagger direction="top">
<Heading el="h2" heading={projectData?.title} /> <Heading el="h2" heading={projectData?.title} />
{/* <h2 className="heading mb-2">Projects</h2> */} {/* <h2 className="heading mb-2">Projects</h2> */}
<div dangerouslySetInnerHTML={{__html:projectData?.description}}></div> <div className="custome-m-0" dangerouslySetInnerHTML={{__html:projectData?.description}}></div>
</FadeInStagger> </FadeInStagger>
</Col> </Col>
</Row> </Row>
......
container/Home/Video.js
...@@ -7,23 +7,28 @@ const Video = ({video}) => { ...@@ -7,23 +7,28 @@ const Video = ({video}) => {
const videoRef = useRef(null); const videoRef = useRef(null);
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
useEffect(() => { useEffect(() => {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
setIsVisible(entry.isIntersecting); if (entry.isIntersecting) {
}, setIsVisible(true);
{ threshold: 0.5 }
);
if (videoRef.current) observer.observe(videoRef.current); // 👇 Stop observing after first visibility
observer.unobserve(entry.target);
}
},
{ threshold: 0.5 }
);
if (videoRef.current) observer.observe(videoRef.current);
return () => { return () => {
if (videoRef.current) observer.unobserve(videoRef.current); if (videoRef.current) observer.unobserve(videoRef.current);
}; };
}, []); }, []);
return ( return (
<section className="video_sec sec_padd"> <section className="video_sec">
<div className="custom_containers"> <div className="custom_containers">
<video <video
ref={videoRef} ref={videoRef}
......
public/image/logo.svg
This diff could not be displayed because it is too large.
styles/style.css
...@@ -59,6 +59,7 @@ p { ...@@ -59,6 +59,7 @@ p {
/* font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320))); */ /* font-size: calc(16px + (16 - 16) * ((100vw - 320px) / (1920 - 320))); */
line-height: 1.9; line-height: 1.9;
font-family: Roboto-Regular; font-family: Roboto-Regular;
margin-bottom: 0.8rem;
/* margin-bottom: 0.5rem; */ /* margin-bottom: 0.5rem; */
} }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!