feat(references): dynamic reference

tech-trail-io · Mar 29, 2024 · 1cc84c7 · 1cc84c7
1 parent b0d7be1
commit 1cc84c7
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 36 deletions.
diff --git a/src/acstetofedo/App.tsx b/src/acstetofedo/App.tsx
@@ -22,6 +22,8 @@ function App() {
     services,
     servicesExplained,
     aboutUs,
+    ourStory,
+    references,
   } = Company;
 
   return (
@@ -33,9 +35,9 @@ function App() {
         <ServicesExplained
           servicesExplained={servicesExplained}
         ></ServicesExplained>
-        <CompanyInfo aboutUs={aboutUs}></CompanyInfo>
+        <CompanyInfo aboutUs={aboutUs} ourStory={ourStory}></CompanyInfo>
         <Testimonials testimonials={testimonials}></Testimonials>
-        <References></References>
+        <References references={references}></References>
         <Contact></Contact>
       </main>
 

diff --git a/src/acstetofedo/company.ts b/src/acstetofedo/company.ts
@@ -1,4 +1,4 @@
-import { AboutUsItem } from '../company.interface';
+import { AboutUsItem, Reference } from '../company.interface';
 import {
   CompanyInfo,
   Service,
@@ -25,8 +25,7 @@ export const testimonials: Testimonial[] = [
     name: 'Dávid',
     picture: '/assets/reviews/review-3.webp',
     rate: 5,
-    review:
-      `Nagyon elégedettek vagyunk a ${companyName}-val, mert nemcsak hogy gyorsan reagáltak a kérésünkre, de a munkájuk minősége is kiemelkedő volt. Rugalmasak voltak az időpontokat illetően, és a csapat teljes szívvel a munkájába fektette magát, hogy a tetőnk újra tökéletes állapotba kerüljön.`,
+    review: `Nagyon elégedettek vagyunk a ${companyName}-val, mert nemcsak hogy gyorsan reagáltak a kérésünkre, de a munkájuk minősége is kiemelkedő volt. Rugalmasak voltak az időpontokat illetően, és a csapat teljes szívvel a munkájába fektette magát, hogy a tetőnk újra tökéletes állapotba kerüljön.`,
   },
 ];
 
@@ -96,6 +95,57 @@ const aboutUs: AboutUsItem[] = [
   },
 ];
 
+const ourStory = `1995-ben készítettem el első munkámat ács-tetőfedő vállalkozóként. Az azóta eltelt közel 30 év alatt az ország szinte minden pontján megfordultam és ott hagytam szakmai “lábnyomomat” kisebb-nagyobb beruházásokban a megrendelők elégedettségére. Az utóbbi években túlnyomórészt lakóhelyem 100 kilométeres körzetében dolgozom.
+Időközben családi vállalkozássá bővültünk, fiam kitanulta a bádogos szakmát. Ács-tetőfedő-bádogos  munkák kivitelezése semmilyen szinten nem okoz problémát, az egyszerűbb, kisebb megbízásoktól, a legbonyolultabb, több száz négyzetméteresig. 
+Árajánlatot mindig személyes megbeszélés, elkészült tervek alapján készítünk, részletesen, mindenre kiterjedően, ingyenesen.
+Elszámolás mindig az adott munkafolyamat elkészülte után történik, a megrendelő által elfogadott árajánlat alapján.
+Az elmúlt 30 év rengeteg referencia munkát eredményezett, melyeket olyan formában bocsátok az érdeklődők részére, hogy konkrét elkészült munkák címét és a megrendelők nevét, telefonszámát adom meg, ahol személyesen lehet informálódni az elkészített munkák minőségéről.`;
+
+const references: Reference[] = [
+  {
+    description: 'Ide jön egy referencia munka leírása',
+    images: [
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-700.jpg',
+        caption: 'ez egy város',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-700.jpg',
+        caption: 'ez egy hegy',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-700.jpg',
+        caption: 'ez is egy hegy',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-700.jpg',
+        caption: 'meg ez is',
+      },
+    ],
+  },
+  {
+    description: 'Ide jön egy másik referencia munka leírása',
+    images: [
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-700.jpg',
+        caption: 'ez egy város',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-700.jpg',
+        caption: 'ez egy hegy',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-700.jpg',
+        caption: 'ez is egy hegy',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-700.jpg',
+        caption: 'meg ez is',
+      },
+    ],
+  },
+];
+
 export const Company: CompanyInfo = {
   companyName: companyName,
   phone: '+36 30 123 4567',
@@ -111,4 +161,6 @@ export const Company: CompanyInfo = {
   services,
   servicesExplained,
   aboutUs,
+  ourStory,
+  references,
 };
diff --git a/src/company.interface.ts b/src/company.interface.ts
@@ -27,6 +27,16 @@ export interface AboutUsItem {
   icon: string;
 }
 
+export interface ReferenceImage {
+  src: string;
+  caption: string;
+}
+
+export interface Reference {
+  description: string;
+  images: ReferenceImage[];
+}
+
 export interface CompanyInfo {
   companyName: string;
   phone: string;
@@ -38,4 +48,6 @@ export interface CompanyInfo {
   services: Service[];
   servicesExplained: ServiceExplain[];
   aboutUs: AboutUsItem[];
+  ourStory: string;
+  references: Reference[];
 }
diff --git a/src/generalkivitelezes/App.tsx b/src/generalkivitelezes/App.tsx
@@ -22,6 +22,8 @@ function App() {
     services,
     servicesExplained,
     aboutUs,
+    ourStory,
+    references,
   } = Company;
 
   return (
@@ -33,9 +35,9 @@ function App() {
         <ServicesExplained
           servicesExplained={servicesExplained}
         ></ServicesExplained>
-        <CompanyInfo aboutUs={aboutUs}></CompanyInfo>
+        <CompanyInfo aboutUs={aboutUs} ourStory={ourStory}></CompanyInfo>
         <Testimonials testimonials={testimonials}></Testimonials>
-        <References></References>
+        <References references={references}></References>
         <Contact></Contact>
       </main>
 

diff --git a/src/generalkivitelezes/company.ts b/src/generalkivitelezes/company.ts
@@ -1,6 +1,7 @@
 import {
   AboutUsItem,
   CompanyInfo,
+  Reference,
   Service,
   ServiceExplain,
   Testimonial,
@@ -112,6 +113,57 @@ const aboutUs: AboutUsItem[] = [
   },
 ];
 
+const ourStory = `1995-ben készítettem el első munkámat ács-tetőfedő vállalkozóként. Az azóta eltelt közel 30 év alatt az ország szinte minden pontján megfordultam és ott hagytam szakmai “lábnyomomat” kisebb-nagyobb beruházásokban a megrendelők elégedettségére. Az utóbbi években túlnyomórészt lakóhelyem 100 kilométeres körzetében dolgozom.
+Időközben családi vállalkozássá bővültünk, fiam kitanulta a bádogos szakmát. Ács-tetőfedő-bádogos  munkák kivitelezése semmilyen szinten nem okoz problémát, az egyszerűbb, kisebb megbízásoktól, a legbonyolultabb, több száz négyzetméteresig. 
+Árajánlatot mindig személyes megbeszélés, elkészült tervek alapján készítünk, részletesen, mindenre kiterjedően, ingyenesen.
+Elszámolás mindig az adott munkafolyamat elkészülte után történik, a megrendelő által elfogadott árajánlat alapján.
+Az elmúlt 30 év rengeteg referencia munkát eredményezett, melyeket olyan formában bocsátok az érdeklődők részére, hogy konkrét elkészült munkák címét és a megrendelők nevét, telefonszámát adom meg, ahol személyesen lehet informálódni az elkészített munkák minőségéről.`;
+
+const references: Reference[] = [
+  {
+    description: 'Ide jön egy referencia munka leírása',
+    images: [
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-700.jpg',
+        caption: 'ez egy város',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-700.jpg',
+        caption: 'ez egy hegy',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-700.jpg',
+        caption: 'ez is egy hegy',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-700.jpg',
+        caption: 'meg ez is',
+      },
+    ],
+  },
+  {
+    description: 'Ide jön egy másik referencia munka leírása',
+    images: [
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-700.jpg',
+        caption: 'ez egy város',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-700.jpg',
+        caption: 'ez egy hegy',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-700.jpg',
+        caption: 'ez is egy hegy',
+      },
+      {
+        src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-700.jpg',
+        caption: 'meg ez is',
+      },
+    ],
+  },
+];
+
 export const Company: CompanyInfo = {
   companyName: 'Generálkivitelezés.hu',
   phone: '+36 30 123 4567',
@@ -127,4 +179,6 @@ export const Company: CompanyInfo = {
   services,
   servicesExplained,
   aboutUs,
+  ourStory,
+  references,
 };
diff --git a/src/shared/main/AboutUs.tsx b/src/shared/main/AboutUs.tsx
@@ -1,16 +1,21 @@
 import { AboutUsItem } from '../../company.interface';
 
-function AboutUs({ aboutUs }: { aboutUs: AboutUsItem[] }) {
+function AboutUs({
+  aboutUs,
+  ourStory,
+}: {
+  aboutUs: AboutUsItem[];
+  ourStory: string;
+}) {
   return (
     <section id="company-info" className="py-8 bg-white">
       <div className="max-w-5xl mx-auto px-4">
         <div className="text-center mb-8">
           <h2 className="text-3xl font-semibold">Rólunk</h2>
-          <p className="mt-4 text-gray-600">
-            Ismerje meg jobban vállalatunkat, történetünket és amit képviselünk.
-          </p>
         </div>
-        <div className={`grid grid-cols-1 md:grid-cols-${aboutUs.length} gap-6`}>
+        <div
+          className={`grid grid-cols-1 md:grid-cols-${aboutUs.length} gap-6 mb-8`}
+        >
           {aboutUs.map(({ title, text, icon }) => (
             <div
               key="title"
@@ -23,6 +28,9 @@ function AboutUs({ aboutUs }: { aboutUs: AboutUsItem[] }) {
             </div>
           ))}
         </div>
+        <div className="text-justify mb-8">
+          <p className="mt-4 text-gray-600">{ourStory}</p>
+        </div>
       </div>
     </section>
   );

diff --git a/src/shared/main/ReferenceItem.tsx b/src/shared/main/ReferenceItem.tsx
@@ -2,28 +2,10 @@ import './ReferenceItem.css';
 import { Autoplay, Pagination, Navigation } from 'swiper/modules';
 import { Carousel, CarouselSlide } from '../carousel/Carousel';
 import { useState } from 'react';
+import { ReferenceImage } from '../../company.interface';
 
-function ReferenceItem() {
+function ReferenceItem({ images }: Readonly<{ images: ReferenceImage[] }>) {
   const [swiper, setSwiper] = useState();
-  console.log(swiper);
-  const images = [
-    {
-      src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/4/img-700.jpg',
-      caption: 'ez egy város',
-    },
-    {
-      src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-700.jpg',
-      caption: 'ez egy hegy',
-    },
-    {
-      src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-700.jpg',
-      caption: 'ez is egy hegy',
-    },
-    {
-      src: 'https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-700.jpg',
-      caption: 'meg ez is',
-    },
-  ];
 
   return (
     <>

diff --git a/src/shared/main/References.tsx b/src/shared/main/References.tsx
@@ -1,9 +1,19 @@
-import ReferenceItem from "./ReferenceItem";
+import { Reference } from '../../company.interface';
+import ReferenceItem from './ReferenceItem';
 
-function References() {
+function References({ references }: Readonly<{ references: Reference[] }>) {
   return (
     <section className="my-10 text-center">
-      <ReferenceItem></ReferenceItem>
+      <div className="max-w-5xl mx-auto px-4">
+        {references.map(({ description, images }, index) => (
+          <div key={index} className="flex flex-wrap items-center mb-8">
+            <div className="md:w-1/2">
+              <ReferenceItem images={images}></ReferenceItem>
+            </div>
+            <div className="md:w-1/2 md:pl-6 mt-4 md:mt-0">{description}</div>
+          </div>
+        ))}
+      </div>
     </section>
   );
 }

diff --git a/src/shared/main/Services.tsx b/src/shared/main/Services.tsx
@@ -7,7 +7,7 @@ function Services({ services }: { services: Service[] }) {
         <h2 className="text-center text-3xl font-semibold mb-6">
           Szolgáltatásaink
         </h2>
-        <div className={`grid grid-cols-1 md:grid-cols-${services.length} gap-6`}>
+        <div className={`grid grid-cols-1 md:grid-cols-4 gap-6`}>
           {services.map(({ icon, title, text }) => (
             <div key={title} className="bg-white rounded-lg shadow p-4 text-center">
               <img