selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Polishing styles

Browse Source
This commit is contained in:
Milton Lenis
2025-01-16 15:31:02 -05:00
parent f416e251e2
commit 5a96e861f5
1 changed files with 100 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
www/app/webinars/[ai-operational-assistant]/page.tsx
View File

@@ -1,6 +1,7 @@
"use client"; "use client";
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image';
export default function WebinarPage() { export default function WebinarPage() {
const [countdown, setCountdown] = useState({ const [countdown, setCountdown] = useState({
@@ -11,11 +12,21 @@ export default function WebinarPage() {
}); });
useEffect(() => { useEffect(() => {
const targetDate = new Date('2024-02-05T18:00:00Z'); // 12pm CST const targetDate = new Date('2025-02-05T18:00:00Z'); // 12pm CST
const updateCountdown = () => { const updateCountdown = () => {
const now = new Date(); const now = new Date();
const difference = targetDate.getTime() - now.getTime(); const difference = targetDate.getTime() - now.getTime();
// If the target date has passed, show all zeros
if (difference < 0) {
setCountdown({
days: 0,
hours: 0,
minutes: 0,
seconds: 0
});
return;
}
setCountdown({ setCountdown({
days: Math.floor(difference / (1000 * 60 * 60 * 24)), days: Math.floor(difference / (1000 * 60 * 60 * 24)),
@@ -30,20 +41,20 @@ export default function WebinarPage() {
}, []); }, []);
return ( return (
<div className="max-w-4xl mx-auto px-4 py-8 bg-gray-50"> <div className="max-w-4xl mx-auto px-2 py-8 bg-gray-50">
<div className="bg-white rounded-3xl p-8 md:p-12 shadow-md mx-auto" style={{ width: '100%', paddingLeft: '20%', paddingRight: '20%' }}> <div className="bg-white rounded-3xl px-10 md:px-36 py-4 shadow-md mx-auto">
<div className="text-center font-bold text-3xl mb-8">M</div> <img src="/monadical-black-white 1.svg" alt="Monadical Logo" className="mx-auto mb-8" width={40} height={40} />
<div className="text-center text-sky-600 text-sm font-semibold mb-4">FREE WEBINAR</div> <div className="text-center text-sky-600 text-sm font-semibold mb-4">FREE WEBINAR</div>
<h1 className="text-center text-4xl md:text-5xl font-bold mb-4 leading-tight"> <h1 className="text-center text-5xl mb-3 leading-tight">
Building AI-Powered<br />Operational Assistants Building AI-Powered<br />Operational Assistants
</h1> </h1>
<p className="text-center text-gray-600 mb-6"> <p className="text-center text-gray-600 mb-4">
From Simple Automation to Strategic Implementation From Simple Automation to Strategic Implementation
</p> </p>
<p className="text-center font-semibold mb-8"> <p className="text-center font-semibold mb-4">
Wednesday, February 5th @ 12pm CST Wednesday, February 5th @ 12pm CST
</p> </p>
@@ -54,21 +65,22 @@ export default function WebinarPage() {
{ value: countdown.minutes, label: 'MINUTES' }, { value: countdown.minutes, label: 'MINUTES' },
{ value: countdown.seconds, label: 'SECONDS' } { value: countdown.seconds, label: 'SECONDS' }
].map((item, index) => ( ].map((item, index) => (
<div key={index} className="text-center"> <div key={index} className="text-center bg-white border border-gray-100 shadow-md rounded-lg p-4 aspect-square w-24">
<div className="text-4xl font-bold mb-2">{item.value}</div> <div className="text-5xl mb-2">{item.value}</div>
<div className="text-sky-600 text-xs font-semibold">{item.label}</div> <div className="text-sky-600 text-xs">{item.label}</div>
</div> </div>
))} ))}
</div> </div>
<div className="px-16">
<Link <Link
href="#" href="#"
className="block w-full max-w-md mx-auto py-4 px-6 bg-sky-600 text-white text-center font-semibold rounded-lg hover:bg-sky-700 transition-colors mb-8" className="block w-full max-w-xs mx-auto py-4 px-6 bg-sky-600 text-white text-center font-semibold rounded-full hover:bg-sky-700 transition-colors mb-8"
> >
RSVP HERE RSVP HERE
</Link> </Link>
<div className="space-y-4 mb-8"> <div className="space-y-4 mb-8 mt-24">
<p> <p>
The hype around AI agents might be a little premature. The hype around AI agents might be a little premature.
But operational assistants are very real, available today, and can unlock your team to do their best work. But operational assistants are very real, available today, and can unlock your team to do their best work.
@@ -89,7 +101,7 @@ export default function WebinarPage() {
"Live demos showing both entry-level and advanced implementations.", "Live demos showing both entry-level and advanced implementations.",
"How you can start implementing them to immediately unlock value." "How you can start implementing them to immediately unlock value."
].map((item, index) => ( ].map((item, index) => (
<li key={index} className="pl-6 relative before:content-[''] before:absolute before:left-0 before:top-2 before:w-2 before:h-2 before:bg-sky-600 before:rounded-full"> <li key={index} className="pl-6 relative before:content-[''] before:absolute before:left-0 before:top-2 before:w-2 before:h-2 before:bg-sky-600">
{item} {item}
</li> </li>
))} ))}
@@ -104,7 +116,7 @@ export default function WebinarPage() {
"Technical decision makers evaluating AI solutions", "Technical decision makers evaluating AI solutions",
"Teams concerned about data security and control" "Teams concerned about data security and control"
].map((item, index) => ( ].map((item, index) => (
<li key={index} className="pl-6 relative before:content-[''] before:absolute before:left-0 before:top-2 before:w-2 before:h-2 before:bg-sky-600 before:rounded-full"> <li key={index} className="pl-6 relative before:content-[''] before:absolute before:left-0 before:top-2 before:w-2 before:h-2 before:bg-sky-600">
{item} {item}
</li> </li>
))} ))}
@@ -118,14 +130,30 @@ export default function WebinarPage() {
<Link <Link
href="#" href="#"
className="block w-full max-w-md mx-auto py-4 px-6 bg-sky-600 text-white text-center font-semibold rounded-lg hover:bg-sky-700 transition-colors mb-8" className="block w-full max-w-xs mx-auto py-4 px-6 bg-sky-600 text-white text-center font-semibold rounded-full hover:bg-sky-700 transition-colors mb-8"
> >
RSVP HERE RSVP HERE
</Link> </Link>
</div>
<div className="text-center text-gray-600 text-sm"> <div className="text-center text-gray-600 text-sm my-24">
POWERED BY:<br /> POWERED BY:<br />
<Link href="/" className="flex justify-center items-center mx-auto">
<Image
src="/reach.svg"
width={32}
height={40}
className="h-11 w-auto"
alt="Reflector"
/>
<div className="hidden flex-col ml-3 md:block mt-4">
<h1 className="text-[28px] font-semibold leading-tight text-left">
Reflector Reflector
</h1>
<p className="text-gray-500 text-xs tracking-tight -mt-1">
Capture the signal, not the noise
</p>
</div>
</Link>
</div> </div>
</div> </div>
</div> </div>