working on style, removing css files
This commit is contained in:
parent
bacaf522cb
commit
f9ac37e414
@ -1,56 +0,0 @@
|
||||
#root {
|
||||
/* max-width: 1280px; */
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
/* text-align: center; */
|
||||
/* background-color: papayawhip; */
|
||||
background-color: rgb(228, 237, 240);
|
||||
/* background-image: url('../public/plocki.jpg'); */
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
/* .logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
*/
|
||||
body {
|
||||
background-color: rgb(255, 253, 253);
|
||||
}
|
||||
@ -1,6 +1,4 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import './certificates.css'
|
||||
|
||||
function Certificates() {
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,30 +0,0 @@
|
||||
.cert-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.img-container1 {
|
||||
width: 40vw;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
.cert-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* gap: 50px; */
|
||||
flex-wrap: wrap;
|
||||
margin-top: 50px;
|
||||
margin-left: 3vw;
|
||||
}
|
||||
|
||||
.img-container1 {
|
||||
width: 80vw;
|
||||
height: 40vh;
|
||||
/* margin-top: 20px; */
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
.anotherContainer {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
text-align: justify;
|
||||
/* text-align: center; */
|
||||
/* font-size: 1.3rem; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
|
||||
.constaltingContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.anotherContainer {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import { useEffect } from 'react'
|
||||
import './consalting.css'
|
||||
|
||||
export default function Consulting() {
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
.textBox {
|
||||
margin-top: 120px;
|
||||
margin-bottom: 50px;
|
||||
padding: 70px;
|
||||
width: 40vw;
|
||||
box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
|
||||
-webkit-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
|
||||
-moz-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
|
||||
/* text-align: left;*/
|
||||
}
|
||||
|
||||
.imgBox {
|
||||
width: 30vw;
|
||||
box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
|
||||
-webkit-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
|
||||
-moz-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
|
||||
|
||||
.text {
|
||||
/* margin-bottom: 10px; */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 50px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.text h1 {
|
||||
font-size: 1.5rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.textContainer {
|
||||
/* display: flex; */
|
||||
background-image: url("../../../public/background.jpg");
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
font-size: 1.7rem;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
.imgBox {
|
||||
display: none;
|
||||
/* width: 100vw; */
|
||||
}
|
||||
|
||||
.textBox {
|
||||
display: block;
|
||||
width: 80vw;
|
||||
margin-bottom: -150px;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 300px;
|
||||
align-items: center;
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
|
||||
#geotehnika {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 250px;
|
||||
}
|
||||
@ -1,118 +1,3 @@
|
||||
// import { useEffect } from 'react';
|
||||
|
||||
// export default function Lab() {
|
||||
// useEffect(() => {
|
||||
// window.scrollTo({ top: 0, behavior: "smooth" })
|
||||
// }, [])
|
||||
|
||||
// return (
|
||||
// <div className="container mx-auto px-4">
|
||||
// {/* Header */}
|
||||
// <div className="mt-24 mb-5 md:mb-32 text-center">
|
||||
// <h1 className="text-2xl capitalize underline">
|
||||
// во нашата лабораторија се вршат
|
||||
// </h1>
|
||||
// </div>
|
||||
|
||||
// {/* Main Content */}
|
||||
// <div className="flex flex-wrap gap-12 justify-around">
|
||||
// {/* Concrete Testing Section */}
|
||||
// <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-72 mb-20 w-full">
|
||||
// <div className="w-full md:w-1/2 px-8 py-6 text-center md:text-left bg-slate-100">
|
||||
// <p className="mb-4">
|
||||
// <strong className="text-xl block mb-2">
|
||||
// Испитувањето на бетон
|
||||
// </strong>
|
||||
// е важен процес кој се користи за да се оцени квалитетот и издржливоста на бетонски конструкции.
|
||||
// </p>
|
||||
// <p>
|
||||
// Испитувањето на бетонот е неопходен процес за осигурување на квалитет и безбедност на градежните проекти и инфраструктурата воопшто.
|
||||
// Тоа помага во отстранивање на недостатоците и намалување на ризиците од евентуални пропаднувања на конструкциите.
|
||||
// </p>
|
||||
// </div>
|
||||
// <div className="hidden md:block w-1/2">
|
||||
// <img
|
||||
// src="/kocki.webp"
|
||||
// alt="Испитување на бетон"
|
||||
// loading="lazy"
|
||||
// className="max-w-full h-auto"
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* Ore and Metal Testing Section */}
|
||||
// <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-72 mb-20 w-full">
|
||||
// <div className="hidden md:block w-1/2">
|
||||
// <img
|
||||
// src="/lab.webp"
|
||||
// alt="Испитување на руди и метали"
|
||||
// loading="lazy"
|
||||
// className="max-w-full h-auto"
|
||||
// />
|
||||
// </div>
|
||||
// <div className="w-full md:w-1/2 px-8 py-6 text-center md:text-left bg-slate-100">
|
||||
// <p className="mb-4">
|
||||
// <strong className="text-xl block mb-2">
|
||||
// Испитувањето на руди, метали и троски
|
||||
// </strong>
|
||||
// е важен процес во областа на геолошкото и металуршко инженерство, со цел да се анализираат и одредат својствата и составот на суровините и производите.
|
||||
// </p>
|
||||
// <p>
|
||||
// Овие испитувања се изведуваат за да се осигура квалитетот и спецификациите на материјалите, како и за да се обезбеди безбедно и ефикасно користење и обработка на руди, метали и троски во различни индустрии и апликации.
|
||||
// </p>
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
|
||||
// {/* Steel Testing Section */}
|
||||
// <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-72 mb-20 w-full">
|
||||
|
||||
// <div className="w-full md:w-1/2 px-8 py-6 text-center md:text-left bg-slate-100">
|
||||
// <p className="mb-4">
|
||||
// <strong className="text-xl block mb-2">
|
||||
// Испитувањето на челик
|
||||
// </strong>
|
||||
// е важен процес за одредување на квалитетот, издржливоста и други механички својства на челикот, кој се користи во разни индустрии и конструкции.
|
||||
// </p>
|
||||
// <p>
|
||||
// Испитувањето на челик е неопходен процес за да се обезбеди квалитетот и безбедноста на производите и конструкциите кои го користат, како и за да се уверите дека челикот одговара на спецификациите и стандардите.
|
||||
// </p>
|
||||
// </div>
|
||||
|
||||
// <div className="hidden md:block w-1/2">
|
||||
// <img
|
||||
// src="/armatura.jpg"
|
||||
// alt="Испитување на челик"
|
||||
// loading="lazy"
|
||||
// className="max-w-full h-auto"
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// {/* Laboratory Extraction Section */}
|
||||
// <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-72 mb-20 w-full">
|
||||
// <div className="hidden md:block w-1/2">
|
||||
// <img
|
||||
// src="/geotehnika.webp"
|
||||
// alt="Лабораториска екстракција"
|
||||
// loading="lazy"
|
||||
// className="max-w-full h-auto"
|
||||
// />
|
||||
// </div>
|
||||
// <div className="w-full md:w-1/2 px-8 py-6 text-center md:text-left bg-slate-100">
|
||||
// <p className="mb-4">
|
||||
// <strong className="text-xl block mb-2">
|
||||
// Лабораториската екстракција
|
||||
// </strong>
|
||||
// на метали или неметали од руди и троски е процес кој се користи за да се изолираат и оддели материјалите од суровините или отпадните производи, како што се рудите или троските, со цел да се добие чист метал или неметал.
|
||||
// </p>
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export default function Lab() {
|
||||
|
||||
@ -8,7 +8,7 @@ const navigation = [
|
||||
{ name: "За нас", href: "/about" },
|
||||
{ name: "Галерија", href: "/gallery" },
|
||||
{ name: "Контакт", href: "/contact" },
|
||||
{ name: "Клиенти", href: "/clients" },
|
||||
// { name: "Клиенти", href: "/clients" },
|
||||
{ name: "Админ", href: "/admin" },
|
||||
{ name: "Логин", href: "/login" },
|
||||
];
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
.nav {
|
||||
background-color: rgb(228, 237, 240);
|
||||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.34);
|
||||
-webkit-box-shadow: -1px 5px 20px 1px rgba(0, 0, 0, 0.34);
|
||||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.34);
|
||||
background-image: url("../public/background.jpg");
|
||||
}
|
||||
|
||||
/* #logo {
|
||||
margin-left: 10px;
|
||||
} */
|
||||
|
||||
/* #logo-tuf {
|
||||
margin-right: 20px;
|
||||
} */
|
||||
|
||||
a:hover {
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
|
||||
.navitems {
|
||||
/* margin-right: 100px; */
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
#logo {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
#logo img {
|
||||
width: 70px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#logo-tuf {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.insuranceContainer {
|
||||
height: 100vh;
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import './ultraSound.css'
|
||||
|
||||
export default function UltraSound() {
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,139 +1,32 @@
|
||||
// import './about.css'
|
||||
|
||||
|
||||
|
||||
// export default function About() {
|
||||
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// <div className="aboutGroup">
|
||||
|
||||
|
||||
// {/* <div className="container"> */}
|
||||
// <div className="aboutContainer">
|
||||
// <h1 className="text-2xl text-center mt-32 font-bold tracking-tight text-gray-900 sm:text-4xl">За нас</h1>
|
||||
// <p className="tracking-tight text-gray-900 sm:text-4xl mt-16">Компанијата Испитување на материјали и консултантство ДООЕЛ е основана во 2021 година. Главната дејност на ИМК ДООЕЛ е лабораториски испитувања во
|
||||
// областа на градежништвото и индустријата, како и консултантски услуги во областа на индустријата. Со успешното работење во своите области и
|
||||
// стручниот кадар кој компанијата го поседува, во 2022 година за компанијата интерес пројавува потенцијален партнер од Швајцарија. Во 2023
|
||||
// година компанијата ИМК ДООЕЛ од домашна компанија прераснува во интернационална компанија со добивање на партнер од Швајцарија и
|
||||
// прераснува во ИМК ДОО. Во истата година компанијата добива финансиска поддршка од старт ап фондот СЕКО, фонд кој го препозна квалитетот и
|
||||
// визијата кој го поседуваат двајца млади претпиемачи. Лабораторијата е комплетно опремена да одговори на секој предизвик во областа на
|
||||
// испитувањето на квалитетот на материјалите во градежната индсутрија со најмодерни инструменти за теренско и лабораториско испитување.
|
||||
// Испитувањето на материјалите се врши според најнови EN и МКС стандарди.</p>
|
||||
// </div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// <div className="form-container">
|
||||
// <div className="mx-auto max-w-2xl text-center">
|
||||
// <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Станете дел од нашиот тим</h2>
|
||||
|
||||
// </div>
|
||||
// <form action="https://formsubmit.co/taratur@gmail.com"
|
||||
// enctype='multipart/form-data'
|
||||
// method="POST" className="mx-auto mt-16 max-w-xl sm:mt-20">
|
||||
// <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
|
||||
// <div>
|
||||
// <label htmlFor="first-name" className="block text-sm font-semibold leading-6 text-gray-900">
|
||||
// Име
|
||||
// </label>
|
||||
// <div className="mt-2.5">
|
||||
// <input
|
||||
// type="text"
|
||||
// name="first-name"
|
||||
// id="first-name"
|
||||
// autoComplete="given-name"
|
||||
// className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// <div>
|
||||
// <label htmlFor="last-name" className="block text-sm font-semibold leading-6 text-gray-900">
|
||||
// Презиме
|
||||
// </label>
|
||||
// <div className="mt-2.5">
|
||||
// <input
|
||||
// type="text"
|
||||
// name="last-name"
|
||||
// id="last-name"
|
||||
// autoComplete="family-name"
|
||||
// className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="sm:col-span-2">
|
||||
// <label htmlFor="email" className="block text-sm font-semibold leading-6 text-gray-900">
|
||||
// Мејл
|
||||
// </label>
|
||||
// <div className="mt-2.5">
|
||||
// <input
|
||||
// type="email"
|
||||
// name="email"
|
||||
// id="email"
|
||||
// autoComplete="email"
|
||||
// className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <div className="sm:col-span-2">
|
||||
// <label htmlFor="message" className="block text-sm font-semibold leading-6 text-gray-900">
|
||||
// Порака
|
||||
// </label>
|
||||
// <div className="mt-2.5">
|
||||
// <textarea
|
||||
// name="message"
|
||||
// id="message"
|
||||
// rows={4}
|
||||
// className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
|
||||
// defaultValue={''}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="sm:col-span-2">
|
||||
// <label htmlFor="attachment" className="block text-lg font-semibold leading-6 text-gray-900 mb-4">
|
||||
// Прокачетего вашето CV (5mb max)
|
||||
// </label>
|
||||
// <input type="file" name="attachment" id='attachment' accept=".pdf, image/jpeg, .doc, .odt" />
|
||||
// </div>
|
||||
// {/* <Switch.Group as="div" className="flex gap-x-4 sm:col-span-2">
|
||||
// </Switch.Group> */}
|
||||
// </div>
|
||||
// <input type="hidden" name="_next" value="https://imk-azure.vercel.app/"></input>
|
||||
// <div className="mt-10">
|
||||
// <button
|
||||
// type="submit"
|
||||
// className="block w-full rounded-md bg-gray-500 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
|
||||
// >
|
||||
// Испрати
|
||||
// </button>
|
||||
// </div>
|
||||
// </form>
|
||||
// {/* </div > */}
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
|
||||
|
||||
// </>
|
||||
// )
|
||||
// }
|
||||
import { SectionHeader } from '../../shared/SectionHeader';
|
||||
import { Button } from '../../shared/Button';
|
||||
import { FiUsers, FiAward, FiCheckCircle, FiTrendingUp } from 'react-icons/fi';
|
||||
|
||||
export default function About() {
|
||||
const stats = [
|
||||
{ label: 'Години искуство', value: '15+' },
|
||||
{ label: 'Задоволни клиенти', value: '500+' },
|
||||
{ label: 'Завршени проекти', value: '1000+' },
|
||||
{ label: 'Експерти во тимот', value: '20+' }
|
||||
];
|
||||
|
||||
const milestones = [
|
||||
{ year: '2008', title: 'Основање на компанијата' },
|
||||
{ year: '2012', title: 'Проширување на лабораторијата' },
|
||||
{ year: '2015', title: 'ISO сертификација' },
|
||||
{ year: '2018', title: 'Воведување на нови услуги' },
|
||||
{ year: '2020', title: 'Модернизација на опремата' },
|
||||
{ year: '2023', title: 'Проширување на тимот' }
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="min-h-screen bg-gradient-to-b from-cyan-700/80 to-cyan-400">
|
||||
{/* Hero Section */}
|
||||
<div className="relative h-[60vh] overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
src="/about-hero.jpg"
|
||||
alt="About Us"
|
||||
<img
|
||||
src="/about-hero.webp"
|
||||
alt="Laboratory equipment"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-blue-600/80" />
|
||||
@ -151,41 +44,133 @@ export default function About() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Sections */}
|
||||
{/* Stats Section */}
|
||||
{/* <div className="container mx-auto px-4 py-16 -mt-20">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="bg-white/10 backdrop-blur-lg rounded-xl p-6 text-center">
|
||||
<div className="text-3xl font-bold text-blue-400 mb-2">{stat.value}</div>
|
||||
<div className="text-gray-300">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Vision & Values Section */}
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<SectionHeader
|
||||
title="Нашата Мисија"
|
||||
subtitle="Посветени сме на обезбедување највисок квалитет во нашата работа"
|
||||
className="text-white"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h3 className="text-2xl font-semibold text-gray-800 mb-4">
|
||||
Визија
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Да бидеме водечка компанија во обезбедување на квалитет и сигурност во градежништвото.
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
||||
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-8">
|
||||
<div className="flex items-center mb-4">
|
||||
<FiTrendingUp className="w-6 h-6 text-white mr-3" />
|
||||
<h3 className="text-2xl font-semibold text-white">
|
||||
Визија
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-white text-xl">
|
||||
Нашата визија е да бидеме водечка компанија во областа на испитување на материјали и контрола на квалитет во Македонија. Стремиме кон постојано унапредување на нашите услуги преку имплементација на најсовремени технологии и методологии. Сакаме да воспоставиме нови стандарди во индустријата и да допринесеме за развојот на градежништвото и инженерството во регионот.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h3 className="text-2xl font-semibold text-gray-800 mb-4">
|
||||
Вредности
|
||||
</h3>
|
||||
<p className="text-gray-600">
|
||||
Професионалност, посветеност и иновација во секој проект.
|
||||
</p>
|
||||
<div className="bg-white/10 backdrop-blur-lg rounded-xl p-8">
|
||||
<div className="flex items-center mb-4">
|
||||
<FiAward className="w-6 h-6 text-white mr-3" />
|
||||
<h3 className="text-2xl font-semibold text-white">
|
||||
Вредности
|
||||
</h3>
|
||||
</div>
|
||||
<ul className="text-gray-300 space-y-3">
|
||||
<li className="flex items-start text-xl">
|
||||
<FiCheckCircle className="w-5 h-5 text-red mr-2 mt-1" />
|
||||
<div>
|
||||
<strong className="text-white">Квалитет</strong> - Посветени сме на обезбедување највисок квалитет во сите наши услуги
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
|
||||
<div>
|
||||
<strong className="text-white">Интегритет</strong> - Работиме со целосна транспарентност и професионална етика
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
|
||||
<div>
|
||||
<strong className="text-white">Иновација</strong> - Постојано инвестираме во нови технологии и методи
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
|
||||
<div>
|
||||
<strong className="text-white">Експертиза</strong> - Нашиот тим се состои од високо квалификувани професионалци
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start">
|
||||
<FiCheckCircle className="w-5 h-5 text-blue-400 mr-2 mt-1" />
|
||||
<div>
|
||||
<strong className="text-white">Одговорност</strong> - Преземаме целосна одговорност за квалитетот на нашата работа
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline Section */}
|
||||
<div className="mb-16 border rounded-xl border-red-900/20 p-10 bg-white/10 backdrop-blur-lg">
|
||||
<SectionHeader
|
||||
title="Нашиот Развој"
|
||||
subtitle="Клучни моменти во нашата историја"
|
||||
className="text-white"
|
||||
/>
|
||||
<div className="relative">
|
||||
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-px"></div>
|
||||
<div className="space-y-8">
|
||||
{milestones.map((milestone, index) => (
|
||||
<div key={index} className={`flex items-center ${index % 2 === 0 ? 'justify-start' : 'justify-end'}`}>
|
||||
<div className={`w-1/2 ${index % 2 === 0 ? 'pr-8 text-right' : 'pl-8'}`}>
|
||||
<div className="bg-white/80 backdrop-blur-lg rounded-xl p-6 text-blue-800">
|
||||
<div className="text-blue-400 font-bold text-xl mb-2">{milestone.year}</div>
|
||||
<div className="text-blue-700 text-xl">{milestone.title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Section */}
|
||||
<div className="mb-16">
|
||||
<SectionHeader
|
||||
title="Нашиот Тим"
|
||||
subtitle="Запознајте се со нашите експерти"
|
||||
className="text-white"
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{[1, 2, 3].map((member) => (
|
||||
<div key={member} className="bg-white backdrop-blur-lg rounded-xl p-6 text-center">
|
||||
<div className="w-24 h-24 mx-auto mb-4 rounded-full bg-blue-400/20 flex items-center justify-center">
|
||||
<FiUsers className="w-12 h-12 text-blue-400" />
|
||||
</div>
|
||||
<h4 className="text-white font-semibold mb-2">Име Презиме</h4>
|
||||
<p className="text-gray-400">Позиција</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="bg-blue-600 text-white py-24">
|
||||
<div className="bg-blue-600/20 backdrop-blur-lg py-24">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-8">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-8">
|
||||
Започнете го вашиот проект со нас
|
||||
</h2>
|
||||
<Button variant="secondary">
|
||||
<Button variant="outline">
|
||||
Контактирајте нѐ
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
.aboutGroup {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.aboutContainer {
|
||||
width: 40vw;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.aboutContainer p {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
.aboutGroup {
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.aboutContainer {
|
||||
width: 80vw;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
.form-container {
|
||||
margin-top: 150px;
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,12 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { motion } from "framer-motion"; // You'll need to install framer-motion
|
||||
import { ArrowRightIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
import { SectionHeader } from "../../shared/SectionHeader";
|
||||
const serviceCards = [
|
||||
{
|
||||
title: "Лабораториски услуги",
|
||||
description: "Професионални лабораториски испитувања со најсовремена опрема",
|
||||
image: "/labfinal.webp",
|
||||
image: "labfinal.webp",
|
||||
link: "/lab",
|
||||
services: [
|
||||
"Испитување на бетон",
|
||||
@ -16,33 +16,54 @@ const serviceCards = [
|
||||
"Лабораториска екстракција од руди и троски"
|
||||
]
|
||||
},
|
||||
// ... other service cards
|
||||
{
|
||||
title: "Ултразвучни испитувања",
|
||||
description: "Неразорувачки испитувања со најсовремена ултразвучна опрема",
|
||||
image: "wallscener.jpeg",
|
||||
link: "/ultrasound",
|
||||
services: [
|
||||
"Испитување на заварени споеви",
|
||||
"Дебелометрија",
|
||||
"Испитување на дефекти",
|
||||
"Контрола на квалитет",
|
||||
"Анализа и известување"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Консалтинг услуги",
|
||||
description: "Експертски совети и консултации во градежништвото",
|
||||
image: "consulting2.jpg",
|
||||
link: "/consulting",
|
||||
services: [
|
||||
"Градежно советување",
|
||||
"Проектен менаџмент",
|
||||
"Надзор на градба",
|
||||
"Техничка документација",
|
||||
"Анализа на материјали"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="min-h-screen bg-gradient-to-b from-cyan-900 to-cyan-400">
|
||||
{/* Hero Section with Parallax */}
|
||||
<div className="relative h-[90vh] overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
src="/hero-background.jpg"
|
||||
alt="Laboratory Background"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0">
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-blue-600/80" />
|
||||
</div>
|
||||
|
||||
|
||||
<div className="relative container mx-auto px-4 h-full flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
<motion.h1
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-4xl md:text-6xl font-bold text-white mb-6"
|
||||
>
|
||||
Вашиот партнер во контролата на безбедно градење
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
@ -50,19 +71,19 @@ export default function Home() {
|
||||
>
|
||||
Професионални лабораториски услуги со најсовремена опрема и експертиза
|
||||
</motion.p>
|
||||
<motion.div
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<NavLink
|
||||
<NavLink
|
||||
to="/contact"
|
||||
className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300"
|
||||
>
|
||||
Контактирајте нѐ
|
||||
</NavLink>
|
||||
<NavLink
|
||||
<NavLink
|
||||
to="/services"
|
||||
className="bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300"
|
||||
>
|
||||
@ -74,7 +95,7 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
{/* Stats Section */}
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
{/* <div className="container mx-auto px-4 py-16 ">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
{[
|
||||
{ number: "15+", label: "Години искуство" },
|
||||
@ -83,26 +104,30 @@ export default function Home() {
|
||||
{ number: "100%", label: "Задоволство" },
|
||||
].map((stat) => (
|
||||
<div key={stat.label} className="text-center">
|
||||
<div className="text-4xl font-bold text-blue-600 mb-2">{stat.number}</div>
|
||||
<div className="text-gray-600">{stat.label}</div>
|
||||
<div className="text-4xl font-bold text-white mb-2">{stat.number}</div>
|
||||
<div className="text-white">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* Services Section */}
|
||||
<div className="bg-gray-100 py-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<div className="bg-white py-24">
|
||||
<div className="container bg-gradient-to-b from-cyan-900 to-cyan-400 rounded-xl mx-auto p-20">
|
||||
{/* <div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
Нашите Услуги
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-blue-500 mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
</div> */}
|
||||
<SectionHeader
|
||||
title="Нашите Услуги"
|
||||
subtitle="Нашиот тим е спремен да ви помогне со нашите услуги"
|
||||
className="text-white"
|
||||
/>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
{serviceCards.map((card) => (
|
||||
<NavLink
|
||||
<NavLink
|
||||
key={card.title}
|
||||
to={card.link}
|
||||
className="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||
@ -122,7 +147,7 @@ export default function Home() {
|
||||
<p className="text-gray-600 mb-4">{card.description}</p>
|
||||
<ul className="space-y-2">
|
||||
{card.services.slice(0, 3).map((service, index) => (
|
||||
<li
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center text-gray-700"
|
||||
>
|
||||
@ -145,23 +170,23 @@ export default function Home() {
|
||||
{/* Featured Projects/Clients */}
|
||||
<div className="container mx-auto px-4 py-24">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
Наши Клиенти
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-blue-500 mx-auto mb-8"></div>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
||||
<p className="text-white text-xl max-w-2xl mx-auto">
|
||||
Горди сме на довербата која ни ја укажуваат нашите клиенти
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
{/* Add client logos here */}
|
||||
{[1, 2, 3, 4].map((index) => (
|
||||
<div
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
|
||||
>
|
||||
<img
|
||||
<img
|
||||
src={`/client-${index}.png`}
|
||||
alt={`Client ${index}`}
|
||||
className="w-full h-20 object-contain grayscale hover:grayscale-0 transition-all duration-300"
|
||||
@ -177,7 +202,7 @@ export default function Home() {
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-8">
|
||||
Спремни сме да ви помогнеме во вашиот следен проект
|
||||
</h2>
|
||||
<NavLink
|
||||
<NavLink
|
||||
to="/contact"
|
||||
className="inline-block bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors duration-300"
|
||||
>
|
||||
|
||||
@ -1,105 +0,0 @@
|
||||
.homeContainer {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.bannerTop {
|
||||
padding: 50px;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.bannerBottom h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.someclass {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 30px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
|
||||
.someclass img {
|
||||
width: 70vw;
|
||||
/* height: 500px; */
|
||||
}
|
||||
|
||||
.someclass h1 {
|
||||
font-size: 1.5rem;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.listCards {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
/* flex-wrap: wrap; */
|
||||
}
|
||||
|
||||
.serviceCard {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 100px;
|
||||
width: 25vw;
|
||||
border: 1px solid black;
|
||||
padding: 20px;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.serviceCard h1 {
|
||||
/* border-bottom: 1px solid black; */
|
||||
font-size: 1.5rem;
|
||||
padding: 10px;
|
||||
/* text-decoration: underline; */
|
||||
}
|
||||
|
||||
.imgHelper img {
|
||||
height: 300px !important;
|
||||
/* width: fit-content; */
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: inside;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.slogan {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
.listCards {
|
||||
display: block;
|
||||
/* width: 80vw; */
|
||||
}
|
||||
|
||||
.serviceCard {
|
||||
width: 80vw;
|
||||
margin-left: 0.5vw;
|
||||
}
|
||||
|
||||
.imgHelper img {
|
||||
width: fit;
|
||||
}
|
||||
|
||||
.homeContainer {
|
||||
width: 80vw;
|
||||
margin-left: 3vw;
|
||||
}
|
||||
|
||||
.bannerTop {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
// Reusable section header component
|
||||
// eslint-disable-next-line react/prop-types
|
||||
export function SectionHeader({ title, subtitle }) {
|
||||
export function SectionHeader({ title, subtitle, className }) {
|
||||
return (
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
|
||||
<div className={`text-center mb-16 text-white ${className}`}>
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||
{title}
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-blue-600 mx-auto mb-8"></div>
|
||||
{subtitle && (
|
||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
||||
<p className="text-xl max-w-2xl mx-auto">
|
||||
{subtitle}
|
||||
</p>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user