Merge pull request #28 from TEDx-SJEC/feat/santhsim

Feat/santhsim
TEDx-SJEC · Oct 4, 2024 · dfbf2e7 · dfbf2e7
2 parents 2f37ff9 + a1ef74d
commit dfbf2e7
Show file tree

Hide file tree

Showing 10 changed files with 343 additions and 7 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,17 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+
+        images: {
+          remotePatterns: [
+            {
+              protocol: 'https',
+              hostname: 'tedx-sjec.github.io',
+              port: '',
+              pathname: '/**',
+            },
+          ],
+        },
+
+};
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "migrate-latest-w": "wsl sh -c \"export $(grep -v '^#' .env.local | xargs) && LATEST_MIGRATION=$(find prisma/migrations/*/ -type d -name '[0-9]*_*' | sort -r | head -n 1) && turso db shell $TURSO_DB_NAME < '${LATEST_MIGRATION}migration.sql'\""
   },
   "dependencies": {
+    "@gsap/react": "^2.1.1",
     "@hookform/resolvers": "^3.9.0",
     "@libsql/client": "^0.8.1",
     "@next-auth/prisma-adapter": "^1.0.7",
@@ -46,8 +47,10 @@
     "clsx": "^2.1.1",
     "crypto": "^1.0.1",
     "framer-motion": "^11.9.0",
+    "gsap": "^3.12.5",
     "ioredis": "^5.4.1",
     "jest": "^29.7.0",
+    "lenis": "^1.1.13",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.441.0",
     "next": "14.2.6",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -86,3 +86,27 @@
     @apply bg-background text-foreground;
   }
 }
+
+.about{
+  background-color:rgb(255,255,255,0.3)  
+}
+html.lenis,
+html.lenis body {
+  height: auto !important;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain !important;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden !important;
+}
+
+.lenis.lenis-scrolling iframe {
+  pointer-events: none !important;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,7 +3,8 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { StarsCanvas } from "@/components/ui/stars";
-
+import Nav from "@/components/widget/header";
+// import ScrollProgress from "@/components/ui/progressBar";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -18,8 +19,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark">
-      <body className={inter.className}>
-        <StarsCanvas />
+      <body className={inter.className="overflow-x-hidden"}>
+       <Nav/>
+          <StarsCanvas />
         <Providers>{children} </Providers>
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,8 +5,21 @@ import HorizontalScroll from "@/components/HorizontalScrollCarousel";
 import TextReveal from "@/components/ui/text-reveal";
 import HeroVideoDialog from "@/components/ui/hero-video-dialog";
 import ParallaxFooter from "@/components/Footer";
+// import Lenis from 'lenis'
 
 export default function Home() {
+  // const lenis = new Lenis()
+
+  // lenis.on('scroll', (e) => {
+  //   console.log(e)
+  // })
+
+  // function raf(time: number) {
+  //   lenis.raf(time)
+  //   requestAnimationFrame(raf)
+  // }
+
+  // requestAnimationFrame(raf)
   return (
     <>
       <div className="z-20 relative bg-black ">

diff --git a/src/components/ui/progressBar.tsx b/src/components/ui/progressBar.tsx
@@ -0,0 +1,52 @@
+// "use client"
+// import { useEffect } from 'react';
+// import React from 'react';
+// const ScrollProgress: React.FC = () => {
+//   useEffect(() => {
+//     const scrollProgressBar = document.getElementById('scroll-progress-bar');
+
+//     const handleScroll = () => {
+//       // const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+//       // const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+//       // const scrollPercentage = scrollTop / scrollHeight;
+
+//       if (scrollProgressBar) {
+//         scrollProgressBar.style.transform = `scaleX(${Math.min(Math.max(scrollPercentage, 0), 1)})`;
+//       }
+//     };
+
+//     window.addEventListener('scroll', handleScroll);
+
+//     return () => {
+//       window.removeEventListener('scroll', handleScroll);
+//     };
+//   }, []);
+
+//   return (
+//     <>
+//       <style jsx>{`
+//         #scroll-progress-bar {
+//           position: fixed;
+//           top: 0;
+//           left: 0;
+//           height: 2px;
+//           background-color: #EB0028;
+//           transform-origin: left;
+//           transform: scaleX(0);
+//           transition: transform 0.1s ease-out, opacity 0.2s ease-out;
+//           z-index: 9999;
+//           width: 100%;
+//           opacity: 1;
+//         }
+//         #scroll-progress-bar.hidden {
+//           visibility: hidden;
+//           opacity: 0;
+//         }
+//       `}</style>
+
+//       <div id="scroll-progress-bar"></div>
+//     </>
+//   );
+// };
+
+// export default ScrollProgress;
diff --git a/src/components/ui/stars.tsx b/src/components/ui/stars.tsx
@@ -41,7 +41,7 @@ export const StarBackground = (props: PointsProps) => {
 };
 
 export const StarsCanvas = () => (
-  <div className="w-full h-auto fixed inset-0 -z-50 ">
+  <div className="w-screen h-screen fixed inset-0 -z-50 ">
     <Canvas camera={{ position: [0, 0, 1] }}>
       <Suspense fallback={null}>
         <StarBackground />

diff --git a/src/components/ui/text-reveal.tsx b/src/components/ui/text-reveal.tsx
@@ -32,11 +32,11 @@ export const TextRevealByWord: FC<TextRevealByWordProps> = ({
     <div ref={targetRef} className={cn("relative z-0 h-[200vh]", className)}>
       <div
         className={
-          "sticky top-0 mx-auto flex h-[50%]  max-w-8xl justify-center items-start flex-col  bg-transparent px-[7rem] py-[1rem]"
+          "sticky top-0 mx-auto flex h-[50%]  max-w-8xl justify-center items-start flex-col  bg-transparent py-[1rem]"
         }
       >
         <motion.h1
-          className="text-8xl text-start px-12 font-extrabold uppercase text-[#ff0000]"
+          className="text-8xl text-start font-extrabold uppercase text-[#ff0000]"
           // ref={ref}
           initial={{ opacity: 1, y: -30 }}
           // animate={isInView ? { opacity: 1, y: 0 } : {}}