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";
import { useEffect, useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
export default function WebinarPage() {
const [countdown, setCountdown] = useState({
@@ -11,11 +12,21 @@ export default function WebinarPage() {
});
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 now = new Date();
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({
days: Math.floor(difference / (1000 * 60 * 60 * 24)),
@@ -30,20 +41,20 @@ export default function WebinarPage() {
}, []);
return (
<div className="max-w-4xl mx-auto px-4 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="text-center font-bold text-3xl mb-8">M</div>
<div className="max-w-4xl mx-auto px-2 py-8 bg-gray-50">
<div className="bg-white rounded-3xl px-10 md:px-36 py-4 shadow-md mx-auto">
<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>
<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
</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
</p>
<p className="text-center font-semibold mb-8">
<p className="text-center font-semibold mb-4">
Wednesday, February 5th @ 12pm CST
</p>
@@ -54,21 +65,22 @@ export default function WebinarPage() {
{ value: countdown.minutes, label: 'MINUTES' },
{ value: countdown.seconds, label: 'SECONDS' }
].map((item, index) => (
<div key={index} className="text-center">
<div className="text-4xl font-bold mb-2">{item.value}</div>
<div className="text-sky-600 text-xs font-semibold">{item.label}</div>
<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-5xl mb-2">{item.value}</div>
<div className="text-sky-600 text-xs">{item.label}</div>
</div>
))}
</div>
<div className="px-16">
<Link
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
</Link>
<div className="space-y-4 mb-8">
<div className="space-y-4 mb-8 mt-24">
<p>
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.
@@ -89,7 +101,7 @@ export default function WebinarPage() {
"Live demos showing both entry-level and advanced implementations.",
"How you can start implementing them to immediately unlock value."
].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}
</li>
))}
@@ -104,7 +116,7 @@ export default function WebinarPage() {
"Technical decision makers evaluating AI solutions",
"Teams concerned about data security and control"
].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}
</li>
))}
@@ -118,14 +130,30 @@ export default function WebinarPage() {
<Link
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
</Link>
<div className="text-center text-gray-600 text-sm">
</div>
<div className="text-center text-gray-600 text-sm my-24">
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
</h1>
<p className="text-gray-500 text-xs tracking-tight -mt-1">
Capture the signal, not the noise
</p>
</div>
</Link>
</div>
</div>
</div>