add header gradient, edit class page styling

JumboCode · Dec 9, 2024 · a9e8bcc · a9e8bcc
1 parent e76197d
commit a9e8bcc
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/src/index.css b/src/index.css
@@ -20,4 +20,10 @@
 @font-face {
     font-family: 'Avenir';
     src: url('./assets/fonts/AvenirLTStd-Heavy.otf') format('opentype');
+}
+
+@layer components {
+  .header-gradient {
+    background: radial-gradient(120% 177.59% at -20% 100%, rgba(255, 255, 255, 0.80) 0%, rgba(211, 237, 252, 0.80) 35.46%, rgba(178, 224, 250, 0.80) 57.09%, rgba(138, 199, 244, 0.80) 76.71%, rgba(63, 150, 234, 0.80) 100%);
+  }
 }
diff --git a/src/pages/ClassesPage.jsx b/src/pages/ClassesPage.jsx
@@ -37,37 +37,35 @@ const ClassesPage = () => {
   return (
     <div className="h-full bg-white">
       {/* Banner Section */}
-      <div className="bg-gradient-to-r from-[#FFFFFF] from-5% via-[#D3EDFC] via-35% via-[#B2A0FA] via-75% via-[#8AC7F4] to-[#3F96EA] py-12">
-        <div className="max-w-7xl mx-auto px-8">
-          <p className="text-lg text-dark-blue-700 mb-2">Level {level.level}</p>
-          <h1 className='text-4xl font-bold text-dark-blue-800 mb-4'>{level.name}</h1>
+      <div className="header-gradient py-28 px-14">
+        <p className="text-lg text-dark-blue-700 mb-2">Level {level.level}</p>
+        <h1 className='text-4xl font-bold text-dark-blue-800 mb-4'>{level.name}</h1>
 
-          <div className="flex items-center gap-2 mb-6">
-            <div className="flex -space-x-2">
-              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-300 to-blue-400 border-2 border-white"></div>
-              <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-200 to-blue-300 border-2 border-white"></div>
-            </div>
-            <p className="text-neutral-400">{level.enrolledCount || 46} students enrolled</p>
+        <div className="flex items-center gap-2 mb-6">
+          <div className="flex -space-x-2">
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-300 to-blue-400 border-2 border-white"></div>
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-200 to-blue-300 border-2 border-white"></div>
           </div>
+          <p className="text-neutral-400">{level.enrolledCount || 46} students enrolled</p>
+        </div>
 
-          <p className="text-neutral-600 max-w-2xl mb-8">
-            This class is for those with little to no experience in English. It will be going over
-            the alphabet, basic vocabulary, and simple grammar rules.
-          </p>
+        <p className="text-neutral-600 max-w-2xl mb-8">
+          This class is for those with little to no experience in English. It will be going over
+          the alphabet, basic vocabulary, and simple grammar rules.
+        </p>
 
-          <div className="flex gap-4">
-            <span className="px-6 py-2.5 bg-white rounded-full text-neutral-500 text-sm hover:bg-opacity-90 transition-colors">
-              Basic Conversations
-            </span>
-            <span className="px-6 py-2.5 bg-white rounded-full text-neutral-500 text-sm hover:bg-opacity-90 transition-colors">
-              The Alphabet
-            </span>
-          </div>
+        <div className="flex gap-4">
+          <span className="px-6 py-2.5 bg-white rounded-full text-neutral-500 text-sm hover:bg-opacity-90 transition-colors">
+            Basic Conversations
+          </span>
+          <span className="px-6 py-2.5 bg-white rounded-full text-neutral-500 text-sm hover:bg-opacity-90 transition-colors">
+            The Alphabet
+          </span>
         </div>
       </div>
 
       {/* Content Section */}
-      <div className="max-w-7xl mx-auto px-8 py-12">
+      <div className="max-w-7xl px-14 py-12">
         {/* Open Classes */}
         <div className="mb-20">
           <h2 className="text-2xl font-bold text-dark-blue-800 mb-4">Open Classes</h2>