From 037922795a35d95b1a4b770c1af3e5fa72457f15 Mon Sep 17 00:00:00 2001 From: yusuf0279 Date: Fri, 7 Aug 2026 17:19:38 +0000 Subject: [PATCH] final --- Dockerfile | 14 ++ deploy.yml | 13 +- .../wp-content/themes/rakar/assets/js/main.js | 2 + src/components/home/HomeHero.jsx | 6 +- src/components/home/HomeServicesSection.jsx | 37 ++- src/components/sections/Footer.jsx | 4 + src/components/sections/Header.jsx | 18 +- src/css/dynamic.css | 214 +++++++++++------- 8 files changed, 187 insertions(+), 121 deletions(-) create mode 100644 Dockerfile diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..86f818f --- /dev/null +++ b/Dockerfile @@ -0,0 +1,14 @@ +FROM node:22-alpine AS build +WORKDIR /app +COPY package*.json ./ +RUN npm ci +COPY . . +RUN npm run build + +FROM node:22-alpine +WORKDIR /app +COPY --from=build /app/dist ./dist +RUN npm i -g serve +EXPOSE 3000 +ENV NODE_ENV=production +CMD ["serve", "-s", "dist", "-l", "3000"] diff --git a/deploy.yml b/deploy.yml index ca5497a..01399a5 100644 --- a/deploy.yml +++ b/deploy.yml @@ -1,4 +1,9 @@ -name: profen -type: node -start: npm run build && npx --yes -- serve -s dist -l $PORT -dev: ./node_modules/.bin/vite --port $PORT --host +app: profen +stack: dockerfile +build: + context: . +ports: + - container: 3000 + host: 0 +health: + path: / diff --git a/public/wp-content/themes/rakar/assets/js/main.js b/public/wp-content/themes/rakar/assets/js/main.js index 7a60826..a507bcf 100644 --- a/public/wp-content/themes/rakar/assets/js/main.js +++ b/public/wp-content/themes/rakar/assets/js/main.js @@ -471,6 +471,8 @@ function rakar_content_load_scripts() { // Window Load $(window).on('load', function () { + if (window.__rakarInit) return; + window.__rakarInit = true; rakar_content_load_scripts(); }); diff --git a/src/components/home/HomeHero.jsx b/src/components/home/HomeHero.jsx index e99be63..321d963 100644 --- a/src/components/home/HomeHero.jsx +++ b/src/components/home/HomeHero.jsx @@ -5,7 +5,7 @@ export default function HomeHero() {
-
+
Welcome To Profen @@ -22,7 +22,7 @@ export default function HomeHero() {
-
+
Welcome To Profen @@ -39,7 +39,7 @@ export default function HomeHero() {
-
+
Welcome To Profen diff --git a/src/components/home/HomeServicesSection.jsx b/src/components/home/HomeServicesSection.jsx index 5126dac..515aed4 100644 --- a/src/components/home/HomeServicesSection.jsx +++ b/src/components/home/HomeServicesSection.jsx @@ -14,19 +14,24 @@ const SERVICES = [ export default function HomeServicesSection() { return (
-
+
-
-
-
- View the service -
-
-
{SERVICES.map((s) => ( -
+
- {s.title} -
+
+ {s.title} +

{s.external ? ( diff --git a/src/components/sections/Footer.jsx b/src/components/sections/Footer.jsx index decf381..1f54007 100644 --- a/src/components/sections/Footer.jsx +++ b/src/components/sections/Footer.jsx @@ -97,6 +97,9 @@ export default function Footer() { max-width:none !important; width:100% !important; } + .pf-footer .th-widget-about{ + max-width:none !important; + } /* ── FOOTER MOBILE RESPONSIVE ── */ @media (max-width: 991px){ .pf-footer .pf-contact-divider{ display:none !important; } @@ -173,6 +176,7 @@ export default function Footer() {

Copyright 2026 Profen Engineering LLC. All Rights Reserved.

+

Maintained and built by OpenXpert Solutions LLC.

diff --git a/src/components/sections/Header.jsx b/src/components/sections/Header.jsx index 035b4d4..3f5bd6f 100644 --- a/src/components/sections/Header.jsx +++ b/src/components/sections/Header.jsx @@ -55,7 +55,7 @@ export default function Header() { if (item.label === 'SERVICES') { return (
  • - { e.preventDefault(); setMobileServicesOpen(o => !o) }}> + { e.preventDefault(); setMobileServicesOpen(o => !o) }}> SERVICES @@ -125,13 +125,14 @@ export default function Header() {
    - logo_pe Rd Wh 70 + logo Pe Rd Wh 70 + logo_pe new bk 70
    - logo_pe new wh 70 + logo_pe new bk 70
    diff --git a/src/css/dynamic.css b/src/css/dynamic.css index d601535..37c91fd 100644 --- a/src/css/dynamic.css +++ b/src/css/dynamic.css @@ -22,7 +22,10 @@ img { max-width: 100%; height: auto; } .breadcumb-wrapper{background-repeat:no-repeat;background-position:center center;background-image:url('/assets/images/breadcumb-bg.jpg');background-size:cover;} .hero-inner{position:relative;background-color:var(--brand-dark, #101840);min-height:640px;} .hero-5 .hero-inner{min-height:720px;} -.hero-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 100%);z-index:1;pointer-events:none;} +.hero-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.15) 100%);z-index:1;pointer-events:none;} +.hero-promist::before{background:linear-gradient(90deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.08) 100%)!important;} +.hero-heating::before{background:linear-gradient(90deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.08) 100%)!important;} +.hero-ac::before{background:linear-gradient(90deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.25) 100%)!important;} .hero-inner .container{position:relative;z-index:2;} .hero-style5 .sub-title2.sub{color:#fff !important;} .hero-style5 .hero-title,.hero-style5 .hero-text{color:#fff !important;} @@ -64,12 +67,51 @@ img { max-width: 100%; height: auto; } color: #fff; } -.promist-btn { justify-content: center; } -.promist-btn .promist-logo { transition: margin 0.3s; } -.promist-btn .fa-arrow-right { opacity: 0; transition: opacity 0.3s; } -.promist-btn:hover { background-color: #101840 !important; border-color: #101840 !important; } -.promist-btn:hover .promist-logo { margin-right: 8px; } -.promist-btn:hover .fa-arrow-right { opacity: 1; } +/* ── NAVY CTA BUTTON (header) ── */ +.promist-btn { + justify-content: center; + display: inline-flex; + align-items: center; + gap: 0; /* override base gap so logo is perfectly centered at rest */ + background-color: #ffffff; + color: #101840; + border: 2px solid transparent; + border-radius: 30px; + padding: 15px 15px; + position: relative; + font-family: var(--title-font); + font-size: 17px; + font-weight: 600; + line-height: 1.2; + text-decoration: none; + white-space: nowrap; + transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; +} +.promist-btn .promist-logo { + display: inline-flex; + align-items: center; + transition: margin 0.3s; +} +.promist-btn .promist-logo img { + height: 52px; + width: auto; + display: block; +} +.promist-btn .fa-arrow-right { + max-width: 0; + margin-left: 0; + opacity: 0; + overflow: hidden; + transform: translateX(-6px); + transition: max-width 0.35s ease, margin-left 0.35s ease, opacity 0.3s ease, transform 0.3s ease; +} +.promist-btn:hover .fa-arrow-right { + max-width: 22px; + margin-left: 10px; + opacity: 1; + transform: translateX(0); +} +.promist-btn:hover { border-color: #d1d5db; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16, 24, 64, 0.28); } /* Tab menu spacing */ .tab-menu2 { @@ -249,8 +291,8 @@ img { max-width: 100%; height: auto; } /* ── HERO: bigger Promist inline logo ── */ .hero-style5 .hero-title img { - height: 48px !important; - width: auto !important; + height: 64px !important; + width: auto; vertical-align: middle; } @@ -258,11 +300,9 @@ img { max-width: 100%; height: auto; } /* Left column is now always visible (d-none d-lg-block removed from JSX) */ @media (max-width: 991px) { - .header-layout5 .header-top .row { - flex-direction: column; - align-items: center; - gap: 2px; - } +.header-layout5 .header-top .row { + justify-content: center; +} .header-top { padding: 8px 0 !important; } @@ -342,11 +382,15 @@ img { max-width: 100%; height: auto; } /* ── NAV/TOP-BAR SPACING: tighten on mobile ── */ @media (max-width: 767px) { .header-layout5 .header-top { + background: rgba(16, 25, 64, 0.95); + backdrop-filter: blur(10px); padding: 6px 0 !important; } } @media (max-width: 575px) { .header-top { + background: rgba(16, 25, 64, 0.95); + backdrop-filter: blur(10px); padding: 4px 0 !important; } .header-layout5 .header-logo { @@ -399,7 +443,7 @@ img { max-width: 100%; height: auto; } font-size: 32px; } .hero-style5 .hero-title img { - height: 32px; + height: 32px !important; width: auto; vertical-align: middle; } @@ -431,7 +475,7 @@ img { max-width: 100%; height: auto; } line-height: 1.3; } .hero-style5 .hero-title img { - height: 24px; + height: 30px !important; } .hero-style5 .hero-text { font-size: 13px; @@ -590,11 +634,11 @@ img { max-width: 100%; height: auto; } } /* 3. Ensure menu-wrap flex guarantees hamburger on the right */ - .header-layout5 .menu-wrap { - display: flex !important; - align-items: center !important; - justify-content: space-between !important; - } +.header-layout5 .menu-wrap { + margin-left: 0; + width: 100%; + margin: 0 auto; +} /* 4. Sidebar flyout: frosted glass effect */ .th-menu-wrapper.th-body-visible .th-menu-area { @@ -671,7 +715,7 @@ img { max-width: 100%; height: auto; } .service-block .box-icon img { max-width: 24px !important; - max-height: 24px !important; + max-height: 30px !important; width: auto !important; height: auto !important; display: inline-block !important; @@ -829,15 +873,24 @@ img { max-width: 100%; height: auto; } } /* ══════════════════════════════════════════════════════════════ - NEW SERVICE CARDS: image background with gradient overlay + NEW SERVICE CARDS: image on top, white text panel below — PC + mobile (global, not inside media query) ══════════════════════════════════════════════════════════════ */ .service-block-new { position: relative; border-radius: 20px; overflow: hidden; - height: 280px; + background: #ffffff; cursor: pointer; + display: flex; + flex-direction: column; + height: 100%; +} + +.service-block-new .service-media { + position: relative; + height: 220px; + overflow: hidden; } .service-block-new .service-bg { @@ -845,58 +898,56 @@ img { max-width: 100%; height: auto; } height: 100%; object-fit: cover; display: block; - transition: transform 0.4s ease; + transition: transform 0.45s ease; } +/* Image "pops": rises slightly on hover */ .service-block-new:hover .service-bg { - transform: scale(1.05); -} - -.service-block-new .service-overlay { - position: absolute; - inset: 0; - background: linear-gradient( - to top, - rgba(0, 0, 0, 0.9) 0%, - rgba(0, 0, 0, 0.5) 40%, - rgba(0, 0, 0, 0.1) 100% - ); - pointer-events: none; + transform: scale(1.06) translateY(-4px); } .service-block-new .service-content { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 24px; - z-index: 2; + flex: 1; + padding: 24px 20px 26px; + background: #ffffff; + text-align: center; + display: flex; + align-items: center; + justify-content: center; } .service-block-new .service-title { - color: #ffffff; + color: #101840; font-size: 20px; font-weight: 700; margin: 0; line-height: 1.3; + /* reserve 2 lines so all cards (and rows) stay equal height */ + min-height: 2.6em; } .service-block-new .service-title a { - color: #ffffff; + color: #101840; text-decoration: none; + display: block; } .service-block-new .service-title a:hover { color: #ED1C24; } -/* ── Mobile overrides for new service cards ── */ + +/* ── Mobile overrides for new service cards (2×4 grid) ── */ @media (max-width: 767px) { .service-block-new { - height: 180px !important; + height: 100% !important; overflow: hidden !important; border-radius: 12px !important; } + .service-block-new .service-media { + height: 130px !important; + overflow: hidden !important; + } .service-block-new .service-bg { width: 100% !important; height: 100% !important; @@ -904,33 +955,30 @@ img { max-width: 100%; height: auto; } object-position: center !important; display: block !important; } - .service-block-new .service-overlay { - background: linear-gradient( - to top, - rgba(0, 0, 0, 0.85) 0%, - rgba(0, 0, 0, 0.4) 40%, - rgba(0, 0, 0, 0) 70% - ) !important; - } .service-block-new .service-content { - padding: 12px !important; - z-index: 2 !important; + padding: 12px 10px !important; + background: #fff !important; + text-align: center !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; } .service-block-new .service-title { - font-size: 11px !important; + font-size: 12px !important; line-height: 1.3 !important; - font-weight: 600 !important; - color: #fff !important; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important; + font-weight: 700 !important; + color: #101840 !important; + text-shadow: none !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; + min-height: 2.6em !important; } .service-block-new .service-title a { - color: #fff !important; + color: #101840 !important; text-decoration: none !important; } [data-id="148606f"] .row { @@ -938,24 +986,13 @@ img { max-width: 100%; height: auto; } } } -/* ── Service card text center ── */ -.service-block-new .service-content { - text-align: center !important; -} - -.service-block-new .service-title a { - display: block !important; -} - /* ══════════════════════════════════════════════════════════════ - STICKY NAVBAR: white frosted glass + STICKY NAVBAR: solid white - Overrides theme.css solid #0c0d0e bg - - White frosted + subtle shadow for PC view + - Solid white + subtle shadow for PC view ══════════════════════════════════════════════════════════════ */ .sticky-wrapper.sticky { - background: rgba(255, 255, 255, 0.85) !important; - backdrop-filter: blur(20px) !important; - -webkit-backdrop-filter: blur(20px) !important; + background: #ffffff !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; } @@ -964,10 +1001,19 @@ img { max-width: 100%; height: auto; } .header-layout5 .sticky-wrapper.sticky .header-logo { background-color: transparent !important; } +/* Logo swap: top logo = red/white, sticky logo = black */ +.logo-sticky { display: none; } +.sticky-wrapper.sticky .logo-top { display: none; } +.sticky-wrapper.sticky .logo-sticky { display: block; } + +/* Lighter border on the nav CTA when navbar is scrolled/sticky */ +.header-layout5 .sticky-wrapper.sticky .promist-btn { + border-color: #d1d5db; +} /* ── HEADER BUTTON: bigger Promist logo in navbar ── */ -.header-layout5 .header-button img { - height: 40px !important; +.header-layout5 .header-button .promist-btn .promist-logo img { + height: 30px !important; width: auto !important; display: block !important; margin: 0 auto !important; @@ -1032,12 +1078,10 @@ img { max-width: 100%; height: auto; } background: transparent !important; } -/* Make nav and menu elements transparent so frosted glass shows through */ -.sticky-wrapper.sticky .main-menu, -.sticky-wrapper.sticky .main-menu ul, -.sticky-wrapper.sticky .rakar-menu, -.sticky-wrapper.sticky .rakar-menu li { - background: transparent !important; +/* Keep Services dropdown solid when header is sticky + (prevents the transparent cascade from wiping the dropdown background) */ +.sticky-wrapper.sticky .header-layout5 .main-menu ul.sub-menu { + background: #101940 !important; } /* ══════════════════════════════════════════════════════════════