frontend: new-participants-grid-107 - version 2

frontend/jest.config.cjs

@@ -1,15 +1,16 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
+
 module.exports = {
   preset: 'ts-jest',
-  testEnvironment: 'jsdom', 
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.app.json', 
-    },
-  },
+  testEnvironment: 'jest-environment-jsdom',
   setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
-  moduleNameMapper: {
-    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+  transform: {
+    '^.+\\.tsx?$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.app.json' }]
+
   },
-};
+  moduleNameMapper: {
+    '\\.(css|scss|sass|less)$': 'identity-obj-proxy',
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/mocks/fileMock.js'
+  }
 
+};

frontend/package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
     "jest-css-modules-transform": "^4.4.2",
     "jest-environment-jsdom": "^30.2.0",
@@ -46,7 +47,8 @@
     "ts-jest": "^29.4.5",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.1",
-    "vite": "npm:rolldown-vite@7.1.14"
+    "vite": "npm:rolldown-vite@7.1.14",
+    "whatwg-fetch": "^3.6.20"
   },
   "overrides": {
     "vite": "npm:rolldown-vite@7.1.14"

frontend/src/components/Hero/Hero.scss

@@ -2,7 +2,6 @@ $primary-green: #2b8a3e;
 $light-green: #b4d27a;
 $shadow-color: rgba(0, 0, 0, 0.2);
 
-
 @font-face {
   font-family: 'Geologica';
   src: url('../../fonts/Geologica-Regular.woff2') format('woff2'),
@@ -11,7 +10,6 @@ $shadow-color: rgba(0, 0, 0, 0.2);
   font-style: normal;
 }
 
-
 @font-face {
   font-family: 'Geologica';
   src: url('../../fonts/Geologica-SemiBold.woff2') format('woff2'),
@@ -20,7 +18,6 @@ $shadow-color: rgba(0, 0, 0, 0.2);
   font-style: normal;
 }
 
-
 @font-face {
   font-family: 'Geologica';
   src: url('../../fonts/Geologica-Bold.woff2') format('woff2'),
@@ -29,22 +26,21 @@ $shadow-color: rgba(0, 0, 0, 0.2);
   font-style: normal;
 }
 
-
 .hero-section {
-    background-color: $light-green;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    min-width: 345px;
-    height: 549px; 
-    padding: 40px 24px; 
-    box-sizing: border-box;
+  background-color: $light-green;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  min-width: 345px;
+  height: 720px; 
+  padding: 40px 24px;
+  box-sizing: border-box;
 
   .content-container {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center; 
     width: 100%;
     max-width: 1512px; 
     padding: 0 40px;
@@ -55,83 +51,78 @@ $shadow-color: rgba(0, 0, 0, 0.2);
 
     @media (min-width: 2100px) {
       max-width: 2000px;
-    } 
-  } 
+    }
+  }
 
   .text-column {
     flex: 1;
     max-width: 600px;
-    padding-right: 40px;
-    margin-top: 100px;
-
+    display: flex;
+    flex-direction: column;
+    justify-content: center; 
+    gap: 20px;
 
     .title {
       font-family: 'Geologica';
       font-weight: 700;
       font-size: 64px;
       line-height: 120%;
       letter-spacing: 1%;
-      margin-bottom: 10px;
-      margin-top: 100px;
+      margin: 0;
     }
 
-
     .subtitle {
       font-family: 'Geologica';
       font-weight: 700;
       font-size: 32px;
       line-height: 120%;
       letter-spacing: 1%;
-      margin-bottom: 30px;
-      margin-top: 20px;
+      margin: 0;
       color: #333;
     }
 
-
     .cta-button {
       width: 194px;
       white-space: nowrap;
       background-color: #000;
       color: #fff;
-      padding: 30px 1.5rem;
-      padding-top: 4px; 
+      padding: 16px 24px;
       border: none;
       border-radius: 6px;
       font-family: 'Geologica';
       font-weight: 700;
       font-size: 16px;
       cursor: pointer;
 
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
 
       &:hover {
         background-color: #111;
       }
     }
   }
 
-
   .image-collage {
     position: relative;
     width: 700px;
     height: 500px;
 
-
     .image-wrapper {
       position: absolute;
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 10px 30px $shadow-color;
       background-color: white;
 
-
       .collage-image {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
       }
 
-
       .image-label {
         font-family: 'Geologica';
         font-weight: 600;
@@ -148,42 +139,40 @@ $shadow-color: rgba(0, 0, 0, 0.2);
       }
     }
 
-
     .winemaking {
-      top: 60px;       
-      left: -250px;       
+      top: 40px;
+      left: -250px;
       width: 300px;
       height: 400px;
       z-index: 2;
     }
 
     .delivery {
-      top: 20px;       
-      left: 130px;     
+      top: -40px;
+      left: 130px;
       width: 340px;
       height: 200px;
       z-index: 3;
     }
 
     .cheese {
-      top: 250px;      
-      left: 80px;     
+      top: 220px;
+      left: 100px;
       width: 280px;
       height: 350px;
       z-index: 1;
     }
 
     .packaging {
-      top: 250px;      
-      left: 450px;     
+      top: 220px;
+      left: 450px;
       width: 250px;
       height: 300px;
       z-index: 4;
     }
   }
 }
 
-
 .content.hero-page {
   flex: none;
   width: 100%;

frontend/src/components/NewParticipants/StartupCard.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import type { Startup } from "./types";
+import "./StartupsGrid.scss";
+
+interface StartupCardProps {
+  startup: Partial<Startup>; 
+}
+
+const StartupCard: React.FC<StartupCardProps> = ({ startup }) => {
+  const name = startup.name || "Без назви";
+  const shortDescription = startup.shortDescription || "";
+  const category = startup.category || "";
+  const location = startup.location || "Невідомо";
+  const imageUrl = startup.imageUrl || "/placeholder.png";
+  const logoUrl = startup.logoUrl || "/logo-placeholder.png";
+
+  return (
+    <div className="startup-card relative">
+      <div className="relative">
+        <img src={imageUrl} alt={name} className="card-image" />
+        <img src={logoUrl} alt={`${name} logo`} className="logo" />
+      </div>
+      <div className="card-content">
+        <p>{category}</p>
+        <h3>{name}</h3>
+        <p>{shortDescription}</p>
+        <p className="location">{location}</p>
+      </div>
+    </div>
+  );
+};
+
+export default StartupCard;