htamas1210/MotionWebStudio
1
0
Fork 0
mirror of https://github.com/Motion-Games/MotionWebStudio.git synced 2026-04-21 09:00:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

stripe

Browse Source
This commit is contained in:
htom
2025-12-26 14:03:18 +01:00
parent 846379eccc
commit 235e1d9b52
18 changed files with 3334 additions and 2290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
pages/Home.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Monitor, Search, ExternalLink, Check, Star, Smartphone, PenTool } from 'lucide-react';
import { ArrowRight, Monitor, Search, ExternalLink, Check, Star, Smartphone, PenTool, ShieldCheck, Clock, Info } from 'lucide-react';
import { Button } from '../components/Button';
import { ServiceCard } from '../components/ServiceCard';
import { OrderForm } from '../components/OrderForm';
@@ -17,11 +18,22 @@ export const Home: React.FC = () => {
try {
const { data, error } = await supabase
.from('plans')
.select('*')
.order('price', { ascending: true }); // Simple text ordering, ideally numerical but works for default prices somewhat
.select('*');
if (!error && data && data.length > 0) {
setPackages(data);
const sortedData = [...data].sort((a, b) => {
const priceA = a.is_custom_price ? Infinity : (a.total_price || 0);
const priceB = b.is_custom_price ? Infinity : (b.total_price || 0);
return priceA - priceB;
});
setPackages(sortedData);
} else {
const sortedDefaults = [...defaultPlans].sort((a, b) => {
const priceA = a.is_custom_price ? Infinity : (a.total_price || 0);
const priceB = b.is_custom_price ? Infinity : (b.total_price || 0);
return priceA - priceB;
});
setPackages(sortedDefaults);
}
} catch (e) {
console.error("Error fetching plans:", e);
@@ -30,60 +42,60 @@ export const Home: React.FC = () => {
fetchPlans();
}, []);
const formatPrice = (num: number) => num.toLocaleString('hu-HU') + ' Ft';
return (
<div className="overflow-x-hidden">
{/* Hero Section */}
<section className="relative min-h-screen flex items-center justify-center pt-20 bg-gray-900 overflow-hidden">
<section className="relative min-h-screen flex items-center justify-center pt-20 bg-gray-900 overflow-hidden px-4">
{/* Background Elements */}
<div className="absolute inset-0 z-0">
<div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-[#0f172a] to-purple-900"></div>
{/* Subtle texture overlay */}
<div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
{/* Animated glow effects */}
<div className="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] bg-purple-600/20 rounded-full blur-[100px] animate-pulse"></div>
<div className="absolute bottom-[-20%] right-[-10%] w-[500px] h-[500px] bg-blue-600/20 rounded-full blur-[100px] animate-pulse"></div>
<div className="absolute top-[-20%] left-[-10%] w-[300px] md:w-[500px] h-[300px] md:h-[500px] bg-purple-600/20 rounded-full blur-[80px] md:blur-[100px] animate-pulse"></div>
<div className="absolute bottom-[-20%] right-[-10%] w-[300px] md:w-[500px] h-[300px] md:h-[500px] bg-blue-600/20 rounded-full blur-[80px] md:blur-[100px] animate-pulse"></div>
</div>
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 py-12 text-center">
<div className="max-w-5xl mx-auto relative z-10 py-12 text-center">
<div
className="inline-block px-4 py-2 bg-white/5 backdrop-blur-sm rounded-full border border-white/10 animate-fade-in-up mb-8"
className="inline-block px-4 py-2 bg-white/5 backdrop-blur-sm rounded-full border border-white/10 animate-fade-in-up mb-6 md:mb-8"
style={{ animationDelay: '0.1s' }}
>
<span className="text-blue-300 font-medium text-sm tracking-wide uppercase">Innovatív Megoldások Neked</span>
<span className="text-blue-300 font-medium text-xs md:text-sm tracking-wide uppercase">Innovatív Megoldások Neked</span>
</div>
<h1
className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white leading-tight animate-fade-in-up mb-6 tracking-tight"
className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-extrabold text-white leading-tight animate-fade-in-up mb-4 md:mb-6 tracking-tight"
style={{ animationDelay: '0.2s' }}
>
Motion Web Stúdió
</h1>
<h2
className="text-2xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400 animate-fade-in-up mb-8"
className="text-xl sm:text-2xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400 animate-fade-in-up mb-8"
style={{ animationDelay: '0.3s' }}
>
Vigye vállalkozását a következő szintre
</h2>
<p
className="text-lg text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up mb-12"
className="text-base md:text-lg text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up mb-10 md:mb-12 px-2"
style={{ animationDelay: '0.5s' }}
>
A MotionWeb csapata prémium minőségű weboldalakat és webáruházakat fejleszt, amelyek nemcsak szépek, de vevőket is hoznak.
</p>
<div
className="flex flex-col sm:flex-row gap-5 justify-center animate-fade-in-up"
className="flex flex-col sm:flex-row gap-4 md:gap-5 justify-center animate-fade-in-up px-4 sm:px-0"
style={{ animationDelay: '0.7s' }}
>
<Link to="/#rendeles">
<Button size="lg" className="w-full sm:w-auto shadow-lg shadow-purple-900/20">
<Link to="/#rendeles" className="w-full sm:w-auto">
<Button size="lg" className="w-full shadow-lg shadow-purple-900/20">
Kezdjük el <ArrowRight className="ml-2 w-5 h-5" />
</Button>
</Link>
<Link to="/#references">
<Button variant="outline" size="lg" className="border-white/20 text-white hover:bg-white/10 hover:border-white w-full sm:w-auto backdrop-blur-sm">
<Link to="/#references" className="w-full sm:w-auto">
<Button variant="outline" size="lg" className="border-white/20 text-white hover:bg-white/10 hover:border-white w-full backdrop-blur-sm">
Referenciák
</Button>
</Link>
@@ -92,19 +104,19 @@ export const Home: React.FC = () => {
</section>
{/* Services Section */}
<section id="services" className="py-24 bg-gray-50 scroll-mt-20">
<section id="services" className="py-20 md:py-24 bg-gray-50 scroll-mt-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center max-w-3xl mx-auto mb-16">
<h2 className="text-base font-semibold text-primary tracking-wide uppercase">Szolgáltatásaink</h2>
<p className="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
<div className="text-center max-w-3xl mx-auto mb-12 md:mb-16">
<h2 className="text-sm md:text-base font-semibold text-primary tracking-wide uppercase">Szolgáltatásaink</h2>
<p className="mt-2 text-2xl sm:text-3xl md:text-4xl font-extrabold text-gray-900">
Minden, ami a sikeres online jelenléthez kell
</p>
<p className="mt-4 text-xl text-gray-500">
<p className="mt-4 text-lg md:text-xl text-gray-500 px-2">
Teljeskörű digitális kivitelezés a tervezéstől az üzemeltetésig.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
<ServiceCard
title="Egyedi Weboldal"
description="Modern, gyors és reszponzív weboldalak, amelyek tükrözik márkája értékeit."
@@ -130,115 +142,59 @@ export const Home: React.FC = () => {
</section>
{/* References Section */}
<section id="references" className="py-24 bg-white scroll-mt-20">
<section id="references" className="py-20 md:py-24 bg-white scroll-mt-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Referenciák</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
<div className="text-center mb-12 md:mb-16">
<h2 className="text-2xl md:text-4xl font-bold text-gray-900 mb-4">Referenciák</h2>
<p className="text-base md:text-lg text-gray-600 max-w-2xl mx-auto">
Tekintsd meg, milyen modern és reszponzív weboldalakat készítünk ügyfeleink számára.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{/* Card 1: SweetCraving */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
<div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col">
<div className="h-64 overflow-hidden">
<img
src="https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="SweetCraving Desszertműhely"
className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500"
/>
<div className="h-48 sm:h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="SweetCraving" className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" />
</div>
<div className="p-8 flex flex-col flex-grow">
<h3 className="text-xl font-bold text-gray-900 mb-2">SweetCraving Desszertműhely</h3>
<p className="text-sm text-gray-500 font-medium mb-4">Kézműves desszertek – Landing Page csomag</p>
<p className="text-gray-600 mb-6 flex-grow leading-relaxed">
A SweetCraving számára egy fiatalos, barátságos hangulatú bemutatkozó oldalt hoztunk létre.
</p>
<div className="flex items-center gap-3 mb-8">
<span className="text-sm text-gray-500 mr-2">Színek:</span>
<div className="w-6 h-6 rounded-full bg-pink-300 border border-gray-200"></div>
<div className="w-6 h-6 rounded-full bg-yellow-200 border border-gray-200"></div>
<div className="w-6 h-6 rounded-full bg-white border border-gray-200"></div>
</div>
<div className="w-full">
<Link to="/demos/sweetcraving">
<Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300 hover:border-gray-400 hover:bg-gray-50">
Oldal megtekintése
<ExternalLink className="w-4 h-4 ml-2" />
</Button>
</Link>
</div>
<div className="p-6 md:p-8 flex flex-col flex-grow">
<h3 className="text-xl font-bold text-gray-900 mb-2">SweetCraving</h3>
<p className="text-xs text-gray-500 font-medium mb-4 uppercase tracking-wider">Landing Page csomag</p>
<p className="text-gray-600 mb-6 flex-grow leading-relaxed text-sm md:text-base">Fiatalos, barátságos hangulatú bemutatkozó oldalt hoztunk létre.</p>
<Link to="/demos/sweetcraving">
<Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300">
Oldal megtekintése <ExternalLink className="w-4 h-4 ml-2" />
</Button>
</Link>
</div>
</div>
{/* Card 2: BlueWave */}
<div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col">
<div className="h-64 overflow-hidden">
<img
src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="BlueWave Solar Kft."
className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500"
/>
<div className="h-48 sm:h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="BlueWave" className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" />
</div>
<div className="p-8 flex flex-col flex-grow">
<div className="p-6 md:p-8 flex flex-col flex-grow">
<h3 className="text-xl font-bold text-gray-900 mb-2">BlueWave Solar Kft.</h3>
<p className="text-sm text-gray-500 font-medium mb-4">Zöld energia megoldások – Pro Web csomag</p>
<p className="text-gray-600 mb-6 flex-grow leading-relaxed">
A BlueWave Solar számára modern, üzleti stílusú, reszponzív weboldalt készítettünk.
</p>
<div className="flex items-center gap-3 mb-8">
<span className="text-sm text-gray-500 mr-2">Színek:</span>
<div className="w-6 h-6 rounded-full bg-sky-600 border border-gray-200"></div>
<div className="w-6 h-6 rounded-full bg-green-500 border border-gray-200"></div>
<div className="w-6 h-6 rounded-full bg-white border border-gray-200"></div>
</div>
<div className="w-full">
<Link to="/demos/bluewave">
<Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300 hover:border-gray-400 hover:bg-gray-50">
Oldal megtekintése
<ExternalLink className="w-4 h-4 ml-2" />
</Button>
</Link>
</div>
<p className="text-xs text-gray-500 font-medium mb-4 uppercase tracking-wider">Pro Web csomag</p>
<p className="text-gray-600 mb-6 flex-grow leading-relaxed text-sm md:text-base">Modern, üzleti stílusú, reszponzív weboldal kalkulátorral.</p>
<Link to="/demos/bluewave">
<Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300">
Oldal megtekintése <ExternalLink className="w-4 h-4 ml-2" />
</Button>
</Link>
</div>
</div>
{/* Card 3: Steelguard */}
<div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col">
<div className="h-64 overflow-hidden">
<img
src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
alt="Steelguard Biztonságtechnika"
className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500"
/>
<div className="bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 flex flex-col md:col-span-2 lg:col-span-1">
<div className="h-48 sm:h-64 overflow-hidden">
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Steelguard" className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" />
</div>
<div className="p-8 flex flex-col flex-grow">
<h3 className="text-xl font-bold text-gray-900 mb-2">Steelguard Biztonságtechnika</h3>
<p className="text-sm text-gray-500 font-medium mb-4">Biztonságtechnika és IT rendszerek – Enterprise csomag</p>
<p className="text-gray-600 mb-6 flex-grow leading-relaxed">
A Steelguard számára technológiai, sötét tónusú weboldalt készítettünk.
</p>
<div className="flex items-center gap-3 mb-8">
<span className="text-sm text-gray-500 mr-2">Színek:</span>
<div className="w-6 h-6 rounded-full bg-black border border-gray-200"></div>
<div className="w-6 h-6 rounded-full bg-blue-600 border border-gray-200"></div>
<div className="w-6 h-6 rounded-full bg-gray-300 border border-gray-200"></div>
</div>
<div className="w-full">
<Link to="/demos/steelguard">
<Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300 hover:border-gray-400 hover:bg-gray-50">
Oldal megtekintése
<ExternalLink className="w-4 h-4 ml-2" />
</Button>
</Link>
</div>
<div className="p-6 md:p-8 flex flex-col flex-grow">
<h3 className="text-xl font-bold text-gray-900 mb-2">Steelguard</h3>
<p className="text-xs text-gray-500 font-medium mb-4 uppercase tracking-wider">Enterprise csomag</p>
<p className="text-gray-600 mb-6 flex-grow leading-relaxed text-sm md:text-base">Technológiai, sötét tónusú enterprise weboldal.</p>
<Link to="/demos/steelguard">
<Button variant="outline" fullWidth className="group justify-between text-gray-700 border-gray-300">
Oldal megtekintése <ExternalLink className="w-4 h-4 ml-2" />
</Button>
</Link>
</div>
</div>
</div>
@@ -246,58 +202,98 @@ export const Home: React.FC = () => {
</section>
{/* Products/Packages Section */}
<section id="products" className="py-24 bg-gray-50 scroll-mt-20">
<section id="products" className="py-20 md:py-24 bg-gray-50 scroll-mt-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Csomagajánlataink</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Átlátható árazás, rejtett költségek nélkül. Válassza az Ön céljaihoz leginkább illeszkedő csomagot.
<div className="text-center mb-12 md:mb-16">
<h2 className="text-2xl md:text-4xl font-bold text-gray-900 mb-4">Csomagajánlataink</h2>
<p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
Átlátható árazás, rejtett költségek nélkül.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{packages.map((pkg, index) => (
<div
key={index}
className={`relative bg-white rounded-2xl shadow-xl flex flex-col p-8 transition-transform hover:-translate-y-2 duration-300 ${pkg.isPopular ? 'border-2 border-primary ring-4 ring-purple-100' : 'border border-gray-100'}`}
>
{pkg.isPopular && (
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-primary to-secondary text-white px-4 py-1 rounded-full text-sm font-bold shadow-lg flex items-center gap-1">
<Star className="w-4 h-4 fill-current" /> Legnépszerűbb
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
{packages.map((pkg, index) => {
const remaining = (pkg.total_price || 0) - (pkg.advance_price || 0);
return (
<div
key={index}
className={`relative bg-white rounded-2xl shadow-xl flex flex-col p-6 md:p-8 transition-transform hover:-translate-y-2 duration-300 ${pkg.isPopular ? 'border-2 border-primary ring-4 ring-purple-100' : 'border border-gray-100'}`}
>
{pkg.isPopular && (
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-primary to-secondary text-white px-4 py-1 rounded-full text-xs md:text-sm font-bold shadow-lg flex items-center gap-1">
<Star className="w-3 h-3 md:w-4 h-4 fill-current" /> Legnépszerűbb
</div>
)}
<div className="mb-6">
<h3 className="text-xl md:text-2xl font-bold text-gray-900">{pkg.name}</h3>
<p className="text-gray-500 mt-2 text-xs md:text-sm min-h-[40px]">{pkg.desc}</p>
</div>
<div className="mb-8">
<span className="text-2xl md:text-3xl font-extrabold text-gray-900 block">
{pkg.is_custom_price ? 'Egyedi árazás' : (pkg.price || 'Egyedi árazás')}
</span>
{!pkg.is_custom_price && pkg.advance_price && pkg.advance_price > 0 ? (
<div className="mt-3 space-y-1 border-t border-gray-100 pt-3">
<div className="flex items-center text-[10px] md:text-xs font-bold text-gray-400 uppercase tracking-tight">
<div className="w-1.5 h-1.5 rounded-full bg-blue-400 mr-2"></div>
<span>Előleg: {formatPrice(pkg.advance_price)}</span>
</div>
<div className="flex items-center text-[10px] md:text-xs font-bold text-gray-400 uppercase tracking-tight">
<div className="w-1.5 h-1.5 rounded-full bg-primary mr-2"></div>
<span>Fennmaradó: {formatPrice(remaining)} (demó elfogadása után)</span>
</div>
</div>
) : null}
</div>
<ul className="space-y-3 md:space-y-4 mb-8 flex-grow">
{pkg.features.map((feature, i) => (
<li key={i} className="flex items-start text-gray-600">
<Check className="w-4 h-4 md:w-5 h-5 text-green-500 mr-2 md:mr-3 flex-shrink-0 mt-0.5" />
<span className="text-xs md:text-sm">{feature}</span>
</li>
))}
</ul>
<div className="mt-auto">
<Link to="/#rendeles" className="w-full">
<Button
variant={pkg.isPopular ? 'primary' : 'outline'}
fullWidth
>
{pkg.cta}
</Button>
</Link>
</div>
)}
<div className="mb-6">
<h3 className="text-2xl font-bold text-gray-900">{pkg.name}</h3>
<p className="text-gray-500 mt-2 text-sm min-h-[40px]">{pkg.desc}</p>
</div>
);
})}
</div>
<div className="mb-8">
<span className="text-3xl font-extrabold text-gray-900">{pkg.price}</span>
{pkg.price.includes('Ft') && <span className="text-gray-500 text-sm font-normal"> + ÁFA</span>}
</div>
<ul className="space-y-4 mb-8 flex-grow">
{pkg.features.map((feature, i) => (
<li key={i} className="flex items-start text-gray-600">
<Check className="w-5 h-5 text-green-500 mr-3 flex-shrink-0 mt-0.5" />
<span className="text-sm">{feature}</span>
</li>
))}
</ul>
<div className="mt-auto">
<Link to="/#rendeles">
<Button
variant={pkg.isPopular ? 'primary' : 'outline'}
fullWidth
>
{pkg.cta}
</Button>
</Link>
{/* Maintenance Info Panel */}
<div className="mt-12 w-full animate-fade-in">
<div className="bg-gradient-to-br from-white to-gray-50 border border-gray-200 rounded-[32px] p-6 md:p-10 shadow-sm flex flex-col md:flex-row items-center gap-6 md:gap-10">
<div className="w-16 h-16 md:w-20 md:h-20 bg-primary/10 rounded-3xl flex items-center justify-center text-primary shrink-0 shadow-inner">
<ShieldCheck className="w-8 h-8 md:w-10 md:h-10" />
</div>
<div className="flex-grow text-center md:text-left">
<h4 className="text-lg md:text-xl font-black text-gray-900 mb-2 uppercase tracking-tighter">Éves üzemeltetés és karbantartás</h4>
<p className="text-sm md:text-base text-gray-600 leading-relaxed mb-4">
A weboldal stabil működéséhez, a tárhely biztosításához és a folyamatos biztonsági frissítésekhez éves díjat alkalmazunk. <strong>A rendelés ára tartalmazza az első év üzemeltetését, így az éves díj megfizetése csak az átadást követő egy év múlva válik először esedékessé.</strong>
</p>
<div className="flex flex-wrap justify-center md:justify-start gap-4 text-[10px] md:text-xs font-bold uppercase tracking-widest text-gray-400">
<span className="flex items-center gap-1.5"><Clock className="w-3.5 h-3.5 text-primary" /> 2026-ig garantált ár</span>
<span className="flex items-center gap-1.5"><Info className="w-3.5 h-3.5 text-primary" /> Évente inflációkövető módosítás lehetséges</span>
</div>
</div>
))}
<div className="bg-white border-2 border-primary/20 rounded-[24px] px-8 py-6 text-center shadow-lg shadow-primary/5 min-w-[200px]">
<p className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] mb-1">Díj / Év</p>
<p className="text-2xl md:text-3xl font-black text-primary">59 990 Ft</p>
</div>
</div>
</div>
</div>
</section>
@@ -306,11 +302,11 @@ export const Home: React.FC = () => {
<ProcessSection />
{/* Order Form Section */}
<section id="rendeles" className="py-20 bg-white scroll-mt-20">
<section id="rendeles" className="py-16 md:py-20 bg-white scroll-mt-20">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<OrderForm />
</div>
</section>
</div>
);
};
};