Yusuf-Sabuwala/profen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

meh

Browse Source
This commit is contained in:
Yusuf Sabuwala
2026-07-14 20:19:21 +00:00
parent db9370f916
commit 573a4ae915
52 changed files with 2955 additions and 2366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/sections/Breadcrumb.jsx
View File

@@ -1,9 +1,18 @@
import { Link } from 'react-router-dom'
export default function Breadcrumb({ title, items = [] }) {
export default function Breadcrumb({ title, items = [], bgImage }) {
return (
<div className="breadcumb-banner">
<div className="breadcumb-wrapper" id="breadcumbwrap">
<div
className="breadcumb-wrapper"
id="breadcumbwrap"
style={{
backgroundImage: `url(${bgImage || '/assets/images/breadcumb-bg.jpg'})`,
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover'
}}
>
<div className="container">
<div className="breadcumb-content">
<h1 className="breadcumb-title">{title}</h1>

16
src/components/sections/Footer.jsx
View File

@@ -16,17 +16,17 @@ const CONTACT_INFO = [
]
const FOOTER_SERVICES_1 = [
{ label: 'Electro-Mechanical Works', path: '/service' },
{ label: 'Landscaping &amp; Fencing Works', path: '/service' },
{ label: 'Building Contracting Works', path: '/service' },
{ label: 'Interior &amp; Fit-Out Works', path: '/service' },
{ label: 'Electro-Mechanical Works', path: '/service/electro-mechanical-works' },
{ label: 'Landscaping &amp; Fencing Works', path: '/service/landscaping-fencing-works' },
{ label: 'Building Contracting Works', path: '/service/building-contracting-works' },
{ label: 'Interior &amp; Fit-Out Works', path: '/service/interior-fit-out-works' },
]
const FOOTER_SERVICES_2 = [
{ label: 'Metal Construction &amp; Fabrications', path: '/service' },
{ label: 'Chiller Hot &amp; Cool Solutions', path: '/service' },
{ label: 'Misting Solutions', path: '/service' },
{ label: 'Adiabatic Pre-Cooling System', path: '/service' },
{ label: 'Metal Construction &amp; Fabrications', path: '/service/metal-construction-fabrications' },
{ label: 'Chiller Hot &amp; Cool Solutions', path: '/service/chiller-hot-cool-solutions' },
{ label: 'Misting Solutions', path: '/service/misting-solutions' },
{ label: 'Adiabatic Pre-Cooling System', path: '/service/adiabatic-pre-cooling-system' },
]
const FOOTER_LINKS = [

82
src/components/sections/Header.jsx
View File

@@ -1,5 +1,5 @@
import { useLocation, Link } from 'react-router-dom'
import { useRef } from 'react'
import { useRef, useState } from 'react'
import { useNavFix } from '../../hooks/useNavFix'
const NAV_ITEMS = [
@@ -10,9 +10,23 @@ const NAV_ITEMS = [
{ label: 'CONTACT', path: '/contact' },
]
const SERVICE_SUBITEMS = [
{ label: 'Adiabatic Pre-Cooling System', slug: 'adiabatic-pre-cooling-system' },
{ label: 'Promist Misting Solutions', slug: 'misting-solutions' },
{ label: 'Chiller Hot & Cool Solution', slug: 'chiller-hot-cool-solutions' },
{ label: 'Building Mngmt System', slug: 'building-management-system' },
{ label: 'Interior & Fit-Out Work', slug: 'interior-fit-out-works' },
{ label: 'Building Contracting Works', slug: 'building-contracting-works' },
{ label: 'Metal Construction & Fabrications', slug: 'metal-construction-fabrications' },
{ label: 'Electro-Mechanical Works', slug: 'electro-mechanical-works' },
]
const ELEMENTOR_945_CSS = ".elementor-945 .elementor-element.elementor-element-1697af5{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-945 .elementor-element.elementor-element-a628d9c .header-top{background:#ED1C24;}.elementor-945 .elementor-element.elementor-element-a628d9c .main-menu>ul>li>a, .elementor-945 .elementor-element.elementor-element-a628d9c .main-menu ul.sub-menu li a{font-size:15px;font-weight:600;}"
export default function Header() {
const { pathname } = useLocation()
const ref = useRef(null)
const [mobileServicesOpen, setMobileServicesOpen] = useState(false)
useNavFix(ref)
const isActive = (path) => {
@@ -22,9 +36,7 @@ export default function Header() {
return (
<header ref={ref}>
<style id="elementor-post-945">{`
.elementor-945 .elementor-element.elementor-element-1697af5{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-945 .elementor-element.elementor-element-a628d9c .header-top{background:#ED1C24;}.elementor-945 .elementor-element.elementor-element-a628d9c .main-menu>ul>li>a, .elementor-945 .elementor-element.elementor-element-a628d9c .main-menu ul.sub-menu li a{font-size:15px;font-weight:600;}
`}</style>
<style id="elementor-post-945" dangerouslySetInnerHTML={{ __html: ELEMENTOR_945_CSS }}></style>
<div className="elementor elementor-945" data-elementor-id="945" data-elementor-type="wp-post">
<div className="elementor-element elementor-element-1697af5 e-con-full e-flex e-con e-parent" data-e-type="container" data-element_type="container" data-id="1697af5">
<div className="elementor-element elementor-element-a628d9c elementor-widget elementor-widget-rakarheader" data-e-type="widget" data-element_type="widget" data-id="a628d9c" data-widget_type="rakarheader.default">
@@ -39,11 +51,30 @@ export default function Header() {
</div>
<div className="th-mobile-menu">
<ul>
{NAV_ITEMS.map(item => (
<li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page ${isActive(item.path) ? 'current-menu-item' : ''}`}>
<Link to={item.path} {...(isActive(item.path) ? { 'aria-current': 'page' } : {})}>{item.label}</Link>
</li>
))}
{NAV_ITEMS.map(item => {
if (item.label === 'SERVICES') {
return (
<li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children${mobileServicesOpen ? ' th-active' : ''}${pathname.startsWith('/service') ? ' current-menu-item' : ''}`}>
<a href="/service" onClick={(e) => { e.preventDefault(); setMobileServicesOpen(o => !o) }}>
SERVICES
<span className="th-mean-expand"></span>
</a>
<ul className="sub-menu" style={{ display: mobileServicesOpen ? 'block' : 'none' }}>
{SERVICE_SUBITEMS.map(s => (
<li key={s.slug} className={`menu-item${pathname === `/service/${s.slug}` ? ' current-menu-item' : ''}`}>
<Link to={`/service/${s.slug}`}>{s.label}</Link>
</li>
))}
</ul>
</li>
)
}
return (
<li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page ${isActive(item.path) ? 'current-menu-item' : ''}`}>
<Link to={item.path} {...(isActive(item.path) ? { 'aria-current': 'page' } : {})}>{item.label}</Link>
</li>
)
})}
</ul>
</div>
</div>
@@ -100,20 +131,39 @@ export default function Header() {
</div>
<nav className="main-menu d-none d-lg-inline-block">
<ul className="rakar-menu">
{NAV_ITEMS.map(item => (
<li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page ${isActive(item.path) ? 'current-menu-item' : ''}`}>
<Link to={item.path} {...(isActive(item.path) ? { 'aria-current': 'page' } : {})}>{item.label}</Link>
</li>
))}
{NAV_ITEMS.map(item => {
if (item.label === 'SERVICES') {
const isServiceActive = pathname.startsWith('/service')
return (
<li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children${isServiceActive ? ' current-menu-item' : ''}`}>
<a href="/service" onClick={e => e.preventDefault()}>SERVICES</a>
<ul className="sub-menu">
{SERVICE_SUBITEMS.map(s => (
<li key={s.slug} className={`menu-item${pathname === `/service/${s.slug}` ? ' current-menu-item' : ''}`}>
<Link to={`/service/${s.slug}`}>{s.label}</Link>
</li>
))}
</ul>
</li>
)
}
return (
<li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page ${isActive(item.path) ? 'current-menu-item' : ''}`}>
<Link to={item.path} {...(isActive(item.path) ? { 'aria-current': 'page' } : {})}>{item.label}</Link>
</li>
)
})}
</ul>
</nav>
<button className="simple-icon searchBoxToggler d-none d-lg-inline-block" type="button"><i className="far fa-search"></i></button>
<button className="th-menu-toggle d-block d-lg-none" type="button"><i className="far fa-bars"></i></button>
</div>
</div>
<div className="col-auto d-none d-xl-block">
<div className="header-button">
<a className="th-btn rounded-12 style3 th_btn" href="/contact">Get A Quote<i className="fas fa-arrow-right ms-2"></i></a>
<a className="th-btn rounded-12 th_btn promist-btn" href="/" target="_blank" rel="noopener noreferrer" style={{ background: '#fff', border: '1px solid #e0e0e0', padding: '12px 28px', display: 'inline-flex', alignItems: 'center', gap: '10px' }}>
<img src="/assets/images/Promist-Logo-1.png" alt="Promist" style={{ height: '32px' }} className="promist-logo" />
<i className="fas fa-arrow-right" style={{ fontSize: '14px' }}></i>
</a>
</div>
</div>
</div>

26
src/components/sections/ProjectFilterGrid.jsx
View File

@@ -1,7 +1,8 @@
import { useState } from 'react'
import { Link } from 'react-router-dom'
const FILTERS = ['All', 'Misting', 'Pro-Sheild Adiabatic Cooling', 'Electrical Renovation', 'Swimming pool', 'MEP']
const FILTER_CLASSES = { 'All': '*', 'Misting': '.cat1', 'Pro-Sheild Adiabatic Cooling': '.cat3', 'Electrical Renovation': '.cat2', 'Swimming pool': '.cat4', 'MEP': '.cat5' }
const FILTER_CATEGORIES = { 'All': null, 'Misting': 'cat1', 'Pro-Sheild Adiabatic Cooling': 'cat3', 'Electrical Renovation': 'cat2', 'Swimming pool': 'cat4', 'MEP': 'cat5' }
const PROJECTS = [
{ category: 'cat1', image: '/assets/images/PIC-3.jpg', alt: 'PIC 3', title: 'Outdoor Misting', description: 'Our outdoor misting project includes the design, installation, and maintenance of a state-of-the-art misting system tailored to your specific outdoor space.' },
@@ -13,6 +14,12 @@ const PROJECTS = [
]
export default function ProjectFilterGrid() {
const [activeFilter, setActiveFilter] = useState('All')
const filtered = activeFilter === 'All'
? PROJECTS
: PROJECTS.filter(p => p.category === FILTER_CATEGORIES[activeFilter])
return (
<div className="rakar-fluid">
<div className="builder-page-wrapper">
@@ -21,14 +28,19 @@ export default function ProjectFilterGrid() {
<div className="e-con-inner">
<div className="elementor-element elementor-element-860beb9 elementor-widget elementor-widget-rakarprojectfilter" data-id="860beb9" data-element_type="widget" data-e-type="widget" data-widget_type="rakarprojectfilter.default">
<div className="elementor-widget-container">
<div className="filter-menu indicator-active filter-menu-active">
{FILTERS.map((f, i) => (
<button key={f} data-filter={FILTER_CLASSES[f]} className={`tab-btn${i === 0 ? ' active' : ''}`} type="button">{f}</button>
<div className="filter-menu indicator-active">
{FILTERS.map((f) => (
<button
key={f}
onClick={() => setActiveFilter(f)}
className={`tab-btn${f === activeFilter ? ' active' : ''}`}
type="button"
>{f}</button>
))}
</div>
<div className="row gy-4 filter-active">
{PROJECTS.map((p, i) => (
<div key={i} className={`col-xxl-3 col-lg-4 col-md-6 filter-item ${p.category}`}>
<div className="row gy-4">
{filtered.map((p, i) => (
<div key={i} className="col-xxl-3 col-lg-4 col-md-6">
<div className="project-grid">
<div className="box-img"><img decoding="async" src={p.image} alt={p.alt} /></div>
<div className="box-content">

37
src/components/sections/ServiceGridSection.jsx
View File

@@ -1,37 +0,0 @@
import { Link } from "react-router-dom"
import { SERVICE_CARDS } from "../../data/service-grid-data"
export default function ServiceGridSection() {
return (
<div
className="elementor-element elementor-element-97218ac elementor-widget elementor-widget-rakarservice"
data-id="97218ac"
data-element_type="widget"
data-e-type="widget"
data-widget_type="rakarservice.default"
>
<div className="elementor-widget-container">
<div className="row gy-4">
{SERVICE_CARDS.map((card) => (
<div key={card.number} className="col-xxl-3 col-lg-4 col-md-6">
<div className="service-card">
<div className="box-number">{card.number}</div>
<div className="box-icon">
<img decoding="async" src={card.icon} alt={card.title} />
</div>
<p className="box-subtitle">{card.subtitle}</p>
<h3 className="box-title">
<Link to={`/service/${card.slug}`}>{card.title}</Link>
</h3>
<p className="box-text">{card.text}</p>
<Link to={`/service/${card.slug}`} className="th-btn btn-sm th_btn">
Read More<i className="far fa-arrow-right ms-2"></i>
</Link>
</div>
</div>
))}
</div>
</div>
</div>
)
}