From ac3126d9ba61fd630ea8921425090ab9e16d49b7 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sat, 4 Jul 2026 12:22:28 +0000
Subject: [PATCH] Bob AI: Make the website more modern and professional by
 applying a

---
 src/index.css                            |  28 ++--
 src/pages/HomePage.tsx                   | 186 +++--------------------
 src/pages/HomePage/sections/About.tsx    |  23 +++
 src/pages/HomePage/sections/Contact.tsx  |  28 ++++
 src/pages/HomePage/sections/Hero.tsx     |  49 ++++++
 src/pages/HomePage/sections/Metrics.tsx  |  50 ++++++
 src/pages/HomePage/sections/Services.tsx |  64 ++++++++
 7 files changed, 247 insertions(+), 181 deletions(-)
 create mode 100644 src/pages/HomePage/sections/About.tsx
 create mode 100644 src/pages/HomePage/sections/Contact.tsx
 create mode 100644 src/pages/HomePage/sections/Hero.tsx
 create mode 100644 src/pages/HomePage/sections/Metrics.tsx
 create mode 100644 src/pages/HomePage/sections/Services.tsx

diff --git a/src/index.css b/src/index.css
index 6543356..3a2f6b2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,22 +1,22 @@
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
-  --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --background: #1a1c1e;
+  --card: #222528;
+  --foreground: #e6e8ea;
+  --primary-cta: #5c6b7a;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #2a2e32;
+  --secondary-cta-text: #e6e8ea;
+  --accent: #d9a05b;
+  --background-accent: #2a2e32;
 
   /* @layout/border-radius/rounded */
-  --radius: 1rem;
+  --radius: 0rem;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 72.5vw, 100rem);
@@ -88,9 +88,9 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Manrope', sans-serif;
-  --font-tight: "Inter Tight", sans-serif;
-  --font-mono: monospace;
+  --font-sans: 'Inter', sans-serif;
+  --font-tight: "Inter", sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
 
   /* Border Radius */
   --radius: var(--radius);
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index dbe7665..162fdb1 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,176 +1,28 @@
-import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
-import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
-import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in the sibling sections/ folder (one file per section).
+// Edit those section files directly. Non-block content (wrappers,
+// non-inlinable sections) is preserved inline; extracted section blocks
+// become component refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import ServicesSection from './HomePage/sections/Services';
+import MetricsSection from './HomePage/sections/Metrics';
+import ContactSection from './HomePage/sections/Contact';
+
+export default function HomePage(): React.JSX.Element {
   return (
-    <>
-  <div id="hero" data-section="hero">
-    <SectionErrorBoundary name="hero">
-          <HeroBillboardTiltedCarousel
-      tag="Eksperti za kompresore"
-      title="D&S ELEKTROKOMP - 18+ godina pouzdanosti"
-      description="Servis, prodaja i održavanje industrijskih kompresora i pumpi u Novom Sadu."
-      primaryButton={{
-        text: "Pozovite nas",
-        href: "tel:+381637262865",
-      }}
-      secondaryButton={{
-        text: "Pošaljite upit",
-        href: "#contact",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/harvesters-combine-parts-plant-are-waiting-sales_146671-19062.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/coworkers-servicing-hvac-system_482257-91024.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/electrician-working-air-conditioner_482257-96273.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/interior-view-steel-factory_1359-184.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-using-diagnostic-tool-while-repairing-air-conditioning-system-car-auto-repair-shop_637285-4279.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/factory-surrounded-by-high-rise-buildings-with-greenery_181624-12688.jpg",
-        },
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutTextSplit
-      title="O nama"
-      descriptions={[
-        "D&S ELEKTROKOMP posluje od 2006. godine sa sedištem u Veterniku. Naša misija je pružanje vrhunske usluge servisa i prodaje kompresorske opreme uz maksimalnu posvećenost klijentima.",
-        "Sa preko 18 godina iskustva, Dragan Stojić i naš tim stručnjaka osiguravaju da vaša oprema radi besprekorno. Pokrivamo teritoriju Novog Sada i širu okolinu.",
-      ]}
-      textAnimation="fade"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="services" data-section="services">
-    <SectionErrorBoundary name="services">
-          <FeaturesDetailedCards
-      tag="Naše usluge"
-      title="Specijalizovani servis i održavanje"
-      description="Brza dijagnostika i profesionalni pristup za sve tipove industrijske opreme."
-      items={[
-        {
-          title: "Servis kompresora",
-          description: "Trudbenik Doboj, Atlas Copco, Abac, Fiac, Fini.",
-          tags: [
-            "servis",
-            "održavanje",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-vector/machine-maintenance-workshop-logo_474888-2721.jpg",
-        },
-        {
-          title: "Prodaja opreme",
-          description: "Prodaja novih i polovnih industrijskih kompresora.",
-          tags: [
-            "prodaja",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/transportable-washer_1048-1755.jpg",
-        },
-        {
-          title: "Elektromotori",
-          description: "Servis i viklovanje elektromotora.",
-          tags: [
-            "elektro",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/computer-hard-drive_1401-421.jpg",
-        },
-        {
-          title: "Vodene pumpe",
-          description: "Popravka i održavanje svih vrsta vodenih pumpi.",
-          tags: [
-            "hidraulika",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-morph-man-builder-with-wrench_1048-10368.jpg",
-        },
-        {
-          title: "Hidraulika",
-          description: "Održavanje hidrauličnih cilindara i sistema.",
-          tags: [
-            "hidraulika",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-scene-depicting-variety-people-multitasking_23-2151294566.jpg",
-        },
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ServicesSection />
 
-  <div id="metrics" data-section="metrics">
-    <SectionErrorBoundary name="metrics">
-          <MetricsFeatureCards
-      tag="Poslovanje"
-      title="Podaci o kompaniji"
-      description="Profesionalnost potvrđena višegodišnjim iskustvom."
-      metrics={[
-        {
-          value: "18+",
-          title: "Godina iskustva",
-          features: [
-            "Osnovani 2006",
-            "Stručnost",
-            "Pouzdanost",
-          ],
-        },
-        {
-          value: "20154624",
-          title: "Registracioni broj",
-          features: [
-            "Matični broj",
-            "Transparentnost",
-            "Sigurnost",
-          ],
-        },
-        {
-          value: "104370809",
-          title: "PIB",
-          features: [
-            "Poreska uprava",
-            "Regulativa",
-            "Poslovnost",
-          ],
-        },
-      ]}
-      textAnimation="fade-blur"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <MetricsSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Kontaktirajte nas"
-      text="Devet Jugovića 71, Veternik, Novi Sad. Telefon: 063/726-2865. Email: ds.stojic@gmail.com"
-      primaryButton={{
-        text: "Pozovite nas",
-        href: "tel:+381637262865",
-      }}
-      secondaryButton={{
-        text: "Email podrška",
-        href: "mailto:ds.stojic@gmail.com",
-      }}
-      textAnimation="fade"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }
diff --git a/src/pages/HomePage/sections/About.tsx b/src/pages/HomePage/sections/About.tsx
new file mode 100644
index 0000000..1c878d6
--- /dev/null
+++ b/src/pages/HomePage/sections/About.tsx
@@ -0,0 +1,23 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "about" section.
+
+import React from 'react';
+import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function AboutSection(): React.JSX.Element {
+  return (
+    <div id="about" data-section="about">
+        <SectionErrorBoundary name="about">
+              <AboutTextSplit
+          title="O nama"
+          descriptions={[
+            "D&S ELEKTROKOMP posluje od 2006. godine sa sedištem u Veterniku. Naša misija je pružanje vrhunske usluge servisa i prodaje kompresorske opreme uz maksimalnu posvećenost klijentima.",
+            "Sa preko 18 godina iskustva, Dragan Stojić i naš tim stručnjaka osiguravaju da vaša oprema radi besprekorno. Pokrivamo teritoriju Novog Sada i širu okolinu.",
+          ]}
+          textAnimation="fade"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Contact.tsx b/src/pages/HomePage/sections/Contact.tsx
new file mode 100644
index 0000000..0a2cd97
--- /dev/null
+++ b/src/pages/HomePage/sections/Contact.tsx
@@ -0,0 +1,28 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactCta from '@/components/sections/contact/ContactCta';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+        <SectionErrorBoundary name="contact">
+              <ContactCta
+          tag="Kontaktirajte nas"
+          text="Devet Jugovića 71, Veternik, Novi Sad. Telefon: 063/726-2865. Email: ds.stojic@gmail.com"
+          primaryButton={{
+            text: "Pozovite nas",
+            href: "tel:+381637262865",
+          }}
+          secondaryButton={{
+            text: "Email podrška",
+            href: "mailto:ds.stojic@gmail.com",
+          }}
+          textAnimation="fade"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
new file mode 100644
index 0000000..ac964e0
--- /dev/null
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -0,0 +1,49 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "hero" section.
+
+import React from 'react';
+import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div id="hero" data-section="hero">
+        <SectionErrorBoundary name="hero">
+              <HeroBillboardTiltedCarousel
+          tag="Eksperti za kompresore"
+          title="D&S ELEKTROKOMP - 18+ godina pouzdanosti"
+          description="Servis, prodaja i održavanje industrijskih kompresora i pumpi u Novom Sadu."
+          primaryButton={{
+            text: "Pozovite nas",
+            href: "tel:+381637262865",
+          }}
+          secondaryButton={{
+            text: "Pošaljite upit",
+            href: "#contact",
+          }}
+          items={[
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/harvesters-combine-parts-plant-are-waiting-sales_146671-19062.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/coworkers-servicing-hvac-system_482257-91024.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/electrician-working-air-conditioner_482257-96273.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/interior-view-steel-factory_1359-184.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/mid-adult-mechanic-using-diagnostic-tool-while-repairing-air-conditioning-system-car-auto-repair-shop_637285-4279.jpg",
+            },
+            {
+              imageSrc: "http://img.b2bpic.net/free-photo/factory-surrounded-by-high-rise-buildings-with-greenery_181624-12688.jpg",
+            },
+          ]}
+          textAnimation="slide-up"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Metrics.tsx b/src/pages/HomePage/sections/Metrics.tsx
new file mode 100644
index 0000000..353b7b9
--- /dev/null
+++ b/src/pages/HomePage/sections/Metrics.tsx
@@ -0,0 +1,50 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "metrics" section.
+
+import React from 'react';
+import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function MetricsSection(): React.JSX.Element {
+  return (
+    <div id="metrics" data-section="metrics">
+        <SectionErrorBoundary name="metrics">
+              <MetricsFeatureCards
+          tag="Poslovanje"
+          title="Podaci o kompaniji"
+          description="Profesionalnost potvrđena višegodišnjim iskustvom."
+          metrics={[
+            {
+              value: "18+",
+              title: "Godina iskustva",
+              features: [
+                "Osnovani 2006",
+                "Stručnost",
+                "Pouzdanost",
+              ],
+            },
+            {
+              value: "20154624",
+              title: "Registracioni broj",
+              features: [
+                "Matični broj",
+                "Transparentnost",
+                "Sigurnost",
+              ],
+            },
+            {
+              value: "104370809",
+              title: "PIB",
+              features: [
+                "Poreska uprava",
+                "Regulativa",
+                "Poslovnost",
+              ],
+            },
+          ]}
+          textAnimation="fade-blur"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
diff --git a/src/pages/HomePage/sections/Services.tsx b/src/pages/HomePage/sections/Services.tsx
new file mode 100644
index 0000000..a0dbfb2
--- /dev/null
+++ b/src/pages/HomePage/sections/Services.tsx
@@ -0,0 +1,64 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "services" section.
+
+import React from 'react';
+import FeaturesDetailedCards from '@/components/sections/features/FeaturesDetailedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+        <SectionErrorBoundary name="services">
+              <FeaturesDetailedCards
+          tag="Naše usluge"
+          title="Specijalizovani servis i održavanje"
+          description="Brza dijagnostika i profesionalni pristup za sve tipove industrijske opreme."
+          items={[
+            {
+              title: "Servis kompresora",
+              description: "Trudbenik Doboj, Atlas Copco, Abac, Fiac, Fini.",
+              tags: [
+                "servis",
+                "održavanje",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-vector/machine-maintenance-workshop-logo_474888-2721.jpg",
+            },
+            {
+              title: "Prodaja opreme",
+              description: "Prodaja novih i polovnih industrijskih kompresora.",
+              tags: [
+                "prodaja",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/transportable-washer_1048-1755.jpg",
+            },
+            {
+              title: "Elektromotori",
+              description: "Servis i viklovanje elektromotora.",
+              tags: [
+                "elektro",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/computer-hard-drive_1401-421.jpg",
+            },
+            {
+              title: "Vodene pumpe",
+              description: "Popravka i održavanje svih vrsta vodenih pumpi.",
+              tags: [
+                "hidraulika",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-morph-man-builder-with-wrench_1048-10368.jpg",
+            },
+            {
+              title: "Hidraulika",
+              description: "Održavanje hidrauličnih cilindara i sistema.",
+              tags: [
+                "hidraulika",
+              ],
+              imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-scene-depicting-variety-people-multitasking_23-2151294566.jpg",
+            },
+          ]}
+          textAnimation="slide-up"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}
-- 
2.49.1