Add desktop support
This commit is contained in:
46
src/app.tsx
46
src/app.tsx
@ -20,14 +20,14 @@ export function App() {
|
|||||||
<div className="h-full text-white flex items-center justify-center backdrop-blur-[3px] backdrop-grayscale-50">
|
<div className="h-full text-white flex items-center justify-center backdrop-blur-[3px] backdrop-grayscale-50">
|
||||||
<div className="flex flex-col gap-16 items-center text-center">
|
<div className="flex flex-col gap-16 items-center text-center">
|
||||||
<div className="flex flex-col gap-4 items-center">
|
<div className="flex flex-col gap-4 items-center">
|
||||||
<h2 className="text-4xl font-bold">
|
<h2 className="text-4xl font-bold sm:text-6xl">
|
||||||
<AuroraText>Orchestral</AuroraText> Event Management
|
<AuroraText>Orchestral</AuroraText> Event Management
|
||||||
</h2>
|
</h2>
|
||||||
<TextAnimate
|
<TextAnimate
|
||||||
animation="blurInUp"
|
animation="blurInUp"
|
||||||
by="character"
|
by="character"
|
||||||
as="h3"
|
as="h3"
|
||||||
className="text-xl"
|
className="text-xl sm:text-3xl"
|
||||||
>
|
>
|
||||||
Without The Hassle
|
Without The Hassle
|
||||||
</TextAnimate>
|
</TextAnimate>
|
||||||
@ -36,12 +36,12 @@ export function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative overflow-hidden py-5 flex flex-col gap-5">
|
<div className="relative overflow-hidden py-5 flex flex-col gap-5 sm:py-10">
|
||||||
<TextAnimate
|
<TextAnimate
|
||||||
animation="blurInUp"
|
animation="blurInUp"
|
||||||
by="character"
|
by="character"
|
||||||
as="h3"
|
as="h3"
|
||||||
className="text-xl font-bold text-center"
|
className="text-xl font-bold text-center sm:text-3xl"
|
||||||
>
|
>
|
||||||
Our Partners
|
Our Partners
|
||||||
</TextAnimate>
|
</TextAnimate>
|
||||||
@ -50,37 +50,37 @@ export function App() {
|
|||||||
<DotPattern className="-z-10" />
|
<DotPattern className="-z-10" />
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-[url(https://cdn.toontrack.com/app/uploads/product/upright-ebx/jpg/upright-ebx-top-mobile.jpg)] bg-cover bg-center text-white">
|
<div className="bg-[url(https://cdn.toontrack.com/app/uploads/product/upright-ebx/jpg/upright-ebx-top-mobile.jpg)] bg-cover bg-center text-white">
|
||||||
<div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px] backdrop-blur-[5px] backdrop-grayscale-25">
|
<div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] backdrop-blur-[5px] backdrop-grayscale-25 sm:py-10">
|
||||||
<TextAnimate
|
<TextAnimate
|
||||||
animation="blurInUp"
|
animation="blurInUp"
|
||||||
by="character"
|
by="character"
|
||||||
as="h3"
|
as="h3"
|
||||||
className="text-xl font-bold text-center"
|
className="text-xl font-bold text-center sm:text-3xl"
|
||||||
>
|
>
|
||||||
About Us
|
About Us
|
||||||
</TextAnimate>
|
</TextAnimate>
|
||||||
<p>
|
<p className="sm:text-lg">
|
||||||
We are dedicated to simplifying orchestral event management
|
We are dedicated to simplifying orchestral event management
|
||||||
through innovative solutions tailored to the unique needs of
|
through innovative solutions tailored to the unique needs of
|
||||||
orchestras and their audiences.
|
orchestras and their audiences.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p className="sm:text-lg">
|
||||||
Our platform streamlines the planning, coordination, and execution
|
Our platform streamlines the planning, coordination, and execution
|
||||||
of orchestral events, allowing musicians and organizers to focus
|
of orchestral events, allowing musicians and organizers to focus
|
||||||
on what they do best: creating unforgettable musical experiences.
|
on what they do best: creating unforgettable musical experiences.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px] backdrop-blur-[6px]">
|
<div className="relative flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] backdrop-blur-[6px] sm:py-10">
|
||||||
<TextAnimate
|
<TextAnimate
|
||||||
animation="blurInUp"
|
animation="blurInUp"
|
||||||
by="character"
|
by="character"
|
||||||
as="h3"
|
as="h3"
|
||||||
className="text-xl font-bold text-center"
|
className="text-xl font-bold text-center sm:text-3xl"
|
||||||
>
|
>
|
||||||
Events
|
Events
|
||||||
</TextAnimate>
|
</TextAnimate>
|
||||||
<p>
|
<p className="sm:text-lg">
|
||||||
Are you an event organizer looking to host an orchestral
|
Are you an event organizer looking to host an orchestral
|
||||||
performance? Our platform connects you with talented orchestras and
|
performance? Our platform connects you with talented orchestras and
|
||||||
provides the tools you need to plan and execute a successful event.
|
provides the tools you need to plan and execute a successful event.
|
||||||
@ -93,16 +93,16 @@ export function App() {
|
|||||||
<GridPattern strokeDasharray="4 2" className="-z-10" />
|
<GridPattern strokeDasharray="4 2" className="-z-10" />
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-[url(https://images.stockcake.com/public/1/3/a/13a0d24a-a714-43b5-b462-636017c01d60_large/grand-piano-interior-stockcake.jpg)] bg-cover bg-center text-white">
|
<div className="bg-[url(https://images.stockcake.com/public/1/3/a/13a0d24a-a714-43b5-b462-636017c01d60_large/grand-piano-interior-stockcake.jpg)] bg-cover bg-center text-white">
|
||||||
<div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px] backdrop-blur-[3px] backdrop-grayscale-50">
|
<div className="flex flex-col gap-5 p-6 text-center sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] backdrop-blur-[3px] backdrop-grayscale-50 sm:py-10">
|
||||||
<TextAnimate
|
<TextAnimate
|
||||||
animation="blurInUp"
|
animation="blurInUp"
|
||||||
by="character"
|
by="character"
|
||||||
as="h3"
|
as="h3"
|
||||||
className="text-xl font-bold text-center"
|
className="text-xl font-bold text-center sm:text-3xl"
|
||||||
>
|
>
|
||||||
Employee Management
|
Employee Management
|
||||||
</TextAnimate>
|
</TextAnimate>
|
||||||
<p>
|
<p className="sm:text-lg">
|
||||||
Are you an orchestra looking to manage your musicians and staff
|
Are you an orchestra looking to manage your musicians and staff
|
||||||
more effectively? Our platform offers comprehensive employee
|
more effectively? Our platform offers comprehensive employee
|
||||||
management solutions designed specifically for orchestras.
|
management solutions designed specifically for orchestras.
|
||||||
@ -114,37 +114,39 @@ export function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative flex flex-col gap-4 p-6 sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] 2xl:px-[500px]">
|
<div className="relative flex flex-col gap-4 p-6 sm:px-[100px] md:px-[200px] lg:px-[300px] xl:px-[400px] sm:py-10 sm:flex-row sm:justify-around">
|
||||||
<h3 className="font-alex-brush text-2xl">Great Music LLM</h3>
|
<h3 className="font-alex-brush text-2xl sm:text-3xl">
|
||||||
|
Great Music LLM
|
||||||
|
</h3>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<h4 className="font-bold">Services</h4>
|
<h4 className="font-bold text-lg sm:text-xl">Services</h4>
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-gray-500 hover:text-gray-600 hover:underline"
|
className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
|
||||||
>
|
>
|
||||||
Events
|
Events
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-gray-500 hover:text-gray-600 hover:underline"
|
className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
|
||||||
>
|
>
|
||||||
Employee Management
|
Employee Management
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<h4 className="font-bold">Company</h4>
|
<h4 className="font-bold text-lg sm:text-xl">Company</h4>
|
||||||
<div className="flex flex-col gap-1">
|
<div className="flex flex-col gap-1">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-gray-500 hover:text-gray-600 hover:underline"
|
className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
|
||||||
>
|
>
|
||||||
Terms & Conditions
|
Terms & Conditions
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="text-gray-500 hover:text-gray-600 hover:underline"
|
className="text-gray-500 hover:text-gray-600 hover:underline sm:text-lg"
|
||||||
>
|
>
|
||||||
Privacy Policy
|
Privacy Policy
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Reference in New Issue
Block a user