mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-19 22:14:07 +01:00
Modify landing page
This commit is contained in:
sosokker
parent
48bc82fb1e
commit
7f0ca35918
@ -1,70 +1,53 @@
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faGoogle, faGithub } from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
export function LandingPage() {
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen bg-gray-100 items-center">
|
||||
<div className="bg-black text-white p-4 w-full">
|
||||
<div className="container mx-auto flex justify-between items-center">
|
||||
<h1 className="text-4xl font-bold">TurTask</h1>
|
||||
<div className="space-x-4">
|
||||
<a
|
||||
href="\signup"
|
||||
className="text-gray-300 hover:text-white border-b-2 border-transparent hover:border-white px-4 py-2 transition duration-300 font-bold">
|
||||
Register
|
||||
</a>
|
||||
<a
|
||||
href="\login"
|
||||
className="text-gray-300 hover:text-white border-b-2 border-transparent hover:border-white px-4 py-2 transition duration-300 font-bold">
|
||||
<div>
|
||||
<div className="navbar bg-base-100">
|
||||
<div className="navbar-start">
|
||||
<a className="btn btn-ghost text-xl">TurTask</a>
|
||||
</div>
|
||||
<div className="navbar-end space-x-3 pr-2">
|
||||
<a className="btn" href="/login">
|
||||
Login
|
||||
</a>
|
||||
<a className="btn" href="/signup">
|
||||
Sign Up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative" id="home">
|
||||
<div aria-hidden="true" className="absolute inset-0 grid grid-cols-2 -space-x-52 opacity-40">
|
||||
<div className="blur-[106px] h-56 bg-gradient-to-br from-primary to-purple-400"></div>
|
||||
<div className="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-sky-300"></div>
|
||||
</div>
|
||||
<div className="container mx-auto flex-grow p-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="grid grid-rows-3">
|
||||
<div className="text-center">
|
||||
<img
|
||||
src="https://img.freepik.com/vektoren-kostenlos/niedlich-schildkroete-meditation-yoga-karikatur-vektor-symbol-illustration-tier-sport-symbol-begriff-freigestellt_138676-6833.jpg"
|
||||
alt="Your Picture"
|
||||
className="rounded-full w-52 h-52 mx-auto mb-4"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h1 className="text-6xl font-bold mb-6">TurTask</h1>
|
||||
<p className="text-5xl font-bold mb-6">Your Ultimate Task Management</p>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-gray-700 text-xl font-bold">
|
||||
TurTask is a task and project management tool that incorporates gamification elements.
|
||||
<div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
|
||||
<div className="relative pt-36 ml-auto">
|
||||
<div className="lg:w-2/3 text-center mx-auto">
|
||||
<h1 className="text-gray-900 font-bold text-5xl md:text-6xl xl:text-7xl">
|
||||
Manage your task with{" "}
|
||||
<span className="text-primary">
|
||||
TurTask
|
||||
<label className="swap swap-flip text-6xl">
|
||||
<input type="checkbox" />
|
||||
<div className="swap-on">😇</div>
|
||||
<div className="swap-off">🥳</div>
|
||||
</label>
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mt-8 text-gray-700">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio incidunt nam itaque sed eius modi error
|
||||
totam sit illum. Voluptas doloribus asperiores quaerat aperiam. Quidem harum omnis beatae ipsum soluta!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center w-full">
|
||||
<div className="bg-white p-10 rounded-lg shadow-md w-full md:w-96 lg:w-1/2">
|
||||
<h1 className="text-4xl font-semibold mb-6">Create your account</h1>
|
||||
<p className="text-gray-700 mb-6 text-lg">Start spending more time on your own table.</p>
|
||||
<div className="font-bold">
|
||||
<div className="mb-4">
|
||||
<button className="flex items-center justify-center bg-blue-500 text-white px-10 py-3 rounded-lg">
|
||||
<span className="mr-3">
|
||||
<FontAwesomeIcon icon={faGoogle} />
|
||||
</span>
|
||||
Sign Up with Google
|
||||
</button>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<button className="flex items-center justify-center bg-gray-800 text-white px-10 py-3 rounded-lg">
|
||||
<span className="mr-3">
|
||||
<FontAwesomeIcon icon={faGithub} />
|
||||
</span>
|
||||
Sign Up with Github
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<button className="bg-green-500 text-white px-10 py-3 rounded-lg">Sign Up with your email.</button>
|
||||
</div>
|
||||
<div className="mt-16 flex flex-wrap justify-center gap-y-4 gap-x-6">
|
||||
<a
|
||||
href="/login"
|
||||
className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
|
||||
<span className="relative text-base font-semibold text-white">Get started</span>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:border before:border-transparent before:bg-primary/10 before:bg-gradient-to-b before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
|
||||
<span className="relative text-base font-semibold text-primary">Placeholder</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user