mirror of
https://github.com/Motion-Games/MotionWebStudio.git
synced 2026-04-21 17:10:54 +02:00
313 lines
17 KiB
TypeScript
313 lines
17 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
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';
|
|
import { ProcessSection } from '../components/ProcessSection';
|
|
import { supabase } from '../lib/supabaseClient';
|
|
import { ProductPackage } from '../types';
|
|
import { defaultPlans } from '../lib/defaultPlans';
|
|
|
|
export const Home: React.FC = () => {
|
|
const [packages, setPackages] = useState<ProductPackage[]>(defaultPlans);
|
|
|
|
useEffect(() => {
|
|
const fetchPlans = async () => {
|
|
try {
|
|
const { data, error } = await supabase
|
|
.from('plans')
|
|
.select('*');
|
|
|
|
if (!error && data && data.length > 0) {
|
|
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);
|
|
}
|
|
};
|
|
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 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>
|
|
<div className="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></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 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-6 md:mb-8"
|
|
style={{ animationDelay: '0.1s' }}
|
|
>
|
|
<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-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-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-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-4 md:gap-5 justify-center animate-fade-in-up px-4 sm:px-0"
|
|
style={{ animationDelay: '0.7s' }}
|
|
>
|
|
<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" 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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Services Section */}
|
|
<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-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-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 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."
|
|
Icon={Monitor}
|
|
/>
|
|
<ServiceCard
|
|
title="Reszponzív Design"
|
|
description="Mobile-first szemléletünk garantálja, hogy oldala minden eszközön tökéletesen jelenjen meg."
|
|
Icon={Smartphone}
|
|
/>
|
|
<ServiceCard
|
|
title="SEO Optimalizálás"
|
|
description="Keresőoptimalizált tartalom és stratégia, hogy ügyfelei könnyen megtalálják."
|
|
Icon={Search}
|
|
/>
|
|
<ServiceCard
|
|
title="UI/UX Design"
|
|
description="Felhasználóbarát felületek tervezése a maximális látogatói élményért és konverzióért."
|
|
Icon={PenTool}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* References Section */}
|
|
<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-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-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-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-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>
|
|
<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-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-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-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>
|
|
<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-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>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Products/Packages Section */}
|
|
<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-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-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>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* 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>
|
|
|
|
{/* Process Section */}
|
|
<ProcessSection />
|
|
|
|
{/* Order Form Section */}
|
|
<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>
|
|
);
|
|
};
|