|
|
<!DOCTYPE html> |
|
|
<html lang="pl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ARTSCore.pro - Wn臋trza Premium dla Inwestycji Nieruchomo艣ciowych</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script> |
|
|
<script src="https://unpkg.com/scrollreveal"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
DEFAULT: '#0F172A', |
|
|
50: '#F8FAFC', |
|
|
100: '#F1F5F9', |
|
|
200: '#E2E8F0', |
|
|
300: '#CBD5E1', |
|
|
400: '#94A3B8', |
|
|
500: '#64748B', |
|
|
600: '#475569', |
|
|
700: '#334155', |
|
|
800: '#1E293B', |
|
|
900: '#0F172A', |
|
|
}, |
|
|
secondary: { |
|
|
DEFAULT: '#D4AF37', |
|
|
50: '#FDF8E8', |
|
|
100: '#FAEDC6', |
|
|
200: '#F5DC8F', |
|
|
300: '#EFC958', |
|
|
400: '#D4AF37', |
|
|
500: '#B8972D', |
|
|
600: '#9C7F24', |
|
|
700: '#80671C', |
|
|
800: '#645014', |
|
|
900: '#48380D', |
|
|
}, |
|
|
accent: '#1D4ED8', |
|
|
dark: '#020617', |
|
|
light: '#F8FAFC', |
|
|
}, |
|
|
fontFamily: { |
|
|
heading: ['"Playfair Display"', 'serif'], |
|
|
subheading: ['"Cormorant Garamond"', 'serif'], |
|
|
body: ['"Open Sans"', 'sans-serif'], |
|
|
elegant: ['"Montserrat"', 'sans-serif'], |
|
|
}, |
|
|
animation: { |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'pulse-slow': 'pulse 6s ease-in-out infinite', |
|
|
'spin-slow': 'spin 20s linear infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-20px)' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--gold-gradient: linear-gradient(135deg, #D4AF37 0%, #F5DC8F 50%, #D4AF37 100%); |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 10px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: var(--gold-gradient); |
|
|
border-radius: 10px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #D4AF37; |
|
|
} |
|
|
|
|
|
|
|
|
.hero-overlay { |
|
|
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 100%); |
|
|
} |
|
|
|
|
|
|
|
|
.gold-text { |
|
|
background: var(--gold-gradient); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
text-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-8px) scale(1.02); |
|
|
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
|
|
|
.gold-border { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.gold-border::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: var(--gold-gradient); |
|
|
transition: width 0.4s ease; |
|
|
} |
|
|
|
|
|
.gold-border:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
|
|
|
.btn-gold { |
|
|
background: var(--gold-gradient); |
|
|
background-size: 200% auto; |
|
|
transition: all 0.5s ease; |
|
|
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); |
|
|
} |
|
|
|
|
|
.btn-gold:hover { |
|
|
background-position: right center; |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
@keyframes slideUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(40px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes scaleIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: scale(0.8); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
} |
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 1.2s ease-out forwards; |
|
|
} |
|
|
|
|
|
.animate-slide-up { |
|
|
animation: slideUp 1s ease-out forwards; |
|
|
} |
|
|
|
|
|
.animate-scale-in { |
|
|
animation: scaleIn 0.8s ease-out forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.counter { |
|
|
transition: all 1.5s ease-out; |
|
|
} |
|
|
|
|
|
|
|
|
.section-divider { |
|
|
position: relative; |
|
|
height: 100px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.section-divider::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: -5%; |
|
|
top: 0; |
|
|
width: 110%; |
|
|
height: 100%; |
|
|
background: #F8FAFC; |
|
|
transform: skewY(-3deg); |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.form-input { |
|
|
transition: all 0.3s ease; |
|
|
border: 1px solid #E2E8F0; |
|
|
} |
|
|
|
|
|
.form-input:focus { |
|
|
border-color: #D4AF37; |
|
|
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.custom-checkbox { |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border: 2px solid #CBD5E1; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.custom-checkbox:checked { |
|
|
background-color: #D4AF37; |
|
|
border-color: #D4AF37; |
|
|
} |
|
|
|
|
|
.custom-checkbox:checked::after { |
|
|
content: '\f00c'; |
|
|
font-family: 'Font Awesome 6 Free'; |
|
|
font-weight: 900; |
|
|
position: absolute; |
|
|
color: white; |
|
|
font-size: 12px; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
|
|
|
|
|
|
.floating-element { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.particles { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
overflow: hidden; |
|
|
z-index: 0; |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
background: rgba(212, 175, 55, 0.6); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
|
|
|
.video-background { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
|
|
|
.testimonial-quote::before { |
|
|
content: '\201C'; |
|
|
font-family: Georgia, serif; |
|
|
font-size: 60px; |
|
|
color: #D4AF37; |
|
|
position: absolute; |
|
|
left: -20px; |
|
|
top: -20px; |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
.testimonial-quote::after { |
|
|
content: '\201D'; |
|
|
font-family: Georgia, serif; |
|
|
font-size: 60px; |
|
|
color: #D4AF37; |
|
|
position: absolute; |
|
|
right: -20px; |
|
|
bottom: -40px; |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
|
|
|
.mobile-menu { |
|
|
transition: all 0.5s ease; |
|
|
transform: translateY(-100%); |
|
|
} |
|
|
|
|
|
.mobile-menu.open { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
|
|
|
.header-scrolled { |
|
|
background-color: rgba(15, 23, 42, 0.98) !important; |
|
|
backdrop-filter: blur(10px); |
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); |
|
|
padding-top: 10px; |
|
|
padding-bottom: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.card-3d { |
|
|
transform-style: preserve-3d; |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
|
|
|
.card-3d:hover { |
|
|
transform: rotateY(10deg) rotateX(5deg) translateY(-10px); |
|
|
} |
|
|
|
|
|
|
|
|
.gradient-underline { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.gradient-underline::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 3px; |
|
|
background: var(--gold-gradient); |
|
|
transform: scaleX(0); |
|
|
transform-origin: left; |
|
|
transition: transform 0.4s ease; |
|
|
} |
|
|
|
|
|
.gradient-underline:hover::after { |
|
|
transform: scaleX(1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-body text-gray-800 antialiased overflow-x-hidden scroll-smooth" id="top"> |
|
|
|
|
|
<div id="preloader" class="fixed inset-0 bg-primary z-[9999] flex items-center justify-center transition-opacity duration-700 ease-in-out"> |
|
|
<div class="relative"> |
|
|
<div class="w-24 h-24 border-4 border-secondary border-t-transparent rounded-full animate-spin-slow"></div> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<span class="text-2xl font-bold text-secondary font-heading animate-pulse-slow">ARTS</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-10 left-0 right-0 text-center"> |
|
|
<p class="text-white/80 text-sm font-elegant tracking-widest animate-fade-in-delay">Loading Luxury Experience</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed top-0 left-0 right-0 h-1 z-50 bg-primary-900"> |
|
|
<div id="scroll-progress" class="h-full bg-gradient-to-r from-secondary to-secondary-300 transition-all duration-300 ease-out" style="width: 0%"></div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="w-24 h-24 border-4 border-secondary border-t-transparent rounded-full animate-spin-slow"></div> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<span class="text-2xl font-bold text-secondary font-heading">ARTS</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="particles" id="particles"></div> |
|
|
|
|
|
|
|
|
<header id="main-header" class="fixed w-full z-50 transition-all duration-500 bg-transparent"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<a href="#" class="text-3xl font-bold text-white font-heading relative group"> |
|
|
<span class="gold-text">ARTS</span><span class="text-white">Core.pro</span> |
|
|
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300 group-hover:w-full"></span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden lg:flex items-center space-x-12"> |
|
|
<nav class="flex items-center space-x-10"> |
|
|
<a href="#services" class="text-white hover:text-secondary transition-all duration-300 font-elegant font-medium text-lg relative group nav-link"> |
|
|
<span class="relative z-10">Us艂ugi</span> |
|
|
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300 group-hover:w-full"></span> |
|
|
</a> |
|
|
<a href="#portfolio" class="text-white hover:text-secondary transition-all duration-300 font-elegant font-medium text-lg relative gold-border"> |
|
|
Portfolio |
|
|
</a> |
|
|
<a href="#about" class="text-white hover:text-secondary transition-all duration-300 font-elegant font-medium text-lg relative gold-border"> |
|
|
O nas |
|
|
</a> |
|
|
<a href="#contact" class="text-white hover:text-secondary transition-all duration-300 font-elegant font-medium text-lg relative gold-border"> |
|
|
Kontakt |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<div class="flex items-center space-x-6"> |
|
|
|
|
|
<div class="relative group"> |
|
|
<button class="flex items-center text-white hover:text-secondary transition-all"> |
|
|
<i class="fas fa-globe mr-2 text-secondary"></i> |
|
|
<span class="font-elegant">PL</span> |
|
|
<i class="fas fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180"></i> |
|
|
</button> |
|
|
<div class="absolute right-0 mt-2 w-32 bg-white rounded-lg shadow-xl py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0"> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">English</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100">Deutsch</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<a href="#contact" class="btn-gold text-primary-900 px-8 py-3 rounded-full font-semibold font-elegant transition-all transform hover:scale-105 relative overflow-hidden group"> |
|
|
<span class="relative z-10">Um贸w konsultacj臋</span> |
|
|
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button class="lg:hidden focus:outline-none text-white transition-transform duration-300 active:scale-95" id="mobile-menu-button" aria-label="Toggle menu" aria-expanded="false"> |
|
|
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:hidden mobile-menu absolute w-full bg-primary-900 bg-opacity-95 backdrop-blur-md z-40" id="mobile-menu"> |
|
|
<div class="container mx-auto px-6 py-8"> |
|
|
<div class="flex flex-col space-y-6"> |
|
|
<a href="#services" class="text-white text-xl font-medium py-2 border-b border-gray-700 hover:text-secondary transition">Us艂ugi</a> |
|
|
<a href="#portfolio" class="text-white text-xl font-medium py-2 border-b border-gray-700 hover:text-secondary transition">Portfolio</a> |
|
|
<a href="#about" class="text-white text-xl font-medium py-2 border-b border-gray-700 hover:text-secondary transition">O nas</a> |
|
|
<a href="#contact" class="text-white text-xl font-medium py-2 border-b border-gray-700 hover:text-secondary transition">Kontakt</a> |
|
|
|
|
|
<div class="pt-6"> |
|
|
<a href="#contact" class="btn-gold text-primary-900 px-6 py-3 rounded-full font-semibold w-full text-center block"> |
|
|
Um贸w konsultacj臋 |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center space-x-4 pt-4"> |
|
|
<a href="#" class="text-white hover:text-secondary transition"><i class="fab fa-instagram text-2xl"></i></a> |
|
|
<a href="#" class="text-white hover:text-secondary transition"><i class="fab fa-linkedin text-2xl"></i></a> |
|
|
<a href="#" class="text-white hover:text-secondary transition"><i class="fab fa-facebook text-2xl"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="relative h-screen flex items-center justify-center overflow-hidden" id="hero"> |
|
|
|
|
|
<div class="absolute inset-0 z-0"> |
|
|
<video autoplay muted loop playsinline class="video-background w-full h-full object-cover filter brightness-90 contrast-105"> |
|
|
<source src="https://assets.mixkit.co/videos/preview/mixkit-architectural-details-of-a-luxury-home-41033-large.mp4" type="video/mp4"> |
|
|
</video> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/60 to-primary/30 mix-blend-overlay"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute inset-0 hero-overlay z-10"></div> |
|
|
|
|
|
|
|
|
<div class="absolute top-20 left-20 w-16 h-16 rounded-full bg-secondary opacity-20 filter blur-xl floating-element"></div> |
|
|
<div class="absolute bottom-1/4 right-1/4 w-24 h-24 rounded-full bg-secondary opacity-15 filter blur-xl floating-element" style="animation-delay: 1s;"></div> |
|
|
<div class="absolute top-1/3 right-20 w-12 h-12 rounded-full bg-secondary opacity-25 filter blur-lg floating-element" style="animation-delay: 2s;"></div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-6 relative z-20 text-center"> |
|
|
<h1 class="text-5xl md:text-7xl lg:text-8xl font-bold text-white mb-8 font-heading leading-tight"> |
|
|
<span class="gold-text animate-slide-up inline-block" style="text-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);">Wn臋trza</span> <span class="text-white opacity-0 animate-fade-in" style="animation-delay: 0.3s;">kt贸re</span><br> |
|
|
<span class="text-white opacity-0 animate-slide-up inline-block tracking-wider" style="animation-delay: 0.6s; text-shadow: 0 2px 4px rgba(0,0,0,0.2); letter-spacing: 0.05em;">sprzedaj膮</span> <span class="text-white opacity-0 animate-fade-in inline-block" style="animation-delay: 0.9s;">Twoje</span><br> |
|
|
<span class="gradient-underline opacity-0 animate-slide-up" style="animation-delay: 1.2s; letter-spacing: 0.1em;">INWESTYCJE</span> |
|
|
</h1> |
|
|
|
|
|
<p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-4xl mx-auto font-elegant animate-slide-up" style="animation-delay: 0.2s;"> |
|
|
Profesjonalne projektowanie wn臋trz premium, kt贸re maksymalizuje warto艣膰 nieruchomo艣ci i przyspiesza ich sprzeda偶 |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16 animate-slide-up" style="animation-delay: 0.4s;"> |
|
|
<div class="bg-white bg-opacity-5 backdrop-blur-lg rounded-xl p-8 border border-white border-opacity-10 hover:border-opacity-40 transition-all duration-500 card-3d group"> |
|
|
<div class="text-5xl font-bold gold-text mb-3 counter transition-transform group-hover:scale-105" data-target="30">0</div> |
|
|
<p class="text-white font-elegant text-lg tracking-wider">% wzrostu warto艣ci nieruchomo艣ci</p> |
|
|
<div class="mt-6"> |
|
|
<div class="relative w-full h-1 bg-gray-700/50 rounded-full overflow-hidden"> |
|
|
<div class="absolute top-0 left-0 h-full bg-secondary rounded-full transition-all duration-1000 ease-out" style="width: 0%" data-width="30%"> |
|
|
<div class="absolute right-0 top-1/2 w-4 h-4 transform translate-x-1/2 -translate-y-1/2 bg-gradient-to-br from-secondary to-secondary-300 rounded-full opacity-0 group-hover:opacity-100 transition-opacity shadow-gold"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute inset-0 border-2 border-transparent group-hover:border-secondary/20 rounded-xl pointer-events-none transition-all duration-300"></div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 backdrop-blur-md rounded-xl p-8 border border-white border-opacity-20 card-3d"> |
|
|
<div class="text-5xl font-bold gold-text mb-3 counter" data-target="50">0</div> |
|
|
<p class="text-white font-elegant text-lg">% szybsza sprzeda偶</p> |
|
|
<div class="mt-4"> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-secondary h-2 rounded-full" style="width: 0%" data-width="50%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-10 backdrop-blur-md rounded-xl p-8 border border-white border-opacity-20 card-3d"> |
|
|
<div class="text-5xl font-bold gold-text mb-3 counter" data-target="100">0</div> |
|
|
<p class="text-white font-elegant text-lg">zadowolonych klient贸w</p> |
|
|
<div class="mt-4"> |
|
|
<div class="w-full bg-gray-700 rounded-full h-2"> |
|
|
<div class="bg-secondary h-2 rounded-full" style="width: 0%" data-width="100%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center gap-6 animate-slide-up" style="animation-delay: 0.6s;"> |
|
|
<a href="#contact" class="btn-gold text-primary-900 px-10 py-4 rounded-full font-semibold text-lg font-elegant transition-all transform hover:scale-105"> |
|
|
<span class="block">Um贸w bezp艂atn膮 konsultacj臋</span> |
|
|
<span class="text-sm font-normal">Dowiedz si臋 jak mo偶emy pom贸c</span> |
|
|
</a> |
|
|
|
|
|
<a href="#portfolio" class="bg-transparent border-2 border-secondary text-white hover:bg-secondary hover:bg-opacity-20 px-10 py-4 rounded-full font-semibold text-lg font-elegant transition-all transform hover:scale-105 group"> |
|
|
<span class="flex items-center justify-center"> |
|
|
<span class="mr-2">Zobacz nasze realizacje</span> |
|
|
<i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i> |
|
|
</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute bottom-10 left-0 right-0 text-center z-20 animate-bounce"> |
|
|
<a href="#problem" class="text-white hover:text-secondary transition"> |
|
|
<i class="fas fa-chevron-down text-2xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-24 bg-primary-950 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-5"> |
|
|
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1600585152220-90363fe7e115?q=80&w=2970&auto=format&fit=crop')] bg-cover bg-center"></div> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-primary-950 to-primary-950/60"></div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-6 relative z-10"> |
|
|
<div class="text-center mb-20"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6 font-heading"> |
|
|
<span class="gold-text">LUXURY</span> SERVICES |
|
|
</h2> |
|
|
<div class="flex justify-center mb-8"> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-secondary to-secondary-200 rounded-full"></div> |
|
|
</div> |
|
|
<p class="text-xl text-white/80 max-w-3xl mx-auto font-elegant tracking-wider"> |
|
|
Bespoke interior solutions tailored for premium real estate developments |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12"> |
|
|
|
|
|
<div class="bg-primary-900/50 backdrop-blur-sm border border-primary-700/30 rounded-2xl p-10 transition-all duration-500 hover:scale-[1.02] hover:border-secondary/30 hover:shadow-xl group"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="text-secondary text-3xl mr-6"> |
|
|
<i class="fas fa-vector-square"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-white font-heading">Concept Design</h3> |
|
|
</div> |
|
|
<p class="text-white/70 mb-6 font-elegant tracking-wider leading-relaxed"> |
|
|
Unique architectural concepts that create emotional connections with potential buyers. |
|
|
</p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center text-white/80"> |
|
|
<i class="fas fa-check text-secondary mr-3 text-sm"></i> |
|
|
<span class="font-elegant tracking-wider">Market analysis</span> |
|
|
</li> |
|
|
<li class="flex items-center text-white/80"> |
|
|
<i class="fas fa-check text-secondary mr-3 text-sm"></i> |
|
|
<span class="font-elegant tracking-wider">Mood boards</span> |
|
|
</li> |
|
|
<li class="flex items-center text-white/80"> |
|
|
<i class="fas fa-check text-secondary mr-3 text-sm"></i> |
|
|
<span class="font-elegant tracking-wider">3D visualizations</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="group flex items-center text-secondary hover:text-secondary-300 font-elegant tracking-wider transition-all"> |
|
|
<span class="mr-3">Discover more</span> |
|
|
<i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-primary-900/50 backdrop-blur-sm border border-primary-700/30 rounded-2xl p-10 transition-all duration-500 hover:scale-[1.02] hover:border-secondary/30 hover:shadow-xl group"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="text-secondary text-3xl mr-6"> |
|
|
<i class="fas fa-couch"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-white font-heading">Turnkey Solutions</h3> |
|
|
</div> |
|
|
<p class="text-white/70 mb-6 font-elegant tracking-wider leading-relaxed"> |
|
|
Complete interior packages with premium materials and custom finishes. |
|
|
</p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center text-white/80"> |
|
|
<i class="fas fa-check text-secondary mr-3 text-sm"></i> |
|
|
<span class="font-elegant tracking-wider">Material selection</span> |
|
|
</li> |
|
|
<li class="flex items-center text-white/80"> |
|
|
<i class="fas fa-check text-secondary mr-3 text-sm"></i> |
|
|
<span class="font-elegant tracking-wider">Custom furniture</span> |
|
|
</li> |
|
|
<li class="flex items-center text-white/80"> |
|
|
<i class="fas fa-check text-secondary mr-3 text-sm"></i> |
|
|
<span class="font-elegant tracking-wider">Lighting design</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="group flex items-center text-secondary hover:text-secondary-300 font-elegant tracking-wider transition-all"> |
|
|
<span class="mr-3">Explore details</span> |
|
|
<i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-primary-900/50 backdrop-blur-sm border border-primary-700/30 rounded-2xl p-10 transition-all duration-500 hover:scale-[1.02] hover:border-secondary/30 hover:shadow-xl group"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="text-secondary text-3xl mr-6"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-white font-heading">Market Strategy</h3> |
|
|
</div> |
|
|
<p class="text-white/70 mb-6 font-elegant tracking-wider leading-relaxed"> |
|
|
Data-driven approach to maximize your ROI and attract premium buyers. |
|
|
</p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center text-white/80"> |
|
|
<i class="fas fa-check text-secondary mr-3 text-sm"></i> |
|
|
<span class="font-elegant tracking-wider">Competitor analysis</span> |
|
|
</li> |
|
|
<li class="flex items-center text-white/80"> |
|
|
<i class="fas fa-check text-secondary mr-3 text-sm"></i> |
|
|
<span class="font-elegant tracking-wider">ROI projections</span> |
|
|
</li> |
|
|
<li class="flex items-center text-white/80"> |
|
|
<i class="fas fa-check text-secondary mr-3 text-sm"></i> |
|
|
<span class="font-elegant tracking-wider">Staging concepts</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="group flex items-center text-secondary hover:text-secondary-300 font-elegant tracking-wider transition-all"> |
|
|
<span class="mr-3">Learn benefits</span> |
|
|
<i class="fas fa-arrow-right transition-transform group-hover:translate-x-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="relative h-32 bg-primary-950 overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?q=80&w=2832&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div> |
|
|
<div class="absolute top-1/2 left-0 right-0 h-px bg-gradient-to-r from-transparent via-secondary/70 to-transparent"></div> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> |
|
|
<div class="w-12 h-12 bg-secondary rounded-full flex items-center justify-center shadow-lg"> |
|
|
<i class="fas fa-arrow-down text-primary-900 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section id="problem" class="py-32 bg-light" aria-labelledby="problem-heading"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-20"> |
|
|
<h2 id="problem-heading" class="text-4xl md:text-5xl font-bold text-primary mb-6 font-heading"> |
|
|
Czy Twoje inwestycje w pe艂ni wykorzystuj膮 sw贸j <span class="gradient-underline">potencja艂 sprzeda偶owy</span>? |
|
|
</h2> |
|
|
|
|
|
<div class="flex justify-center mb-8"> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-secondary to-secondary-200 rounded-full"></div> |
|
|
</div> |
|
|
|
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto font-elegant"> |
|
|
Wiele nieruchomo艣ci nie osi膮ga swojej pe艂nej warto艣ci ze wzgl臋du na niedostosowane do potrzeb rynku wn臋trza |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-10"> |
|
|
|
|
|
<div class="relative bg-white rounded-2xl p-8 shadow-lg card-hover overflow-hidden group"> |
|
|
<div class="absolute -bottom-8 -right-8 w-24 h-24 rounded-full bg-secondary opacity-0 group-hover:opacity-10 transition-all duration-500"></div> |
|
|
<div class="text-secondary text-5xl mb-6 transform group-hover:scale-110 transition-transform duration-300"> |
|
|
<i class="fas fa-calendar-times"></i> |
|
|
</div> |
|
|
<span class="absolute top-6 right-6 text-primary/5 text-8xl font-bold font-heading -z-10 group-hover:text-primary/10 transition-all duration-500">01</span> |
|
|
<h3 class="text-2xl font-bold text-primary mb-4 font-heading">D艂ugi cykl sprzeda偶y?</h3> |
|
|
<p class="text-gray-600 mb-6 font-elegant"> |
|
|
Nieruchomo艣ci z przeci臋tnym wyko艅czeniem pozostaj膮 na rynku 艣rednio o 50% d艂u偶ej, generuj膮c dodatkowe koszty utrzymania i op贸藕niaj膮c zwrot z inwestycji. |
|
|
</p> |
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-secondary"> |
|
|
<p class="text-sm text-gray-600 italic font-elegant"> |
|
|
"艢redni czas sprzeda偶y apartamentu bez profesjonalnego wystroju wynosi 6-9 miesi臋cy." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 shadow-lg card-hover card-3d"> |
|
|
<div class="text-secondary text-5xl mb-6"> |
|
|
<i class="fas fa-chart-line-down"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-primary mb-4 font-heading">Niska mar偶a?</h3> |
|
|
<p class="text-gray-600 mb-6 font-elegant"> |
|
|
Brak profesjonalnego projektu wn臋trz uniemo偶liwia osi膮gni臋cie maksymalnej ceny sprzeda偶y, pozostawiaj膮c 艣rednio 20-30% potencjalnego zysku na stole. |
|
|
</p> |
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-secondary"> |
|
|
<p class="text-sm text-gray-600 italic font-elegant"> |
|
|
"Inwestorzy trac膮 艣rednio 280 000 z艂 zysku na ka偶dej nieruchomo艣ci bez odpowiedniego wystroju." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-2xl p-8 shadow-lg card-hover card-3d"> |
|
|
<div class="text-secondary text-5xl mb-6"> |
|
|
<i class="fas fa-question-circle"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-primary mb-4 font-heading">Brak wizji?</h3> |
|
|
<p class="text-gray-600 mb-6 font-elegant"> |
|
|
Inwestorzy cz臋sto nie wiedz膮, jak zaprojektowa膰 przestrze艅, aby przyci膮gn膮膰 wymagaj膮cych nabywc贸w premium, trac膮c klient贸w na rzecz konkurencji. |
|
|
</p> |
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-secondary"> |
|
|
<p class="text-sm text-gray-600 italic font-elegant"> |
|
|
"78% kupuj膮cych decyduje si臋 na zakup w ci膮gu pierwszych 30 sekund od wej艣cia do nieruchomo艣ci." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-20 bg-gradient-to-r from-primary to-primary-800 rounded-2xl p-10 text-center relative overflow-hidden"> |
|
|
<div class="absolute -right-20 -top-20 w-64 h-64 rounded-full bg-secondary opacity-10 filter blur-xl"></div> |
|
|
<div class="absolute -left-20 -bottom-20 w-64 h-64 rounded-full bg-secondary opacity-10 filter blur-xl"></div> |
|
|
|
|
|
<h3 class="text-3xl font-bold text-white mb-6 font-heading relative z-10"> |
|
|
Jak mo偶emy rozwi膮za膰 Twoje problemy? |
|
|
</h3> |
|
|
<p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto font-elegant relative z-10"> |
|
|
Poznaj nasze sprawdzone rozwi膮zania, kt贸re pomog艂y dziesi膮tkom inwestor贸w maksymalizowa膰 zyski z nieruchomo艣ci. |
|
|
</p> |
|
|
<a href="#solutions" class="btn-gold text-primary-900 px-10 py-4 rounded-full font-semibold text-lg font-elegant inline-block relative z-10"> |
|
|
Poznaj nasze rozwi膮zania |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="solutions" class="py-24 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-20"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold text-primary mb-6 font-heading"> |
|
|
Co <span class="gold-text">zyskujesz</span>, wybieraj膮c ARTSCore? |
|
|
</h2> |
|
|
|
|
|
<div class="flex justify-center mb-8"> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-secondary to-secondary-200 rounded-full"></div> |
|
|
</div> |
|
|
|
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto font-elegant"> |
|
|
Nasze rozwi膮zania projektowe przynosz膮 wymierne korzy艣ci dla Twojego biznesu nieruchomo艣ciowego |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-light rounded-2xl p-8 shadow-md card-hover card-3d"> |
|
|
<div class="text-secondary text-5xl mb-6"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-primary mb-4 font-heading">Szybsza sprzeda偶</h3> |
|
|
<p class="text-gray-600 mb-6 font-elegant"> |
|
|
艢rednio o 50% kr贸tszy czas sprzeda偶y dzi臋ki atrakcyjnym wn臋trzom, kt贸re przemawiaj膮 do emocji kupuj膮cych. |
|
|
</p> |
|
|
<div class="mt-auto"> |
|
|
<div class="flex items-center text-secondary"> |
|
|
<span class="mr-2 font-bold">Dowiedz si臋 wi臋cej</span> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-light rounded-2xl p-8 shadow-md card-hover card-3d"> |
|
|
<div class="text-secondary text-5xl mb-6"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-primary mb-4 font-heading">Wy偶sza cena</h3> |
|
|
<p class="text-gray-600 mb-6 font-elegant"> |
|
|
Nawet 30% wy偶sza cena sprzeda偶y dzi臋ki profesjonalnemu projektowi podnosz膮cemu postrzegan膮 warto艣膰 nieruchomo艣ci. |
|
|
</p> |
|
|
<div class="mt-auto"> |
|
|
<div class="flex items-center text-secondary"> |
|
|
<span class="mr-2 font-bold">Dowiedz si臋 wi臋cej</span> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-light rounded-2xl p-8 shadow-md card-hover card-3d"> |
|
|
<div class="text-secondary text-5xl mb-6"> |
|
|
<i class="fas fa-medal"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-primary mb-4 font-heading">Wyr贸偶nienie na rynku</h3> |
|
|
<p class="text-gray-600 mb-6 font-elegant"> |
|
|
Unikalne projekty, kt贸re sprawiaj膮, 偶e Twoje nieruchomo艣ci zapadaj膮 w pami臋膰 i przyci膮gaj膮 wi臋cej potencjalnych kupc贸w. |
|
|
</p> |
|
|
<div class="mt-auto"> |
|
|
<div class="flex items-center text-secondary"> |
|
|
<span class="mr-2 font-bold">Dowiedz si臋 wi臋cej</span> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-light rounded-2xl p-8 shadow-md card-hover card-3d"> |
|
|
<div class="text-secondary text-5xl mb-6"> |
|
|
<i class="fas fa-handshake"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-primary mb-4 font-heading">Zaufanie klient贸w</h3> |
|
|
<p class="text-gray-600 mb-6 font-elegant"> |
|
|
Profesjonalne wn臋trza buduj膮 zaufanie do Twojej marki deweloperskiej i pozwalaj膮 sprzedawa膰 nieruchomo艣ci na etapie planowania. |
|
|
</p> |
|
|
<div class="mt-auto"> |
|
|
<div class="flex items-center text-secondary"> |
|
|
<span class="mr-2 font-bold">Dowiedz si臋 wi臋cej</span> |
|
|
<i class="fas fa-arrow-right"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-20 grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h3 class="text-3xl font-bold text-primary mb-6 font-heading"> |
|
|
Nasze <span class="gold-text">statystyki</span> m贸wi膮 same za siebie |
|
|
</h3> |
|
|
<p class="text-gray-600 mb-8 font-elegant"> |
|
|
Od 2015 roku pomagamy deweloperom i inwestorom maksymalizowa膰 zyski z nieruchomo艣ci poprzez strategiczne projektowanie wn臋trz. |
|
|
</p> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
|
|
<div class="text-4xl font-bold gold-text mb-2 counter" data-target="120">0</div> |
|
|
<p class="text-gray-600 font-elegant">Zrealizowanych projekt贸w</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
|
|
<div class="text-4xl font-bold gold-text mb-2 counter" data-target="42">0</div> |
|
|
<p class="text-gray-600 font-elegant">Wsp贸艂pracuj膮cych deweloper贸w</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
|
|
<div class="text-4xl font-bold gold-text mb-2 counter" data-target="500">0</div> |
|
|
<p class="text-gray-600 font-elegant">Sprzedanych nieruchomo艣ci</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> |
|
|
<div class="text-4xl font-bold gold-text mb-2 counter" data-target="100">0</div> |
|
|
<p class="text-gray-600 font-elegant">% satysfakcji klient贸w |
|
|
</html> |
