landing

2026-01-15 16:27:48 +00:00 · 2026-01-15 16:27:48 +00:00 · 6529641a72
commit 6529641a72
parent c41134fbf1
8 changed files with 130 additions and 16 deletions
--- a/assets/pasted-20260115-162026-20208a7c.jpg
+++ b/assets/pasted-20260115-162026-20208a7c.jpg
--- a/assets/pasted-20260115-162603-0edb92a7.jpg
+++ b/assets/pasted-20260115-162603-0edb92a7.jpg
--- a/frontend/public/assets/vm-shot-2026-01-15T16-20-21-040Z.jpg
+++ b/frontend/public/assets/vm-shot-2026-01-15T16-20-21-040Z.jpg
--- a/frontend/public/assets/vm-shot-2026-01-15T16-24-24-855Z.jpg
+++ b/frontend/public/assets/vm-shot-2026-01-15T16-24-24-855Z.jpg
--- a/frontend/public/assets/vm-shot-2026-01-15T16-25-54-285Z.jpg
+++ b/frontend/public/assets/vm-shot-2026-01-15T16-25-54-285Z.jpg
--- a/frontend/src/css/_landing.css
+++ b/frontend/src/css/_landing.css
@ -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);
+  }
+}
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@ -6,6 +6,7 @@ import Head from 'next/head';
 import { store } from '../stores/store';
 import { Provider } from 'react-redux';
 import '../css/main.css';
+import '../css/_landing.css';
 import axios from 'axios';
 import { baseURLApi } from '../config';
 import { useRouter } from 'next/router';
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@ -7,43 +7,116 @@ import SectionFullScreen from '../components/SectionFullScreen'
 import LayoutGuest from '../layouts/Guest'
 import { getPageTitle } from '../config'
 import { useAppSelector } from '../stores/hooks'
+import {
+  mdiBookOpenPageVariant,
+  mdiAccountGroup,
+  mdiChartLine,
+  mdiGithub,
+  mdiTwitter,
+  mdiLinkedin,
+} from '@mdi/js'
+import BaseIcon from '../components/BaseIcon'

 export default function Landing() {
  const textColor = useAppSelector((state) => state.style.linkColor)
  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 (
-    <div className="flex flex-col min-h-screen">
+    <div className="landing-gradient text-white">
      <Head>
        <title>{getPageTitle('Welcome')}</title>
      </Head>

-      <SectionFullScreen bg="violet" className="flex-grow">
-        <div className="container mx-auto px-4 text-center">
-          <h1 className="text-4xl md:text-6xl font-bold mb-4 text-white">
+      <SectionFullScreen className="relative">
+        <div className="container relative mx-auto px-4 text-center">
+          <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}
          </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.
          </p>
-          <BaseButton
-            href="/login"
-            label="Get Started"
-            color="info"
-            size="lg"
-            className="w-auto"
-          />
+          <div style={{ animationDelay: '0.6s' }} className="opacity-0 fade-in-up">
+            <BaseButton href="/login" label="Get Started" color="info" size="lg" className="w-auto" />
+          </div>
        </div>
      </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">
-          <p className="text-sm">
+          <p className="text-sm text-white/70">
            © {new Date().getFullYear()} <span>{title}</span>. All rights reserved.
          </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
-          </Link>
+            </Link>
+          </div>
        </div>
      </footer>
    </div>