Upload 74 files

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitattributes

@@ -1,35 +1,12 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+# Auto detect text files and perform LF normalization
+* text=auto
+public/b1.png filter=lfs diff=lfs merge=lfs -text
+public/b2.jpg filter=lfs diff=lfs merge=lfs -text
+public/b3.jpg filter=lfs diff=lfs merge=lfs -text
+public/b5.jpg filter=lfs diff=lfs merge=lfs -text
+public/b5.png filter=lfs diff=lfs merge=lfs -text
+public/sodaimage/bg.png filter=lfs diff=lfs merge=lfs -text
+public/sodaimage/bg03.png filter=lfs diff=lfs merge=lfs -text
+public/sodaimage/mockup.png filter=lfs diff=lfs merge=lfs -text
+public/works/works02.jpg filter=lfs diff=lfs merge=lfs -text
+public/works/works03.jpg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -4,20 +4,33 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -1,81 +1,50 @@
----
-title: Web Agency
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
-sdk: static
-pinned: false
-app_build_command: npm run build
-app_file: build/index.html
----
+# Agency Website
 
-# Getting Started with Create React App
+Welcome to the **Agency Website** project! This is a modern, responsive website template built using **Next.js**. It's designed to showcase agency services with a sleek and interactive design, incorporating 3D elements using **Spline**, and animations with **Framer Motion**. The website is styled with **Tailwind CSS** and developed with **TypeScript** for robust type safety.
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-## Available Scripts
+## 🔗 Live Demo
 
-In the project directory, you can run:
+Check out the live version of the Agency Website:  
+[**Live Demo**](https://agency01.vercel.app/)
 
-### `npm start`
+## 🚀 Purpose
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+The goal of this project is to provide a visually stunning and interactive website template for agencies. The website features:
 
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
+- A modern, professional design.
+- 3D elements and animations to enhance user experience.
+- Responsive layout to ensure optimal viewing on all devices.
 
-### `npm test`
+Built with **Next.js** for server-side rendering and static site generation, **Tailwind CSS** for utility-first styling, **Framer Motion** for animations, **Spline** for 3D graphics, and **TypeScript** for type safety, this template offers both flexibility and performance.
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## 🛠️ Frameworks & Technologies
 
-### `npm run build`
+This project utilizes the following technologies:
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+- **Next.js** - React framework for server-side rendering (SSR) and static site generation (SSG).
+- **React** - For building the user interface with reusable components.
+- **Tailwind CSS** - For utility-first styling and responsive design.
+- **Framer Motion** - For smooth animations and interactive elements.
+- **Spline** - For integrating 3D graphics into the website.
+- **TypeScript** - For static type checking and improved code quality.
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+## 📝 Setup & Customization
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+To get started with the project:
 
-### `npm run eject`
+```bash
+# Clone the repository
+git clone https://github.com/charltonkdev/agency-website.git
 
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+# Navigate to the project folder
+cd agency-website
 
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+# Install dependencies
+npm install
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+# Run the development server
+npm run dev
 
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+# Open http://localhost:3000 in your browser to view the project
+```

next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  };
+  
+  export default nextConfig;
+  

package.json

@@ -1,39 +1,53 @@
 {
-  "name": "react-template",
+  "name": "agency01",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.108.3",
+    "@react-three/fiber": "^8.16.8",
+    "@splinetool/react-spline": "^4.0.0",
+    "@splinetool/runtime": "^1.8.9",
+    "@studio-freight/lenis": "^1.0.42",
+    "@tabler/icons-react": "^3.9.0",
+    "@tsparticles/engine": "^3.5.0",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.5.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.2.14",
+    "gsap": "^3.12.5",
+    "lenis": "^1.1.5",
+    "locomotive-scroll": "^4.1.4",
+    "mini-svg-data-uri": "^1.4.4",
+    "next": "14.2.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-feather": "^2.0.10",
+    "react-icons": "^5.2.1",
+    "sass": "^1.77.6",
+    "simplex-noise": "^4.0.1",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.166.1",
+    "three-globe": "^2.31.1"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "devDependencies": {
+    "@types/locomotive-scroll": "^4.1.3",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.4",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "overrides": {
+    "three": "^0.166.1"
   }
 }

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/app/globals.css

@@ -0,0 +1,160 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 11, 13, 33;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 0, 0, 0;
+}
+
+
+body {
+  color: rgb(var(--background-start-rgb));
+  background: rgb(var(--foreground-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+html.lenis, html.lenis body {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
+.lenis.lenis-smooth iframe {
+  pointer-events: none;
+}
+
+.creativeBtn{
+  transition: 0.3s ease-in-out;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #fff;
+}
+.creativeBtn:hover {
+  color: #fff;
+}
+.creativeBtn span {
+  position: relative;
+  z-index: 9;
+}
+.creativeBtn:after {
+  content: '';
+  width: 100px;
+  height: 100px;
+  border-radius: 100%;
+  background:#000;
+  position: absolute;
+  display: block;
+  left: 0;
+  top:calc(-5vh);
+  z-index: 0;
+  scale: 0;
+  transition: 0.3s ease-in-out;
+}
+.creativeBtn:hover:after{
+  scale: 1.2;
+}
+
+
+/* components/Banner.module.css */
+
+.product {
+  position: absolute;
+  right: 0;
+  transform: translateX(60%);
+  bottom: calc(-10vw);
+  z-index: 2;
+  width: 500px;
+  transition: 0.7s;
+}
+
+.product .soda {
+  position: absolute;
+  bottom: 0;
+  right: 50%;
+  transform: translateX(-50%);
+}
+
+.soda {
+  --left: 0px;
+  background: var(--url) var(--left), url(/sodaimage/mockup.png) 0 0;
+  background-size: auto 100%;
+  width: 250px;
+  aspect-ratio: 2 / 4;
+  background-blend-mode: multiply;
+  transition: 0.8s;
+  mask-image: url(/sodaimage/mockup.png);
+  mask-size: auto 100%;
+}
+
+.soda:nth-child(2) {
+  opacity: 0;
+}
+
+.brandContainer:hover .product {
+  bottom: 100px;
+}
+
+.brandContainer:hover .product .soda:nth-child(2) {
+  opacity: 1;
+  --left: 500px;
+}
+
+.brandContainer:hover .product .soda:nth-child(1) {
+  opacity: 0;
+  --left: 500px;
+}
+
+@media screen and (max-width: 1023px) {
+  .soda {
+    width: 250px;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .soda {
+    width: 150px;
+  }
+  .product {
+    bottom: -260px;
+  }
+
+  .brandContainer:hover .product {
+    bottom: -150px;
+  }
+
+  .brandContainer:hover .product .soda:nth-child(2) {
+    --left: 300px;
+  }
+}
+
+@keyframes slideFadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.orbStyle {
+  animation: slideFadeInUp 1s ease forwards;
+}

src/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Menu from "@/components/Menu";
+import Footer from "@/components/Footer";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Website Agency",
+  description: "We build your ideas",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${inter.className} overflow-x-hidden relative`} >
+        <Menu />
+        {children}
+        <Footer />
+        </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,17 @@
+import About from "@/components/About";
+import Hero from "@/components/Hero";
+import Services from '@/components/Services';
+import LenisScroll from '@/components/ui/LenisScroll';
+import Works from "@/components/Works";
+
+export default function Home() {
+  return (
+    <main className='flex relative min-h-screen flex-col items-center justify-between overflow-x-hidden'>
+      <LenisScroll />
+      <Hero />
+      <About />
+      <Services />
+      <Works />
+    </main>
+  );
+}

src/components/About.tsx

@@ -0,0 +1,52 @@
+'use client'
+import React, { useRef, useEffect, useState } from 'react';
+import { motion } from "framer-motion";
+
+const About = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [hasAnimated, setHasAnimated] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !hasAnimated) {
+          setIsVisible(true);
+          setHasAnimated(true); // Ensure the animation plays only once
+        } else if (!entry.isIntersecting && entry.boundingClientRect.top > 0) {
+          setIsVisible(false);
+          setHasAnimated(false); // Reset the animation when scrolling up
+        }
+      },
+      {
+        threshold: 0.5, // Adjust threshold as needed
+      }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [hasAnimated]);
+
+  return (
+    <div className='relative flex flex-col w-full h-screen p-12 lg:p-24 justify-center items-center bg-black z-10'>
+      <motion.div
+        ref={ref}
+        initial={{ opacity: 0, y: 50 }}
+        animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
+        transition={{ duration: 0.5 }}
+        className='flex z-50 flex-col w-full text-xl leading-[2] md:text-3xl max-w-4xl md:leading-[2]'
+      >
+        Welcome to iDEA agency, where creativity meets technology. We are a team of passionate designers and developers dedicated to crafting stunning websites that not only look great but also deliver exceptional user experiences. With years of industry experience, we specialize in creating custom digital solutions tailored to your business needs. Our mission is to elevate your brand online and help you stand out in the digital landscape.
+      </motion.div>
+    </div>
+  );
+};
+
+export default About;

src/components/CanvasMenu/Button/index.jsx

@@ -0,0 +1,36 @@
+import { motion } from 'framer-motion';
+import styles from './style.module.scss';
+
+export default function Button({isActive, toggleMenu}) {
+  return (
+    <div className={styles.button}>
+        <motion.div 
+            className={styles.slider}
+            animate={{top: isActive ? "-100%" : "0%"}}
+            transition={{ duration: 0.5, type: "tween", ease: [0.76, 0, 0.24, 1]}}
+        >
+            <div 
+                className={styles.el}
+                onClick={() => {toggleMenu()}}
+            >
+                <PerspectiveText label="Menu"/>
+            </div>
+            <div 
+                className={styles.el}
+                onClick={() => {toggleMenu()}}
+            >
+                <PerspectiveText label="Close" />
+            </div>
+        </motion.div>
+    </div>
+  )
+}
+
+function PerspectiveText({label}) {
+    return (    
+        <div className={styles.perspectiveText}>
+            <p>{label}</p>
+            <p>{label}</p>
+        </div>
+    )
+}

src/components/CanvasMenu/Button/style.module.scss

@@ -0,0 +1,68 @@
+.button{
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 100px;
+    height: 40px;
+    cursor: pointer;
+    border-radius: 25px;
+    overflow: hidden;
+
+    .slider{
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .el{
+            width: 100%;
+            height: 100%;
+            background-color: #D35A0A;
+            p{
+                margin: 0px;
+            }
+            &:nth-of-type(2){
+                background-color: #000;
+                p{
+                    color: #fff;
+                }
+            }
+            &:hover{
+                .perspectiveText{
+                    transform: rotateX(90deg);
+                    p{
+                        &:nth-of-type(1){
+                            transform: translateY(-100%);
+                            opacity: 0;
+                        }
+                        &:nth-of-type(2){
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+}
+
+.perspectiveText{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    transform-style: preserve-3d;
+    transition: transform 0.5s cubic-bezier(0.6, 0, 0.24, 1);
+    p{
+        transition: all 0.5s cubic-bezier(0.6, 0, 0.24, 1);
+        pointer-events: none;
+        text-transform: uppercase;
+        &:nth-of-type(2){
+            position: absolute;
+            transform-origin: bottom center;
+            transform: rotateX(-90deg) translateY(9px);
+            opacity: 0;
+        }
+    }
+}

src/components/CanvasMenu/Nav/anim.js

@@ -0,0 +1,44 @@
+export const perspective = {
+    initial: {
+        opacity: 0,
+        rotateX: 90,
+        translateY: 80,
+        translateX: -20,
+    },
+    enter: (i) => ({
+        opacity: 1,
+        rotateX: 0,
+        translateY: 0,
+        translateX: 0,
+        transition: {
+            duration: 0.65, 
+            delay: 0.5 + (i * 0.1), 
+            ease: [.215,.61,.355,1],
+            opacity: { duration: 0.35}
+        }
+    }),
+    exit: {
+        opacity: 0,
+        transition: { duration: 0.5, type: "linear", ease: [0.76, 0, 0.24, 1]}
+    }
+}
+
+export const slideIn = {
+    initial: {
+        opacity: 0,
+        y: 20
+    },
+    enter: (i) => ({
+        opacity: 1,
+        y: 0,
+        transition: { 
+            duration: 0.5,
+            delay: 0.75 + (i * 0.1), 
+            ease: [.215,.61,.355,1]
+        }
+    }),
+    exit: {
+        opacity: 0,
+        transition: { duration: 0.5, type: "tween", ease: "easeInOut"}
+    }
+}

src/components/CanvasMenu/Nav/data.js

@@ -0,0 +1,37 @@
+export const links = [
+    {
+        title: "About",
+        href: "/"
+    },
+    {
+        title: "Works",
+        href: "/"
+    },
+    {
+        title: "Services",
+        href: "/"
+    },
+    {
+        title: "Contact",
+        href: "/"
+    }
+]
+
+export const footerLinks = [
+    {
+        title: "Facebook",
+        href: "/"
+    },
+    {
+        title: "LinkedIn",
+        href: "/"
+    },
+    {
+        title: "Instagram",
+        href: "/"
+    },
+    {
+        title: "Twitter",
+        href: "/"
+    }
+]

src/components/CanvasMenu/Nav/index.jsx

@@ -0,0 +1,54 @@
+import styles from "./style.module.scss";
+import { motion } from "framer-motion";
+import { links, footerLinks } from "./data";
+import Image from "next/image";
+import { perspective, slideIn } from "./anim";
+import clsx from "clsx";
+
+export default function index() {
+	return (
+		<div className={styles.mainNav}>
+			<div className={styles.nav}>
+				<div className={clsx(styles.body)}>
+					{links.map((link, i) => {
+						const { title, href } = link;
+						return (
+							<div key={`b_${i}`} className={styles.linkContainer}>
+								<motion.div
+									href={href}
+									custom={i}
+									variants={slideIn}
+									initial="initial"
+									animate="enter"
+									exit="exit"
+								>
+									<a>{title}</a>
+								</motion.div>
+							</div>
+						);
+					})}
+				</div>
+				<motion.div className={styles.footer}>
+					{footerLinks.map((link, i) => {
+						const { title, href } = link;
+						return (
+							<motion.a
+								variants={slideIn}
+								custom={i}
+								initial="initial"
+								animate="enter"
+								exit="exit"
+								key={`f_${i}`}
+							>
+								{title}
+							</motion.a>
+						);
+					})}
+				</motion.div>
+			</div>
+			<div className="relative block w-[100vw] h-[50vh] pt-[100px]">
+				<Image alt src="/b5.jpg" objectFit="cover" width={1280} height={1080}/>
+			</div>
+		</div>
+	);
+}

src/components/CanvasMenu/Nav/style.module.scss

@@ -0,0 +1,64 @@
+.nav{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 100px 40px 50px 40px;
+    height: 75vh;
+    box-sizing: border-box;
+    position: relative;
+    .body{
+        display: flex;
+        gap: 10px;
+        flex-direction: column;
+        .linkContainer{
+            perspective: 120px;
+            perspective-origin: bottom;
+        }
+        a{
+            text-decoration: none;
+            color: #000;
+            font-size: 46px;
+            width: max-content;
+            display: block;
+            transition: 0.2s ease-in-out;
+            overflow: hidden;
+            cursor: pointer;
+        }
+        a:after {
+            content: '';
+            display: block;
+            position: relative;
+            width: 100%;
+            height: 3px;
+            background: #000;
+            transform: translateX(-100%);
+            transition: .3s ease-in-out;
+        }
+        a:hover:after {
+            transform: translateX(0);
+            transition: .3s ease-in-out;
+        }
+    }
+    .footer{
+        display: flex;
+        flex-wrap: wrap;
+        a{
+            width: 50%;
+            margin-top: 5px;
+        }
+    }
+}
+
+.mainNav {
+    display: grid;
+    position: relative;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media  (max-width: 1024px){
+    .mainNav {
+        display: flex !important;
+        flex-direction: column !important;
+
+    }
+}

src/components/CanvasMenu/index.jsx

@@ -0,0 +1,44 @@
+'use client';
+import { useState } from 'react'
+import { AnimatePresence, motion } from 'framer-motion';
+import Button from './Button';
+import styles from './style.module.scss';
+import Nav from './Nav';
+import clsx from 'clsx';
+
+const menu = {
+    open: {
+        width: "88vw",
+        height: "75vh",
+        top: "-25px",
+        right: "-25px",
+        transition: { duration: 0.5, type: "tween", ease: [0.76, 0, 0.24, 1] }
+    },
+    closed: {
+        width: "100px",
+        height: "40px",
+        top: "0px",
+        right: "0px",
+        transition: { duration: 0.5, delay: 0.35, type: "tween", ease: [0.76, 0, 0.24, 1] }
+    }
+}
+
+export default function Index() {
+    const [isActive, setIsActive] = useState(false);
+
+    return (
+        <div className={styles.header}>
+            <motion.div
+                className={clsx(styles.menu)}
+                variants={menu}
+                animate={isActive ? "open" : "closed"}
+                initial="closed"
+            >
+                <AnimatePresence>
+                    {isActive && <Nav />}
+                </AnimatePresence>
+            </motion.div>
+            <Button isActive={isActive} toggleMenu={() => { setIsActive(!isActive) }} />
+        </div>
+    )
+}

src/components/CanvasMenu/style.module.scss

@@ -0,0 +1,17 @@
+.header {
+  position: fixed;
+  right: 50px;
+  top: 50px;
+  z-index: 99;
+  .menu {
+    width: 480px;
+    height: 650px;
+    background-color: #fff;
+    border-radius: 25px;
+    overflow: hidden;
+    position: relative;
+    a {
+      color: #000;
+    }
+  }
+}

src/components/Footer.tsx

@@ -0,0 +1,130 @@
+'use client'
+import { useRef, useEffect } from 'react';
+import { gsap } from 'gsap';
+
+export function Footer() {
+    const listItemsRef = useRef<(HTMLLIElement | null)[]>([]);
+    const spanItemsRef = useRef<(HTMLSpanElement | null)[]>([]);
+
+    useEffect(() => {
+        const handleMouseEnter = (item: HTMLElement) => {
+            const textInitial = item.querySelector('.initial');
+            const textHover = item.querySelector('.hover');
+            gsap.to(textInitial, {
+                yPercent: -100,
+                perspective: 1000,
+                rotationX: 90,
+                duration: 1,
+                ease: 'power4.out',
+            });
+            gsap.to(textHover, {
+                yPercent: 0,
+                perspective: 1000,
+                rotationX: 0,
+                duration: 1,
+                ease: 'power4.out',
+            });
+        };
+
+        const handleMouseLeave = (item: HTMLElement) => {
+            const textInitial = item.querySelector('.initial');
+            const textHover = item.querySelector('.hover');
+            gsap.to(textInitial, {
+                yPercent: 0,
+                perspective: 1000,
+                rotationX: 0,
+                duration: 1,
+                ease: 'power4.out',
+            });
+            gsap.to(textHover, {
+                yPercent: 100,
+                perspective: 1000,
+                rotationX: -90,
+                duration: 1,
+                ease: 'power4.out',
+            });
+        };
+
+        const addEventListeners = (item: HTMLElement | null) => {
+            if (!item) return;
+            const textHover = item.querySelector('.hover');
+            gsap.set(textHover, { yPercent: 100, perspective: 1000, rotationX: -90 });
+
+            const enterHandler = () => handleMouseEnter(item);
+            const leaveHandler = () => handleMouseLeave(item);
+
+            item.addEventListener('mouseenter', enterHandler);
+            item.addEventListener('mouseleave', leaveHandler);
+
+            // Store handlers to remove them later
+            (item as any).__enterHandler = enterHandler;
+            (item as any).__leaveHandler = leaveHandler;
+        };
+
+        const removeEventListeners = (item: HTMLElement | null) => {
+            if (!item) return;
+            item.removeEventListener('mouseenter', (item as any).__enterHandler);
+            item.removeEventListener('mouseleave', (item as any).__leaveHandler);
+        };
+
+        listItemsRef.current.forEach(addEventListeners);
+        spanItemsRef.current.forEach(addEventListeners);
+
+        return () => {
+            listItemsRef.current.forEach(removeEventListeners);
+            spanItemsRef.current.forEach(removeEventListeners);
+        };
+    }, []);
+
+    return (
+        <footer className="flex relative flex-col container py-12 h-screen justify-evenly">
+            <div className='flex flex-col'>
+                <ul className="flex flex-col gap-5 uppercase w-24">
+                    {['About', 'Services', 'Works', 'Contact'].map((text, index) => (
+                        <li
+                            key={index}
+                            ref={(el) => { listItemsRef.current[index] = el; }}
+                            className="relative overflow-hidden h-5 cursor-pointer"
+                        >
+                            <span className="block initial absolute top-0 left-0 w-full h-full">{text}</span>
+                            <span className="block hover absolute top-0 left-0 w-full h-full">{text}</span>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+            <div className='relative overflow-hidden group/line py-12 mx-auto w-fit cursor-pointer'>
+                <h1 className='w-full text-[12vw] uppercase leading-none'>Let&apos;s Talk</h1>
+                <span className='block w-full bg-white h-3 -translate-x-full group-hover/line:translate-x-0 duration-500 opacity-0 group-hover/line:opacity-100' />
+            </div>
+            <div className='w-full flex flex-col md:flex-row gap-10 justify-between'>
+                <div className='flex gap-10 uppercase'>
+                    <div className=' relative overflow-hidden group/line cursor-pointer'>
+                        <h1 className='leading-none pb-2'>mail</h1>
+                        <span className='block bg-white h-[2px] -translate-x-full group-hover/line:translate-x-0 group-hover/line:opacity-100 opacity-0 duration-500' />
+                    </div>
+                    <div className=' relative overflow-hidden group/line cursor-pointer'>
+                        <h1 className='leading-none pb-2'>github</h1>
+                        <span className='block bg-white h-[2px] -translate-x-full group-hover/line:translate-x-0 group-hover/line:opacity-100 opacity-0 duration-500' />
+                    </div>
+                    <div className=' relative overflow-hidden group/line cursor-pointer'>
+                        <h1 className='leading-none pb-2'>behance</h1>
+                        <span className='block bg-white h-[2px] -translate-x-full group-hover/line:translate-x-0 group-hover/line:opacity-100 opacity-0 duration-500' />
+                    </div>
+                    <div className=' relative overflow-hidden group/line cursor-pointer'>
+                        <h1 className='leading-none pb-2'>dribble</h1>
+                        <span className='block bg-white h-[2px] -translate-x-full group-hover/line:translate-x-0 group-hover/line:opacity-100 opacity-0 duration-500' />
+                    </div>
+                    <div className=' relative overflow-hidden group/line cursor-pointer'>
+                        <h1 className='leading-none pb-2'>linkedin</h1>
+                        <span className='block bg-white h-[2px] -translate-x-full group-hover/line:translate-x-0 group-hover/line:opacity-100 opacity-0 duration-500' />
+                    </div>
+                </div>
+                <div className='flex gap-10 uppercase'>
+                    <span>2024 © CharltonK.dev</span>
+                </div>
+            </div>
+        </footer>
+    );
+}
+
+export default Footer;

src/components/Header.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+const Header = () => {
+  return (
+    <header className='w-full flex items-center relative justify-between'>
+        <div className='flex'>
+            <span className='text-2xl font-bold'>DNA</span>
+        </div>
+        <div className='flex items-center gap-10'>
+            <ul className='flex gap-10 text-gray-400'>
+                <li>Home</li>
+                <li>Service</li>
+                <li>Project</li>
+                <li>Contact</li>
+            </ul>
+            <span className='text-xl font-semibold'>Let&apos;s Talk</span>
+        </div>
+        
+    </header>
+  )
+}
+
+export default Header

src/components/Hero.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Spotlight } from "./ui/Spotlight";
+import HeroContent from "./ui/HeroContent";
+import LostOrb from "./ui/LostOrb";
+
+export default function Hero() {
+    return (
+        <div className="flex flex-col h-screen w-full relative items-center justify-center bg-black bg-grid-white/[0.1]">
+            <div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-black [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+            <Spotlight
+                className="-top-40 left-0 md:left-60 md:-top-20"
+                fill="orange"
+            />
+            <Spotlight
+                className="-top-40 left-20 md:left-80 md:-top-20"
+                fill="blue"
+            />
+            
+            <HeroContent />
+            <div className="w-full h-full absolute bottom-0">
+                <LostOrb />
+            </div>
+        </div>
+    );
+}

src/components/LostOrb/index.jsx

@@ -0,0 +1,11 @@
+import Spline from '@splinetool/react-spline/next';
+
+export default function Home() {
+  return (
+    <main>
+      <Spline
+        scene="https://prod.spline.design/kVbOOfwISRC36KJd/scene.splinecode" 
+      />
+    </main>
+  );
+}