UpEase-Framework Section

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": true,
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   // Tailwind CSS Autocomplete, add more if used in projects
   "tailwindCSS.classAttributes": [

package.json

@@ -18,15 +18,20 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "clsx": "^1.2.1",
-    "framer-motion": "^10.18.0",
+    "@tabler/icons-react": "^3.5.0",
+    "@tsparticles/engine": "^3.4.0",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.4.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.2.10",
     "lucide-react": "^0.260.0",
     "next": "^13.4.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
+    "react-intersection-observer": "^9.10.2",
     "react-parallax-tilt": "^1.7.170",
-    "tailwind-merge": "^1.14.0"
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.3.0",
@@ -53,7 +58,7 @@
     "postcss": "^8.4.26",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.3",
     "typescript": "^4.9.5"
   },
   "lint-staged": {

src/app/page.tsx

@@ -5,10 +5,11 @@ import * as React from 'react';
 
 import AmsPlatform from '@/app/sections/ams-section';
 import Contact from '@/app/sections/contact-section';
+import FrameworkSection from '@/app/sections/framework-section';
 import Hero from '@/app/sections/hero-section';
 import IntroductionAms from '@/app/sections/introduction-ams-section';
+import IntroductionFramework from '@/app/sections/introduction-framework-section';
 import IntroductionSla from '@/app/sections/introduction-sla-section';
-import Pricing from '@/app/sections/pricing-section';
 import StudentApp from '@/app/sections/sla-section';
 /**
  * SVGR Support
@@ -28,26 +29,32 @@ export default function HomePage() {
       <section id='upease-section-1'>
         <Hero />
       </section>
-      <div className='spacer' style={{ height: '100vh' }}></div>
-      <section className='bg-black ' id='upease-section-2'>
+      <div className='spacer z-0 h-screen'></div>
+      <section className=' bg-black' id='upease-section-2'>
+        <IntroductionFramework />
+      </section>
+      <section className=' bg-black' id='upease-section-3'>
+        <FrameworkSection />
+      </section>
+      <section className=' bg-black' id='upease-section-3'>
         <IntroductionSla />
       </section>
-      <section className='bg-black' id='upease-section-3'>
+      <section className='bg-black' id='upease-section-4'>
         <StudentApp />
       </section>
-      <section className='bg-black ' id='upease-section-4'>
+      <section className=' bg-black' id='upease-section-5'>
         <IntroductionAms />
       </section>
-      <section className='bg-black' id='upease-section-5'>
+      <section className='bg-black' id='upease-section-6'>
         <AmsPlatform />
       </section>
-      <section
+      {/* <section
         className='bg-gradient-to-b from-[#F2F2F2] to-white '
         id='upease-section-6'
       >
         <Pricing />s
-      </section>
-      <section className='bg-white' id='upease-section-7'>
+      </section> */}
+      <section className='z-50 bg-white' id='upease-section-7'>
         <Contact />
       </section>
     </main>

src/app/sections/ams-section.tsx

@@ -1,16 +1,19 @@
-import Image from 'next/image';
+// import Image from 'next/image';
 import React from 'react';
-import Tilt from 'react-parallax-tilt';
 
-import styles from '@/styles/ams-section.module.css';
+import NavbarBlack from '@/components/Navbarblack';
+import { MacbookScroll } from '@/components/ui/macbook-scroll';
+// import Tilt from 'react-parallax-tilt';
 
-import { cn } from '@/lib/utils';
+// import styles from '@/styles/ams-section.module.css';
 
-import NavbarBlack from '@/components/Navbarblack';
+// import { cn } from '@/lib/utils';
+
+// import NavbarBlack from '@/components/Navbarblack';
 export default function StudentApp() {
   return (
     <div>
-      <NavbarBlack />
+      {/* 
       <div className={styles.gridmain}>
         <Tilt className={cn(styles.gridmobile, ' relative')}>
           <Image
@@ -89,6 +92,19 @@ export default function StudentApp() {
             </div>
           </div>
         </div>
+      </div> */}
+      <NavbarBlack />
+      <div className='w-full overflow-hidden'>
+        <MacbookScroll
+          title={
+            <span>
+              Showcase the Students Section in <br />{' '}
+              <span className='text-primary-600 text-5xl'>UpEase Console</span>
+            </span>
+          }
+          src='/images/STUDENT.svg'
+          showGradient={false}
+        />
       </div>
     </div>
   );

src/app/sections/framework-section.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import { Graph } from '@/components/Graph';
+import NavbarBlack from '@/components/Navbarblack';
+
+// import { StickyScroll } from '@/components/ui/Sticky-scroll-reveal';
+
+export default function FrameworkSection() {
+  const products = [
+    {
+      title: 'UpEase Console',
+      description:
+        'lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+      title: 'Student App',
+      description: '',
+    },
+    {
+      title: 'Your App',
+      description:
+        'lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+      title: 'Copilot Stack',
+      description:
+        'lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+      title: 'UpEase Framework',
+      description:
+        'lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+      title: 'University Data Model',
+      description: '',
+    },
+    {
+      title: 'Microsoft EDU',
+      description:
+        'lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+      title: 'Office Apps',
+      description: '',
+    },
+    {
+      title: 'Microsoft AD',
+      description: '',
+    },
+    {
+      title: 'Multi Tenant',
+      description: '',
+    },
+  ];
+
+  return (
+    <div className='h-full w-full pb-40 lg:px-20'>
+      <NavbarBlack />
+      {/* <customHeroParallax products={products} />{' '} */}
+      <Graph products={products} />
+    </div>
+  );
+}

src/app/sections/hero-section.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { AceButton } from '@/components/buttons/acebutton';
 import { HoverBorderGradient } from '@/components/buttons/acehoverbutton';
+import { Boxes } from '@/components/ui/background-boxes';
 
 function TextPrimary(children: React.ReactNode) {
   return <span className='text-[var(--color-primary-600)]'>{children}</span>;
@@ -31,6 +32,26 @@ export default function Hero() {
   const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
   const translateY = useTransform(scrollYProgress, [0, 0.5], [0, -100]);
 
+  const handleClick2 = () => {
+    const targetElement = document.getElementById('upease-section-2');
+    if (targetElement) {
+      targetElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }
+  };
+
+  const handleClick7 = () => {
+    const targetElement = document.getElementById('upease-section-7');
+    if (targetElement) {
+      targetElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      });
+    }
+  };
+
   return (
     <motion.div
       ref={targetRef}
@@ -44,38 +65,40 @@ export default function Hero() {
         top: 0,
         left: 0,
         width: '100%',
-        zIndex: -10,
-        overflowX: 'hidden',
       }}
-      className='relative -z-10 h-screen'
+      className='relative z-0 h-full'
     >
       <div
         className='layout relative flex min-h-screen flex-col items-center justify-center py-12 text-center'
         style={{ paddingTop: '100px' }}
       >
+        <Boxes />
         {/* <Logo className='w-16' /> */}
         <div className='justify-center text-center'>
           <HoverBorderGradient
             containerClassName='rounded-full'
             as='button'
-            className='flex items-center space-x-2 bg-white text-black'
+            className='z-50 flex items-center space-x-2 bg-white text-black'
           >
-            Read: Introducing UpEase
+            <button onClick={handleClick2}>Read: Introducing UpEase</button>
           </HoverBorderGradient>
         </div>
 
-        <p className='mt-4 max-w-4xl text-4xl font-bold md:text-6xl'>
+        <p className='z-30 mt-4 max-w-5xl text-4xl font-bold md:text-7xl'>
           {/* Data driven solutions to empower {TextPrimary('educators')}, engage{' '}
           {TextPrimary('students')} and bring {TextPrimary('intelligence')}! */}
           A {TextPrimary('Copilot')} for higher education
         </p>
-        <p className='mt-4 max-w-3xl text-xl font-normal'>
+        <p className='z-30 mt-4 max-w-3xl text-xl font-semibold'>
           We provide data driven solutions to empower{' '}
           {TextHighlight('educators')}, engage {TextHighlight('students')} and
           bring {TextHighlight('intelligence')}!
         </p>
         <div className='relative mt-8'>
-          <AceButton className='relative bg-[var(--color-primary-600)] font-semibold text-white '>
+          <AceButton
+            className='relative z-30 bg-[var(--color-primary-600)] font-semibold text-white '
+            onClick={handleClick7}
+          >
             Start a Conversation
           </AceButton>
           <Image
@@ -88,7 +111,7 @@ export default function Hero() {
         </div>
       </div>
 
-      <div
+      {/* <div
         style={{
           position: 'absolute',
           top: 0,
@@ -97,8 +120,8 @@ export default function Hero() {
           height: '100%',
           zIndex: -1,
         }}
-      >
-        {typeof window !== 'undefined' &&
+      > */}
+      {/* {typeof window !== 'undefined' &&
           [...Array(Math.ceil(window.innerWidth / 50))].map((_, index) => (
             <div
               key={index}
@@ -111,10 +134,10 @@ export default function Hero() {
                 backgroundColor: '#A9A9A9',
               }}
             />
-          ))}
+          ))} */}
 
-        {/* Horizontal inclined lines */}
-        {typeof window !== 'undefined' &&
+      {/* Horizontal inclined lines */}
+      {/* {typeof window !== 'undefined' &&
           [...Array(Math.ceil(window.innerHeight / 50))].map((_, index) => (
             <div
               key={`horizontal-${index}`}
@@ -129,8 +152,8 @@ export default function Hero() {
                 transformOrigin: 'top right',
               }}
             />
-          ))}
-      </div>
+          ))} */}
+      {/* </div> */}
     </motion.div>
   );
 }

src/app/sections/introduction-ams-section.tsx

@@ -2,27 +2,10 @@ import { motion } from 'framer-motion';
 import React from 'react';
 
 export default function IntroductionAms() {
-  // const targetRef = React.useRef(null);
-  // const { scrollYProgress } = useScroll({
-  //   target: targetRef,
-  //   offset: ['start end', 'end start'],
-  // });
-  // const borderRadius = useTransform(scrollYProgress, [0, 0.3], [150, 0]);
-
   return (
-    <motion.section
-      // initial={{ y: 0, opacity: 0 }}
-      // transition={{ type: 'spring', stiffness: 100, damping: 15, delay: 1.3 }}
-      // animate={{ y: -300, opacity: 1 }}
-      // style={{
-      //   borderTopLeftRadius: borderRadius,
-      //   borderTopRightRadius: borderRadius,
-      // }}
-      // ref={targetRef}
-      className='flex h-full min-h-[50vh] flex-col items-center bg-black md:min-h-screen'
-    >
-      <div className='flex flex-1 items-center text-xl font-medium text-[#D4B9B9] sm:text-3xl md:text-4xl '>
-        <p>Introducing</p>
+    <motion.section className='flex h-full min-h-[50vh] flex-col items-center bg-black pt-20 md:min-h-screen'>
+      <div className=' flex flex-1 items-start text-xl font-medium text-[#D4B9B9] sm:text-3xl md:text-4xl '>
+        <p>Versatile and Robust</p>
       </div>
       <h1 className='h-100 w-3/4 flex-1 text-center text-5xl text-white sm:px-5 sm:text-6xl  md:text-8xl'>
         UpEase Console