ui refinements
This commit is contained in:
parent
8a4ecd913c
commit
d8df85baac
@ -1,32 +1,103 @@
|
||||
import React, { useEffect } from 'react'
|
||||
function Certificates() {
|
||||
import { useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Card } from '../UI/Card';
|
||||
import { ScrollDownArrow } from '../UI/ScrollDownArrow';
|
||||
|
||||
export default function Certificates() {
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" })
|
||||
}, [])
|
||||
// Ensure the scroll happens after the component is fully mounted
|
||||
const timer = setTimeout(() => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
});
|
||||
}, 100);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const certificates = [
|
||||
{
|
||||
id: 1,
|
||||
image: "/sertifikat1.jpg",
|
||||
alt: "Сертификат за акредитација",
|
||||
title: "Сертификат за акредитација",
|
||||
description: "Официјален сертификат за акредитација на нашата лабораторија"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/sertifikat2.jpg",
|
||||
alt: "Сертификат за квалитет",
|
||||
title: "Сертификат за квалитет",
|
||||
description: "Потврда за нашиот систем за управување со квалитет"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="cert-container">
|
||||
<div className="img-container1">
|
||||
<img src="/sertifikat1.jpg" alt="Image 1" />
|
||||
</div>
|
||||
<div className="img-container1">
|
||||
<img src="sertifikat2.jpg" alt="Image 2" />
|
||||
</div>
|
||||
{/* <div className="img-container1">
|
||||
<img src="sertifikat3.jpg" alt="Image 3" />
|
||||
</div>
|
||||
<div className="img-container1">
|
||||
<img src="sertifikat4" alt="Image 4" />
|
||||
</div> */}
|
||||
<div className="min-h-screen bg-neutral-50">
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-br from-primary-900 to-primary-700">
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
<div className="relative container-base h-screen flex items-center justify-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-display font-bold text-white mb-6">
|
||||
Сертификати и Акредитации
|
||||
</h1>
|
||||
<div className="w-24 h-1 bg-white/30 mx-auto mb-8"></div>
|
||||
<p className="text-xl text-neutral-100">
|
||||
Нашата посветеност кон квалитет и професионалност е потврдена со меѓународно признати сертификати
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
<ScrollDownArrow targetId="certificates-section" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
{/* Certificates Section */}
|
||||
<section id="certificates-section" className="py-24">
|
||||
<div className="container-base">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
{certificates.map((certificate, index) => (
|
||||
<motion.div
|
||||
key={certificate.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.2 }}
|
||||
>
|
||||
<Card className="h-full overflow-hidden hover:shadow-xl transition-all duration-300">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="relative aspect-[4/3] overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src={certificate.image}
|
||||
alt={certificate.alt}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</motion.div>
|
||||
<div className="p-6">
|
||||
<h2 className="text-xl font-display font-semibold text-neutral-900 mb-2">
|
||||
{certificate.title}
|
||||
</h2>
|
||||
<p className="text-neutral-600">
|
||||
{certificate.description}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Certificates
|
||||
41
frontend/src/components/UI/ScrollDownArrow.jsx
Normal file
41
frontend/src/components/UI/ScrollDownArrow.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export function ScrollDownArrow({ targetId = 'content' }) {
|
||||
const scrollToContent = () => {
|
||||
const contentSection = document.getElementById(targetId);
|
||||
contentSection?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
onClick={scrollToContent}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
y: [0, 10, 0]
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
repeat: Infinity,
|
||||
delay: 1
|
||||
}}
|
||||
className="absolute bottom-24 cursor-pointer focus:outline-none"
|
||||
aria-label="Scroll to content"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-12 w-12 text-white/80 hover:text-white transition-colors"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 14l-7 7m0 0l-7-7m7 7V3"
|
||||
/>
|
||||
</svg>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
@ -1,27 +1,89 @@
|
||||
import { useEffect } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { Card } from '../UI/Card'
|
||||
import { ScrollDownArrow } from '../UI/ScrollDownArrow'
|
||||
|
||||
export default function Consulting() {
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" })
|
||||
}, [])
|
||||
return (
|
||||
<>
|
||||
<div className="constaltingContainer">
|
||||
<h1 className="text-4xl text-center mt-32 font-bold tracking-tight text-gray-900 sm:text-3xl">Преглед на консултантски услуги</h1>
|
||||
<div className="anotherContainer text-center">
|
||||
<p className="tracking-tight text-gray-900 text-center sm:text-3xl mt-16">
|
||||
ИМК нуди низа консултантски услуги, предлагајќи комплексен пристап за поддршка на различни аспекти на индустриските операции. Услугите вклучуваат изработка на интегрирани дозволи, проценки на влијанието врз животната средина, проектна документација и студии за финансиска исплатливост на индустриските процеси.
|
||||
|
||||
</p>
|
||||
<ul className="tracking-tight text-gray-900 sm:text-2xl mt-16 text-center md:text-justify">
|
||||
<li><strong>Интегрирани Дозволи (А и Б):</strong> Компанијата нуди услуги поврзани со изработка на интегрирани дозволи. Ова покажува експертиза во справувањето со регулаторните рамки и обезбедување на согласност со лиценцните барања. Интегрираните дозволи се суштински за индустриските операции, што укажува на фокус на оптимизација на правните и регулаторни процеси.</li>
|
||||
<li><strong>Проценка на Влијанието врз Животната Средина:</strong> Консултантот обезбедува услуги за проценка на влијанието врз животната средина. Ова вклучува систематска евалуација на тоа како индустриските активности можат да влијаат на околната средина. Таквите проценки се суштински за обезбедување на одржливи практики и согласност со еколошките регулативи.</li>
|
||||
<li><strong>Проектна Документација за Производствени Објекти:</strong> ИМК нуди изработка на проектна документација специфично дизајнирана за производствени објекти, земајки ги предвид различните аспекти на дизајнирање и оптимизација на индустриските операции.</li>
|
||||
<li><strong>Проекти за Финасиска Ефикасност за Производствени Објекти:</strong> ИМК нуди експертиза во креирање на ценовна ефикасност за производствени капацитети. Ова вклучува анализа на постоечките процеси и идентификација на можностите за оптимизација за подобрување на продуктивноста и намалување на оперативните трошоци. Фокусот на ценовната ефикасност покажува посветеност кон подобрување на општата финансиска перформанса на индустриските операции.</li>
|
||||
<li><strong>Елаборати за Финансиска Исплатливост на Производствени Процеси:</strong> ИМК изработува елаборати (детални извештаи) фокусирани на проценка на финансиската исплатливост на производствените процеси. Тие ги вклучуваат економските можности и оправданоста/одржливоста на проектираните или постоечките производствени процеси.</li>
|
||||
</ul>
|
||||
const consultingServices = [
|
||||
{
|
||||
title: "Интегрирани Дозволи (А и Б)",
|
||||
description: "Компанијата нуди услуги поврзани со изработка на интегрирани дозволи. Ова покажува експертиза во справувањето со регулаторните рамки и обезбедување на согласност со лиценцните барања. Интегрираните дозволи се суштински за индустриските операции, што укажува на фокус на оптимизација на правните и регулаторни процеси."
|
||||
},
|
||||
{
|
||||
title: "Проценка на Влијанието врз Животната Средина",
|
||||
description: "Консултантот обезбедува услуги за проценка на влијанието врз животната средина. Ова вклучува систематска евалуација на тоа како индустриските активности можат да влијаат на околната средина. Таквите проценки се суштински за обезбедување на одржливи практики и согласност со еколошките регулативи."
|
||||
},
|
||||
{
|
||||
title: "Проектна Документација за Производствени Објекти",
|
||||
description: "ИМК нуди изработка на проектна документација специфично дизајнирана за производствени објекти, земајки ги предвид различните аспекти на дизајнирање и оптимизација на индустриските операции."
|
||||
},
|
||||
{
|
||||
title: "Проекти за Финасиска Ефикасност за Производствени Објекти",
|
||||
description: "ИМК нуди експертиза во креирање на ценовна ефикасност за производствени капацитети. Ова вклучува анализа на постоечките процеси и идентификација на можностите за оптимизација за подобрување на продуктивноста и намалување на оперативните трошоци."
|
||||
},
|
||||
{
|
||||
title: "Елаборати за Финансиска Исплатливост на Производствени Процеси",
|
||||
description: "ИМК изработува елаборати (детални извештаи) фокусирани на проценка на финансиската исплатливост на производствените процеси. Тие ги вклучуваат економските можности и оправданоста/одржливоста на проектираните или постоечките производствени процеси."
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-neutral-50">
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-br from-primary-900 to-primary-700">
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
<div className="relative container-base h-screen flex items-center justify-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-display font-bold text-white mb-6">
|
||||
Преглед на консултантски услуги
|
||||
</h1>
|
||||
<div className="w-24 h-1 bg-white/30 mx-auto mb-8"></div>
|
||||
<p className="text-xl text-neutral-100">
|
||||
ИМК нуди низа консултантски услуги, предлагајќи комплексен пристап за поддршка на различни аспекти на индустриските операции.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<ScrollDownArrow targetId="services-section" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</section>
|
||||
|
||||
{/* Services Section */}
|
||||
<section id="services-section" className="py-24">
|
||||
<div className="container-base">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{consultingServices.map((service, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="h-full hover:shadow-lg transition-shadow duration-300">
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-display font-semibold text-neutral-900 mb-4">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-neutral-600 leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,122 +1,130 @@
|
||||
import { useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Card } from '../UI/Card';
|
||||
import { ScrollDownArrow } from '../UI/ScrollDownArrow';
|
||||
|
||||
export default function Lab() {
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" })
|
||||
}, [])
|
||||
|
||||
const scrollToContent = () => {
|
||||
const contentSection = document.getElementById('services-section');
|
||||
contentSection?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const labServices = [
|
||||
{
|
||||
title: "Испитувањето на бетон",
|
||||
description: [
|
||||
"е важен процес кој се користи за да се оцени квалитетот и издржливоста на бетонски конструкции.",
|
||||
"Испитувањето на бетонот е неопходен процес за осигурување на квалитет и безбедност на градежните проекти и инфраструктурата воопшто. Тоа помага во отстранивање на недостатоците и намалување на ризиците од евентуални пропаднувања на конструкциите."
|
||||
],
|
||||
image: "/kocki.webp",
|
||||
alt: "Испитување на бетон"
|
||||
},
|
||||
{
|
||||
title: "Испитувањето на руди, метали и троски",
|
||||
description: [
|
||||
"е важен процес во областа на геолошкото и металуршко инженерство, со цел да се анализираат и одредат својствата и составот на суровините и производите.",
|
||||
"Овие испитувања се изведуваат за да се осигура квалитетот и спецификациите на материјалите, како и за да се обезбеди безбедно и ефикасно користење и обработка на руди, метали и троски во различни индустрии и апликации."
|
||||
],
|
||||
image: "/lab.webp",
|
||||
alt: "Испитување на руди и метали"
|
||||
},
|
||||
{
|
||||
title: "Испитувањето на челик",
|
||||
description: [
|
||||
"е важен процес за одредување на квалитетот, издржливоста и други механички својства на челикот, кој се користи во разни индустрии и конструкции.",
|
||||
"Испитувањето на челик е неопходен процес за да се обезбеди квалитетот и безбедноста на производите и конструкциите кои го користат, како и за да се уверите дека челикот одговара на спецификациите и стандардите."
|
||||
],
|
||||
image: "/armatura.jpg",
|
||||
alt: "Испитување на челик"
|
||||
},
|
||||
{
|
||||
title: "Лабораториската екстракција",
|
||||
description: [
|
||||
"на метали или неметали од руди и троски е процес кој се користи за да се изолираат и оддели материјалите од суровините или отпадните производи, како што се рудите или троските, со цел да се добие чист метал или неметал."
|
||||
],
|
||||
image: "/geotehnika.webp",
|
||||
alt: "Лабораториска екстракција"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
{/* Header */}
|
||||
<div className="mt-8 mb-16 text-center">
|
||||
<h1 className="text-3xl md:text-4xl font-semibold capitalize text-gray-800 mb-4">
|
||||
во нашата лабораторија се вршат
|
||||
</h1>
|
||||
<div className="w-24 h-1 bg-blue-500 mx-auto"></div>
|
||||
</div>
|
||||
<div className="min-h-screen bg-neutral-50">
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-br from-primary-900 to-primary-700">
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
<div className="relative container-base h-screen flex items-center justify-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-display font-bold text-white mb-6">
|
||||
Во нашата лабораторија се вршат
|
||||
</h1>
|
||||
<div className="w-24 h-1 bg-white/30 mx-auto mb-8"></div>
|
||||
<p className="text-xl text-neutral-100">
|
||||
Професионални испитувања со најсовремена опрема и стручен тим
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="space-y-16">
|
||||
{/* Concrete Testing Section */}
|
||||
<div className="flex flex-col md:flex-row items-center gap-8 md:gap-16">
|
||||
<div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4">
|
||||
Испитувањето на бетон
|
||||
</h2>
|
||||
<div className="space-y-4 text-gray-600">
|
||||
<p>
|
||||
е важен процес кој се користи за да се оцени квалитетот и издржливоста на бетонски конструкции.
|
||||
</p>
|
||||
<p>
|
||||
Испитувањето на бетонот е неопходен процес за осигурување на квалитет и безбедност на градежните проекти и инфраструктурата воопшто.
|
||||
Тоа помага во отстранивање на недостатоците и намалување на ризиците од евентуални пропаднувања на конструкциите.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2">
|
||||
<img
|
||||
src="/kocki.webp"
|
||||
alt="Испитување на бетон"
|
||||
loading="lazy"
|
||||
className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ore and Metal Testing Section */}
|
||||
<div className="flex flex-col md:flex-row-reverse items-center gap-8 md:gap-16">
|
||||
<div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4">
|
||||
Испитувањето на руди, метали и троски
|
||||
</h2>
|
||||
<div className="space-y-4 text-gray-600">
|
||||
<p>
|
||||
е важен процес во областа на геолошкото и металуршко инженерство, со цел да се анализираат и одредат својствата и составот на суровините и производите.
|
||||
</p>
|
||||
<p>
|
||||
Овие испитувања се изведуваат за да се осигура квалитетот и спецификациите на материјалите, како и за да се обезбеди безбедно и ефикасно користење и обработка на руди, метали и троски во различни индустрии и апликации.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2">
|
||||
<img
|
||||
src="/lab.webp"
|
||||
alt="Испитување на руди и метали"
|
||||
loading="lazy"
|
||||
className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Steel Testing Section */}
|
||||
<div className="flex flex-col md:flex-row items-center gap-8 md:gap-16">
|
||||
<div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4">
|
||||
Испитувањето на челик
|
||||
</h2>
|
||||
<div className="space-y-4 text-gray-600">
|
||||
<p>
|
||||
е важен процес за одредување на квалитетот, издржливоста и други механички својства на челикот, кој се користи во разни индустрии и конструкции.
|
||||
</p>
|
||||
<p>
|
||||
Испитувањето на челик е неопходен процес за да се обезбеди квалитетот и безбедноста на производите и конструкциите кои го користат, како и за да се уверите дека челикот одговара на спецификациите и стандардите.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2">
|
||||
<img
|
||||
src="/armatura.jpg"
|
||||
alt="Испитување на челик"
|
||||
loading="lazy"
|
||||
className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Laboratory Extraction Section */}
|
||||
<div className="flex flex-col md:flex-row-reverse items-center gap-8 md:gap-16">
|
||||
<div className="w-full md:w-1/2 p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-4">
|
||||
Лабораториската екстракција
|
||||
</h2>
|
||||
<div className="space-y-4 text-gray-600">
|
||||
<p>
|
||||
на метали или неметали од руди и троски е процес кој се користи за да се изолираат и оддели материјалите од суровините или отпадните производи, како што се рудите или троските, со цел да се добие чист метал или неметал.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2">
|
||||
<img
|
||||
src="/geotehnika.webp"
|
||||
alt="Лабораториска екстракција"
|
||||
loading="lazy"
|
||||
className="rounded-xl shadow-lg w-full h-[400px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<ScrollDownArrow targetId="services-section" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Section */}
|
||||
<section id="services-section" className="py-24">
|
||||
<div className="container-base">
|
||||
<div className="space-y-24">
|
||||
{labServices.map((service, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className={`flex flex-col ${index % 2 === 0 ? 'md:flex-row' : 'md:flex-row-reverse'} items-center gap-8 md:gap-16`}
|
||||
>
|
||||
<div className="w-full md:w-1/2">
|
||||
<Card className="h-full hover:shadow-xl transition-shadow duration-300">
|
||||
<div className="p-8">
|
||||
<h2 className="text-2xl font-display font-bold text-neutral-900 mb-6">
|
||||
{service.title}
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{service.description.map((paragraph, idx) => (
|
||||
<p key={idx} className="text-neutral-600 leading-relaxed">
|
||||
{paragraph}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<img
|
||||
src={service.image}
|
||||
alt={service.alt}
|
||||
loading="lazy"
|
||||
className="rounded-xl shadow-lg w-full h-[400px] object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,15 +1,176 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Card } from '../UI/Card';
|
||||
|
||||
export default function UltraSound() {
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: -100, behavior: "smooth" })
|
||||
window.scrollTo({ top: 0, behavior: "smooth" })
|
||||
}, [])
|
||||
|
||||
const scrollToContent = () => {
|
||||
const contentSection = document.getElementById('video-section');
|
||||
contentSection?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const videoDetails = {
|
||||
title: "Ултразвучно испитување",
|
||||
description: "Ултразвучното испитување е неразорна метода за испитување на материјали која користи високофреквентни звучни бранови за откривање на внатрешни дефекти или за карактеризација на материјалите.",
|
||||
benefits: [
|
||||
"Неразорно испитување - не предизвикува оштетување на материјалот",
|
||||
"Висока прецизност во откривањето на дефекти",
|
||||
"Можност за испитување на различни материјали и дебелини",
|
||||
"Брзи и точни резултати",
|
||||
"Безбедна метода за операторот и околината"
|
||||
],
|
||||
applications: [
|
||||
"Испитување на заварени споеви",
|
||||
"Детекција на пукнатини и празнини",
|
||||
"Мерење на дебелина на материјали",
|
||||
"Контрола на квалитет во производство",
|
||||
"Инспекција на метални конструкции"
|
||||
],
|
||||
videoUrl: "https://www.youtube.com/embed/WGjG8XWS9RQ?si=fE2aL5eZ-5ivuuxV"
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="ultraSoundContainer flex justify-around mt-40">
|
||||
<iframe width="1120" height="630" src="https://www.youtube.com/embed/WGjG8XWS9RQ?si=fE2aL5eZ-5ivuuxV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
<div className="min-h-screen bg-neutral-50">
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-br from-primary-900 to-primary-700">
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
<div className="relative container-base h-screen flex items-center justify-center">
|
||||
<div className="flex flex-col items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="max-w-3xl mx-auto text-center"
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-display font-bold text-white mb-6">
|
||||
{videoDetails.title}
|
||||
</h1>
|
||||
<div className="w-24 h-1 bg-white/30 mx-auto mb-8"></div>
|
||||
<p className="text-xl text-neutral-100">
|
||||
{videoDetails.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Animated Down Arrow */}
|
||||
<motion.button
|
||||
onClick={scrollToContent}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
y: [0, 10, 0]
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
repeat: Infinity,
|
||||
delay: 1
|
||||
}}
|
||||
className="absolute bottom-24 cursor-pointer focus:outline-none"
|
||||
aria-label="Scroll to content"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-12 w-12 text-white/80 hover:text-white transition-colors"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 14l-7 7m0 0l-7-7m7 7V3"
|
||||
/>
|
||||
</svg>
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Video Section */}
|
||||
<section id="video-section" className="py-24">
|
||||
<div className="container-base">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="aspect-video rounded-xl overflow-hidden shadow-xl"
|
||||
>
|
||||
<iframe
|
||||
className="w-full h-full"
|
||||
src={videoDetails.videoUrl}
|
||||
title="Ултразвучно испитување демонстрација"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowFullScreen
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Info Section */}
|
||||
<section className="py-24 bg-white">
|
||||
<div className="container-base">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<Card className="h-full">
|
||||
<div className="p-8">
|
||||
<h2 className="text-2xl font-display font-bold text-neutral-900 mb-6">
|
||||
Придобивки
|
||||
</h2>
|
||||
<ul className="space-y-4">
|
||||
{videoDetails.benefits.map((benefit, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="flex items-start"
|
||||
>
|
||||
<span className="flex-shrink-0 w-1.5 h-1.5 mt-2 rounded-full bg-primary-600 mr-3" />
|
||||
<span className="text-neutral-600">{benefit}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<Card className="h-full">
|
||||
<div className="p-8">
|
||||
<h2 className="text-2xl font-display font-bold text-neutral-900 mb-6">
|
||||
Примена
|
||||
</h2>
|
||||
<ul className="space-y-4">
|
||||
{videoDetails.applications.map((application, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="flex items-start"
|
||||
>
|
||||
<span className="flex-shrink-0 w-1.5 h-1.5 mt-2 rounded-full bg-primary-600 mr-3" />
|
||||
<span className="text-neutral-600">{application}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { FiTrendingUp, FiAward, FiCheckCircle } from "react-icons/fi";
|
||||
import { Button, Card } from "../../components/UI";
|
||||
import { ScrollDownArrow } from '../../components/UI/ScrollDownArrow';
|
||||
|
||||
const milestones = [
|
||||
{ year: "2008", title: "Основање на компанијата" },
|
||||
@ -46,29 +47,36 @@ export default function About() {
|
||||
<section className="relative h-screen overflow-hidden bg-gradient-to-br from-primary-900 to-primary-700">
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
<div className="relative container-base h-full flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-4xl md:text-6xl font-display font-bold text-white mb-6"
|
||||
>
|
||||
За Нас
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="text-xl text-neutral-100 mb-8"
|
||||
>
|
||||
Повеќе од 15 години искуство во обезбедување квалитет
|
||||
</motion.p>
|
||||
<div className="flex flex-col h-full w-full">
|
||||
<div className="flex-grow flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-4xl md:text-6xl font-display font-bold text-white mb-6"
|
||||
>
|
||||
За Нас
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="text-xl text-neutral-100 mb-8"
|
||||
>
|
||||
Повеќе од 15 години искуство во обезбедување квалитет
|
||||
</motion.p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center mb-12">
|
||||
<ScrollDownArrow targetId="vision-section" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Vision & Mission Section */}
|
||||
<section className="py-24 bg-neutral-50">
|
||||
<section id="vision-section" className="py-24 bg-neutral-50">
|
||||
<div className="container-base">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-display font-bold text-neutral-900 mb-4">
|
||||
|
||||
@ -2,6 +2,7 @@ import { Link } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowRightIcon, CheckCircleIcon } from "@heroicons/react/24/outline";
|
||||
import { Button, Card } from "../../components/UI";
|
||||
import { ScrollDownArrow } from '../../components/UI/ScrollDownArrow';
|
||||
|
||||
const serviceCards = [
|
||||
{
|
||||
@ -54,52 +55,59 @@ export default function Home() {
|
||||
<div className="absolute inset-0 bg-black/20" />
|
||||
|
||||
<div className="relative container-base h-full flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-4xl md:text-6xl font-display font-bold text-white mb-6"
|
||||
>
|
||||
Вашиот партнер во контролата на безбедно градење
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-xl text-neutral-100 mb-8"
|
||||
>
|
||||
Професионални лабораториски услуги со најсовремена опрема и
|
||||
експертиза
|
||||
</motion.p>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<Button
|
||||
to="/contact"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="bg-white text-primary-600 hover:bg-neutral-100"
|
||||
>
|
||||
Контактирајте нѐ
|
||||
</Button>
|
||||
<Button
|
||||
to="/about"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="text-white border-white hover:bg-white/10"
|
||||
>
|
||||
Дознајте повеќе
|
||||
</Button>
|
||||
</motion.div>
|
||||
<div className="flex flex-col h-full w-full">
|
||||
<div className="flex-grow flex items-center">
|
||||
<div className="max-w-3xl">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-4xl md:text-6xl font-display font-bold text-white mb-6"
|
||||
>
|
||||
Вашиот партнер во контролата на безбедно градење
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-xl text-neutral-100 mb-8"
|
||||
>
|
||||
Професионални лабораториски услуги со најсовремена опрема и
|
||||
експертиза
|
||||
</motion.p>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<Button
|
||||
to="/contact"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="bg-white text-primary-600 hover:bg-neutral-100"
|
||||
>
|
||||
Контактирајте нѐ
|
||||
</Button>
|
||||
<Button
|
||||
to="/about"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="text-white border-white hover:bg-white/10"
|
||||
>
|
||||
Дознајте повеќе
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center mb-12">
|
||||
<ScrollDownArrow targetId="services-section" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Section */}
|
||||
<section className="bg-neutral-50 py-24">
|
||||
<section id="services-section" className="bg-neutral-50 py-24 h-screen">
|
||||
<div className="container-base">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-display font-bold text-neutral-900 mb-4">
|
||||
@ -155,52 +163,7 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Clients Section */}
|
||||
{/* <section className="bg-gradient-to-br from-primary-900 to-primary-700 py-24">
|
||||
<div className="container-base">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-display font-bold text-white mb-4">
|
||||
Наши Клиенти
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-white mx-auto mb-8"></div>
|
||||
<p className="text-xl text-neutral-100 max-w-2xl mx-auto">
|
||||
Горди сме на довербата која ни ја укажуваат нашите клиенти
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
{[1, 2, 3, 4].map((index) => (
|
||||
<Card
|
||||
key={index}
|
||||
className="p-8 hover:shadow-lg transition-shadow duration-300"
|
||||
>
|
||||
<img
|
||||
src={`/client-${index}.png`}
|
||||
alt={`Client ${index}`}
|
||||
className="w-full h-20 object-contain grayscale hover:grayscale-0 transition-all duration-300"
|
||||
/>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section> */}
|
||||
|
||||
{/* CTA Section */}
|
||||
{/* <section className="bg-gradient-to-br from-primary-800 to-primary-600 py-24">
|
||||
<div className="container-base text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-display font-bold text-white mb-8">
|
||||
Спремни сме да ви помогнеме во вашиот следен проект
|
||||
</h2>
|
||||
<Button
|
||||
to="/contact"
|
||||
variant="primary"
|
||||
size="lg"
|
||||
className="bg-white text-primary-600 hover:bg-neutral-100"
|
||||
>
|
||||
Контактирајте нѐ
|
||||
</Button>
|
||||
</div>
|
||||
</section> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user