slyling commpleted, for now
This commit is contained in:
parent
f9ac37e414
commit
befb521604
@ -5,7 +5,7 @@ const Footer = () => {
|
||||
return (
|
||||
<>
|
||||
<footer
|
||||
className="bg-neutral-100 text-center text-neutral-600 dark:bg-neutral-600 dark:text-neutral-200 lg:text-left">
|
||||
className="text-center text-white bg-gradient-to-b from-cyan-900 to-cyan-800 lg:text-left">
|
||||
|
||||
|
||||
<div className="mx-6 py-10 text-center md:text-left">
|
||||
|
||||
@ -1,41 +1,145 @@
|
||||
import React from 'react'
|
||||
import './gallery.css'
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
// import { FiZoomIn } from 'react-icons/fi';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
function Gallery() {
|
||||
const [selectedImage, setSelectedImage] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const images = [
|
||||
{ id: 1, src: "1.jpg", alt: "Laboratory Equipment 1", category: "Lab" },
|
||||
{ id: 2, src: "2.jpg", alt: "Laboratory Equipment 2", category: "Lab" },
|
||||
{ id: 3, src: "3.jpg", alt: "Laboratory Equipment 3", category: "Lab" },
|
||||
{ id: 4, src: "4.jpg", alt: "Testing Process 1", category: "Testing" },
|
||||
{ id: 5, src: "5.jpg", alt: "Testing Process 2", category: "Testing" },
|
||||
{ id: 6, src: "6.jpg", alt: "Testing Process 3", category: "Testing" },
|
||||
{ id: 8, src: "8.jpg", alt: "Results 1", category: "Results" },
|
||||
{ id: 9, src: "9.jpg", alt: "Results 2", category: "Results" },
|
||||
{ id: 10, src: "10.jpg", alt: "Results 3", category: "Results" }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" })
|
||||
// Simulate images loading
|
||||
const loadImages = async () => {
|
||||
await Promise.all(
|
||||
images.map(img => {
|
||||
return new Promise((resolve) => {
|
||||
const image = new Image();
|
||||
image.src = img.src;
|
||||
image.onload = resolve;
|
||||
});
|
||||
})
|
||||
);
|
||||
setLoading(false);
|
||||
};
|
||||
loadImages();
|
||||
}, [])
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="gallery-container mt-32">
|
||||
<div className="img-container">
|
||||
<img src="1.jpg" alt="Image 1" className="hover:scale-110" />
|
||||
</div>
|
||||
<div className="img-container">
|
||||
<img src="2.jpg" alt="Image 2" className="hover:scale-110" />
|
||||
</div>
|
||||
<div className="img-container">
|
||||
<img src="3.jpg" alt="Image 3" className="hover:scale-110" />
|
||||
</div>
|
||||
<div className="img-container">
|
||||
<img src="4.jpg" alt="Image 4" className="hover:scale-110" />
|
||||
</div>
|
||||
<div className="img-container">
|
||||
<img src="5.jpg" alt="Image 5" className="hover:scale-110" />
|
||||
</div>
|
||||
<div className="img-container">
|
||||
<img src="6.jpg" alt="Image 6" className="hover:scale-110" />
|
||||
</div>
|
||||
<div className="img-container">
|
||||
<img src="8.jpg" alt="Image 8" className="hover:scale-110" />
|
||||
</div><div className="img-container">
|
||||
<img src="9.jpg" alt="Image 9" className="hover:scale-110" />
|
||||
</div><div className="img-container">
|
||||
<img src="10.jpg" alt="Image 10" className="hover:scale-110" />
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.5
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-cyan-900 to-cyan-800 py-20">
|
||||
{/* Hero Section */}
|
||||
<div className="container mx-auto px-4 mb-16 my-20">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
||||
Нашата Галерија
|
||||
</h1>
|
||||
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
||||
Погледнете ја нашата опрема и работен процес преку слики
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
) : (
|
||||
<motion.div
|
||||
className="container mx-auto px-4"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{images.map((image) => (
|
||||
<motion.div
|
||||
key={image.id}
|
||||
className=""
|
||||
variants={itemVariants}
|
||||
>
|
||||
<div className="aspect-w-16 aspect-h-12 rounded-xl overflow-hidden bg-white/10 backdrop-blur-lg">
|
||||
<img
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
className="w-full h-full object-cover transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||
<p className="text-white text-sm">{image.alt}</p>
|
||||
<span className="text-blue-400 text-xs">{image.category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedImage(image)}
|
||||
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-blue-500 p-3 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
>
|
||||
{/* <FiZoomIn className="w-6 h-6 text-white" /> */}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Image Modal */}
|
||||
{selectedImage && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4"
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
<div className="relative max-w-4xl w-full">
|
||||
<img
|
||||
src={selectedImage.src}
|
||||
alt={selectedImage.alt}
|
||||
className="w-full h-auto rounded-xl"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setSelectedImage(null)}
|
||||
className="absolute top-4 right-4 text-white hover:text-blue-400"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,30 +1,18 @@
|
||||
.gallery-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 50px;
|
||||
margin-left: 2vw;
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.aspect-w-16 {
|
||||
position: relative;
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.img-container img {
|
||||
width: 30vw;
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
.gallery-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 50px;
|
||||
margin-left: 3vw;
|
||||
}
|
||||
|
||||
.img-container img {
|
||||
width: 80vw;
|
||||
height: 40vh;
|
||||
}
|
||||
.aspect-w-16 > * {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
@ -17,7 +17,7 @@ export default function Navbar() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="absolute w-full z-50">
|
||||
<div className="absolute w-full z-50 py-10">
|
||||
<header className="relative bg-transparent">
|
||||
<nav
|
||||
className="container mx-auto flex items-center justify-between p-6 lg:px-8"
|
||||
|
||||
@ -20,9 +20,9 @@ export default function About() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-cyan-700/80 to-cyan-400">
|
||||
<div className="min-h-screen bg-gradient-to-b from-cyan-900 to-cyan-800">
|
||||
{/* Hero Section */}
|
||||
<div className="relative h-[60vh] overflow-hidden">
|
||||
<div className="relative h-[80vh] overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
src="/about-hero.webp"
|
||||
|
||||
@ -11,13 +11,13 @@ export default function Contact() {
|
||||
const [agreed, setAgreed] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="isolate bg-gray px-6 py-24 sm:py-32 lg:px-8">
|
||||
<div className="isolate bg-gray px-6 bg-gradient-to-b from-cyan-900 to-cyan-800 sm:py-32 lg:px-8">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
>
|
||||
|
||||
</div>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<div className="mx-auto max-w-2xl text-center mt-10">
|
||||
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-3xl">Пишете ни порака | Закажете средба</h2>
|
||||
{/* <p className="mt-2 text-lg leading-8 text-gray-600">
|
||||
take a wheel or let it slide
|
||||
@ -27,7 +27,7 @@ export default function Contact() {
|
||||
<form action="https://formsubmit.co/taratur@gmail.com" 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 htmlFor="first-name" className="block text-sm font-semibold leading-6 text-white">
|
||||
Име
|
||||
</label>
|
||||
<div className="mt-2.5">
|
||||
@ -41,7 +41,7 @@ export default function Contact() {
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="last-name" className="block text-sm font-semibold leading-6 text-gray-900">
|
||||
<label htmlFor="last-name" className="block text-sm font-semibold leading-6 text-white">
|
||||
Презиме
|
||||
</label>
|
||||
<div className="mt-2.5">
|
||||
@ -55,7 +55,7 @@ export default function Contact() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label htmlFor="company" className="block text-sm font-semibold leading-6 text-gray-900">
|
||||
<label htmlFor="company" className="block text-sm font-semibold leading-6 text-white">
|
||||
Компанија
|
||||
</label>
|
||||
<div className="mt-2.5">
|
||||
@ -69,7 +69,7 @@ export default function Contact() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label htmlFor="email" className="block text-sm font-semibold leading-6 text-gray-900">
|
||||
<label htmlFor="email" className="block text-sm font-semibold leading-6 text-white">
|
||||
Мејл
|
||||
</label>
|
||||
<div className="mt-2.5">
|
||||
@ -84,7 +84,7 @@ export default function Contact() {
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<label htmlFor="message" className="block text-sm font-semibold leading-6 text-gray-900">
|
||||
<label htmlFor="message" className="block text-sm font-semibold leading-6 text-white">
|
||||
Порака
|
||||
</label>
|
||||
<div className="mt-2.5">
|
||||
@ -100,7 +100,7 @@ export default function Contact() {
|
||||
<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>
|
||||
<input type="hidden" name="_next" value="https://imk.mk/"></input>
|
||||
<div className="mt-10">
|
||||
<button
|
||||
type="submit"
|
||||
|
||||
@ -46,12 +46,12 @@ const serviceCards = [
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-cyan-900 to-cyan-400">
|
||||
<div className="isolate bg-graymin-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">
|
||||
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-blue-600/80" />
|
||||
<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">
|
||||
@ -197,7 +197,7 @@ export default function Home() {
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="bg-blue-600 text-white py-24">
|
||||
<div className="isolate bg-gray bg-gradient-to-b from-blue-700 to-blue-500 text-white py-24">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-8">
|
||||
Спремни сме да ви помогнеме во вашиот следен проект
|
||||
|
||||
Loading…
Reference in New Issue
Block a user