mirror of
https://github.com/Motion-Games/MotionWebStudio.git
synced 2026-04-21 09:00:53 +02:00
init
This commit is contained in:
320
pages/Terms.tsx
Normal file
320
pages/Terms.tsx
Normal file
@@ -0,0 +1,320 @@
|
||||
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
// Add XCircle to the import list
|
||||
import { ArrowLeft, FileText, Globe, Mail, Shield, XCircle } from 'lucide-react';
|
||||
import { Button } from '../components/Button';
|
||||
|
||||
export const Terms: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="pt-24 pb-20 min-h-screen bg-gray-50/50">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<Button
|
||||
variant="white"
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-10 shadow-sm border border-gray-200 group"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza
|
||||
</Button>
|
||||
|
||||
<div className="bg-white rounded-[32px] shadow-sm border border-gray-100 overflow-hidden">
|
||||
{/* Header Section */}
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 p-8 md:p-12 text-white">
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-6">
|
||||
<div className="p-4 bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 w-fit">
|
||||
<FileText className="w-10 h-10 text-purple-300" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl md:text-4xl font-extrabold tracking-tight uppercase">Általános Szerződési Feltételek</h1>
|
||||
<div className="flex flex-wrap items-center gap-4 mt-3">
|
||||
<span className="px-3 py-1 bg-primary/20 border border-primary/30 rounded-full text-xs font-bold uppercase tracking-widest text-purple-200">
|
||||
MotionWeb
|
||||
</span>
|
||||
<span className="text-gray-400 text-sm">
|
||||
Hatályos: 2025. január 1-től
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Sections */}
|
||||
<div className="p-8 md:p-16">
|
||||
<div className="space-y-16 text-gray-600 leading-relaxed">
|
||||
|
||||
{/* Section 1 */}
|
||||
<section className="relative">
|
||||
<div className="absolute -left-6 top-0 bottom-0 w-1 bg-primary/10 rounded-full hidden md:block" />
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">1</span>
|
||||
A szolgáltató adatai
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 bg-gray-50 p-6 rounded-2xl border border-gray-100">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Szolgáltató neve</p>
|
||||
<p className="font-semibold text-gray-900">Balogh Bence Benedek egyéni vállalkozó</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Projekt / márkanév</p>
|
||||
<p className="font-semibold text-gray-900">MotionWeb</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Globe className="w-4 h-4 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Weboldal</p>
|
||||
<a href="https://motionweb.hu" className="font-semibold text-primary hover:underline">https://motionweb.hu</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Mail className="w-4 h-4 text-primary mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Kapcsolattartási e-mail</p>
|
||||
<a href="mailto:motionstudiohq@gmail.com" className="font-semibold text-primary hover:underline">motionstudiohq@gmail.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:col-span-2 pt-4 border-t border-gray-200">
|
||||
<p className="text-sm italic text-gray-500">
|
||||
A MotionWeb elnevezés projektnév, nem önálló jogi személy. A szolgáltatásokat Balogh Bence Benedek egyéni vállalkozó nyújtja.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">2</span>
|
||||
Az ÁSZF hatálya
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>Jelen Általános Szerződési Feltételek (ÁSZF) a MotionWeb weboldalon keresztül megrendelt valamennyi szolgáltatásra vonatkoznak.</p>
|
||||
<p className="bg-purple-50 p-4 rounded-xl border border-purple-100 text-gray-700">
|
||||
A megrendelő a rendelés leadásával és az előleg megfizetésével jelen ÁSZF rendelkezéseit elfogadja, és a felek között szerződés jön létre.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">3</span>
|
||||
A szolgáltatás jellege
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>A MotionWeb fix csomagárakon kínál weboldalkészítési szolgáltatásokat.</p>
|
||||
<p>A szolgáltatás digitális szolgáltatásnak minősül, amely egy bemutató (demó) weboldal elkészítésével kezdődik, majd a megrendelő jóváhagyása esetén a végleges weboldal fejlesztésével folytatódik.</p>
|
||||
<p className="font-bold text-gray-800">A MotionWeb nem nyújt egyedi ajánlattételt.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 4 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">4</span>
|
||||
Szerződés létrejötte
|
||||
</h3>
|
||||
<p className="mb-4">A szerződés az alábbi lépések teljesülésével jön létre:</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{['a megrendelő kiválasztja a szolgáltatási csomagot,', 'kitölti a rendelési űrlapot,', 'megfizeti az előleget.'].map((step, i) => (
|
||||
<li key={i} className="bg-gray-50 p-4 rounded-xl border border-gray-100 text-sm font-medium flex items-center gap-3">
|
||||
<span className="w-5 h-5 rounded-full bg-white border border-gray-200 flex items-center justify-center text-[10px] text-gray-400">{i+1}</span>
|
||||
{step}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="mt-4 text-primary font-semibold">A szerződés létrejöttével a MotionWeb megkezdi a demó weboldal elkészítését.</p>
|
||||
</section>
|
||||
|
||||
{/* Section 5 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">5</span>
|
||||
Előleg
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>Az előleg a szolgáltatás megkezdésének feltétele.</p>
|
||||
<p className="font-bold text-red-600 underline decoration-red-200 underline-offset-4">Az előleg nem visszatérítendő, mivel az a demó weboldal elkészítéséhez kapcsolódó munkavégzést és ráfordítást fedezi.</p>
|
||||
<p>Amennyiben a megrendelő a demó weboldalt nem kívánja jóváhagyni, a fennmaradó díjat nem köteles megfizetni, azonban az előleg visszatérítésére ilyen esetben sem jogosult.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 6 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">6</span>
|
||||
Demó weboldal és visszajelzés
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>A MotionWeb a demó weboldal elkészültéről a megrendelőt e-mailben értesíti.</p>
|
||||
<p>A megrendelő a demó weboldalt a motionweb.hu oldalon, bejelentkezést követően, a „Rendeléseim” menüpont alatt tekintheti meg és adhat visszajelzést.</p>
|
||||
<p className="font-bold text-gray-800">A demó weboldal visszajelzésére összesen 1 hónap áll rendelkezésre.</p>
|
||||
<p>A MotionWeb a visszajelzés hiánya esetén:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{['az elkészülést követően,', '1 hét elteltével,', '2 hét elteltével'].map((time, i) => (
|
||||
<span key={i} className="px-3 py-1 bg-gray-100 rounded-full text-xs font-medium text-gray-600">{time}</span>
|
||||
))}
|
||||
</div>
|
||||
<p>emlékeztető e-mailt küld.</p>
|
||||
<p className="bg-gray-900 text-gray-300 p-6 rounded-2xl text-sm italic">
|
||||
Amennyiben a visszajelzési határidő eredménytelenül telik el, a MotionWeb a projektet kommunikáció hiányában lezártnak tekinti, és a projektfájlokat e-mailben megküldi.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 7 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">7</span>
|
||||
Módosítási körök
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>A csomagár legfeljebb <span className="font-bold text-gray-900">két (2) módosítási kört</span> tartalmaz.</p>
|
||||
<p>Amennyiben a két módosítási kör után a demó weboldal nem kerül jóváhagyásra, a MotionWeb jogosult a projektet lezárni.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 8 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">8</span>
|
||||
Jóváhagyás és végfizetés
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>A demó weboldal jóváhagyását követően a megrendelő köteles megfizetni a fennmaradó díjat.</p>
|
||||
<p className="font-semibold text-gray-800">A végfizetés beérkezését követően a MotionWeb megkezdi a weboldal végleges, funkciókkal ellátott verziójának fejlesztését és élesítését.</p>
|
||||
<p>A végfizetés elmaradása esetén a végleges weboldal fejlesztése és élesítése nem történik meg.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 9 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">9</span>
|
||||
Határidők
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>A MotionWeb nem vállal konkrét teljesítési határidőt.</p>
|
||||
<p>A weboldalon vagy kommunikáció során feltüntetett időtartamok kizárólag tájékoztató jellegű becslések.</p>
|
||||
<p className="text-sm border-l-4 border-amber-400 pl-4 py-1 text-gray-500">
|
||||
A megrendelő tudomásul veszi, hogy határidő túllépésből eredő igényt nem érvényesíthet.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 10 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">10</span>
|
||||
Admin felület és utólagos módosítások
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>Az admin felület kizárólag azokat a funkciókat tartalmazza, amelyek a megrendelés során előzetesen egyeztetésre kerültek.</p>
|
||||
<p>A megrendelő kizárólag az admin felületen elérhető funkciók körében jogosult önálló módosításokra.</p>
|
||||
<p>Egyszerű, technikailag nem összetett kérések (például szövegcsere) esetén a megrendelő e-mailben jelezheti igényét, amelynek teljesítésében a MotionWeb eseti alapon segítséget nyújthat.</p>
|
||||
<p className="font-bold text-gray-800 border-t border-gray-100 pt-4">Dizájnmódosítás, új funkció, új aloldal vagy admin bővítés külön megrendelésnek minősül.</p>
|
||||
<p>A külön megrendelések egyedi árazás alapján, előzetes befizetést követően valósulnak meg.</p>
|
||||
<p className="italic">A MotionWeb nem nyújt folyamatos technikai támogatási vagy karbantartási szolgáltatást.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 11 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">11</span>
|
||||
Tulajdonjog és referenciahasználat
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>A weboldal forráskódja és tartalma a teljes díj megfizetéséig a MotionWeb tulajdonában marad.</p>
|
||||
<p>A végfizetést követően a megrendelő jogosult a weboldalt használni.</p>
|
||||
<p>A MotionWeb jogosult az elkészült weboldalt referenciaként, anonim módon, a megrendelő nevének feltüntetése nélkül bemutatni.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 12 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">12</span>
|
||||
Felelősségkorlátozás
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>A MotionWeb nem vállal felelősséget:</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{['elmaradt haszonért,', 'közvetett károkért,', 'üzleti veszteségekért.'].map((item, i) => (
|
||||
<li key={i} className="bg-red-50/50 p-4 rounded-xl border border-red-100 text-sm font-semibold text-red-700 flex items-center gap-2">
|
||||
<XCircle className="w-4 h-4" /> {item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="font-bold text-gray-800">A szolgáltatás nem garantál üzleti eredményt.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 13 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">13</span>
|
||||
Elállási jog kizárása
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>A szolgáltatás digitális szolgáltatásnek minősül.</p>
|
||||
<p className="font-bold text-gray-800">A megrendelő a rendelés leadásával és az előleg megfizetésével kifejezetten tudomásul veszi, hogy a teljesítés megkezdésével elállási joga megszűnik.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 14 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">14</span>
|
||||
Ügyfélkör
|
||||
</h3>
|
||||
<p>A MotionWeb szolgáltatásait magánszemélyek és vállalkozások egyaránt igénybe vehetik.</p>
|
||||
</section>
|
||||
|
||||
{/* Section 15 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">15</span>
|
||||
Jogvita és irányadó jog
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>Jelen ÁSZF-re a magyar jog az irányadó.</p>
|
||||
<p>Jogvita esetén a szolgáltató székhelye szerinti bíróság rendelkezik illetékességgel.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 16 */}
|
||||
<section>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-3">
|
||||
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-primary/10 text-primary text-sm">16</span>
|
||||
Záró rendelkezések
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p>A MotionWeb fenntartja a jogot jelen ÁSZF módosítására.</p>
|
||||
<p className="text-primary font-bold">A módosítás a weboldalon történő közzététellel lép hatályba.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Info */}
|
||||
<div className="bg-gray-50 p-8 border-t border-gray-100 text-center">
|
||||
<div className="flex items-center justify-center gap-2 text-gray-400 text-sm font-medium mb-4">
|
||||
<Shield className="w-4 h-4" />
|
||||
<span>Biztonságos Adatkezelés & Jogi Megfelelőség</span>
|
||||
</div>
|
||||
<p className="text-gray-400 text-xs italic">
|
||||
MotionWeb © {new Date().getFullYear()} - Minden jog fenntartva.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user