landing
This commit is contained in:
Flatlogic Bot
parent
c41134fbf1
commit
6529641a72
BIN
assets/pasted-20260115-162026-20208a7c.jpg
Normal file
BIN
assets/pasted-20260115-162026-20208a7c.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
assets/pasted-20260115-162603-0edb92a7.jpg
Normal file
BIN
assets/pasted-20260115-162603-0edb92a7.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
frontend/public/assets/vm-shot-2026-01-15T16-20-21-040Z.jpg
Normal file
BIN
frontend/public/assets/vm-shot-2026-01-15T16-20-21-040Z.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
frontend/public/assets/vm-shot-2026-01-15T16-24-24-855Z.jpg
Normal file
BIN
frontend/public/assets/vm-shot-2026-01-15T16-24-24-855Z.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
frontend/public/assets/vm-shot-2026-01-15T16-25-54-285Z.jpg
Normal file
BIN
frontend/public/assets/vm-shot-2026-01-15T16-25-54-285Z.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
40
frontend/src/css/_landing.css
Normal file
40
frontend/src/css/_landing.css
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
|
||||||
|
.landing-gradient {
|
||||||
|
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: gradient 15s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradient {
|
||||||
|
0% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: 0% 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in-up {
|
||||||
|
animation: fadeInUp 1s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -6,6 +6,7 @@ import Head from 'next/head';
|
|||||||
import { store } from '../stores/store';
|
import { store } from '../stores/store';
|
||||||
import { Provider } from 'react-redux';
|
import { Provider } from 'react-redux';
|
||||||
import '../css/main.css';
|
import '../css/main.css';
|
||||||
|
import '../css/_landing.css';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { baseURLApi } from '../config';
|
import { baseURLApi } from '../config';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
|
|||||||
@ -7,43 +7,116 @@ import SectionFullScreen from '../components/SectionFullScreen'
|
|||||||
import LayoutGuest from '../layouts/Guest'
|
import LayoutGuest from '../layouts/Guest'
|
||||||
import { getPageTitle } from '../config'
|
import { getPageTitle } from '../config'
|
||||||
import { useAppSelector } from '../stores/hooks'
|
import { useAppSelector } from '../stores/hooks'
|
||||||
|
import {
|
||||||
|
mdiBookOpenPageVariant,
|
||||||
|
mdiAccountGroup,
|
||||||
|
mdiChartLine,
|
||||||
|
mdiGithub,
|
||||||
|
mdiTwitter,
|
||||||
|
mdiLinkedin,
|
||||||
|
} from '@mdi/js'
|
||||||
|
import BaseIcon from '../components/BaseIcon'
|
||||||
|
|
||||||
export default function Landing() {
|
export default function Landing() {
|
||||||
const textColor = useAppSelector((state) => state.style.linkColor)
|
const textColor = useAppSelector((state) => state.style.linkColor)
|
||||||
const title = 'CourseFlow LMS'
|
const title = 'CourseFlow LMS'
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: mdiBookOpenPageVariant,
|
||||||
|
title: 'Interactive Courses',
|
||||||
|
description: 'Engage your learners with rich multimedia content, quizzes, and assignments.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: mdiAccountGroup,
|
||||||
|
title: 'User Management',
|
||||||
|
description: 'Easily manage users, roles, and permissions with our flexible system.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: mdiChartLine,
|
||||||
|
title: 'Progress Tracking',
|
||||||
|
description: 'Monitor learner progress with detailed analytics and reporting tools.',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const socialLinks = [
|
||||||
|
{ href: 'https://github.com', icon: mdiGithub },
|
||||||
|
{ href: 'https://twitter.com', icon: mdiTwitter },
|
||||||
|
{ href: 'https://linkedin.com', icon: mdiLinkedin },
|
||||||
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col min-h-screen">
|
<div className="landing-gradient text-white">
|
||||||
<Head>
|
<Head>
|
||||||
<title>{getPageTitle('Welcome')}</title>
|
<title>{getPageTitle('Welcome')}</title>
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<SectionFullScreen bg="violet" className="flex-grow">
|
<SectionFullScreen className="relative">
|
||||||
<div className="container mx-auto px-4 text-center">
|
<div className="container relative mx-auto px-4 text-center">
|
||||||
<h1 className="text-4xl md:text-6xl font-bold mb-4 text-white">
|
<h1
|
||||||
|
className="text-4xl md:text-7xl font-bold mb-4 text-white opacity-0 fade-in-up"
|
||||||
|
style={{ textShadow: '0 2px 8px rgba(0,0,0,0.5)', animationDelay: '0.2s' }}
|
||||||
|
>
|
||||||
Welcome to {title}
|
Welcome to {title}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg md:text-xl mb-8 text-white/70">
|
<p
|
||||||
|
className="text-lg md:text-xl mb-8 text-white/90 opacity-0 fade-in-up"
|
||||||
|
style={{ textShadow: '0 2px 8px rgba(0,0,0,0.5)', animationDelay: '0.4s' }}
|
||||||
|
>
|
||||||
A modern and flexible platform for your online courses.
|
A modern and flexible platform for your online courses.
|
||||||
</p>
|
</p>
|
||||||
<BaseButton
|
<div style={{ animationDelay: '0.6s' }} className="opacity-0 fade-in-up">
|
||||||
href="/login"
|
<BaseButton href="/login" label="Get Started" color="info" size="lg" className="w-auto" />
|
||||||
label="Get Started"
|
</div>
|
||||||
color="info"
|
|
||||||
size="lg"
|
|
||||||
className="w-auto"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</SectionFullScreen>
|
</SectionFullScreen>
|
||||||
|
|
||||||
<footer className="bg-gray-800 text-white py-6">
|
<section className="py-20">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl font-bold">Why Choose Us?</h2>
|
||||||
|
<p className="text-white/80 mt-2">
|
||||||
|
Everything you need to create and manage your online learning experience.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="p-8 glass-card rounded-2xl text-center shadow-lg"
|
||||||
|
>
|
||||||
|
<BaseIcon path={feature.icon} size={48} className="mx-auto" />
|
||||||
|
<h3 className="text-xl font-semibold mt-4 mb-2">{feature.title}</h3>
|
||||||
|
<p className="text-white/90">{feature.description}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer className="text-white py-10">
|
||||||
<div className="container mx-auto px-4 text-center">
|
<div className="container mx-auto px-4 text-center">
|
||||||
<p className="text-sm">
|
<p className="text-sm text-white/70">
|
||||||
© {new Date().getFullYear()} <span>{title}</span>. All rights reserved.
|
© {new Date().getFullYear()} <span>{title}</span>. All rights reserved.
|
||||||
</p>
|
</p>
|
||||||
<Link href="/privacy-policy" className={`mt-2 inline-block text-sm ${textColor}`}>
|
<div className="flex justify-center space-x-4 mt-4">
|
||||||
|
{socialLinks.map((social, index) => (
|
||||||
|
<a
|
||||||
|
key={index}
|
||||||
|
href={social.href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-white/70 hover:text-white"
|
||||||
|
>
|
||||||
|
<BaseIcon path={social.icon} size={24} />
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<Link href="/privacy-policy" className={'text-sm text-white/70 hover:text-white'}>
|
||||||
Privacy Policy
|
Privacy Policy
|
||||||
</Link>
|
</Link>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user