kollors

components/ImageSlide.tsx

@@ -1,41 +1,41 @@
-import React, {Children, useState} from "react";
+import React, { useState } from "react";
-import {AiFillLeftCircle} from 'react-icons/ai';
+import { AiFillLeftCircle } from "react-icons/ai";
 
+export const ImageSlide = ({ children }: any) => {
+  const [current, setCurrent] = useState(0);
+  const length = children.length;
 
-export const ImageSlide = ({children}:any) => {
+  const nextSlide = () => {
-    const [current, setCurrent] = useState(0);
+    setCurrent(current === length - 1 ? 0 : current + 2);
-    const length = children.length;
+  };
-    
-    const array = Children.toArray(children);
-    console.log(array)
-    
-    const nextSlide = () => {
-        setCurrent(current === length - 1 ? 0 : current + 2);
-    };
 
-    const prevSlide = () => {
+  const prevSlide = () => {
-        setCurrent(current === 0 ? length - 1 : current - 2);
+    setCurrent(current === 0 ? length - 1 : current - 2);
-    };
+  };
-    if(children.length <= 0){
+  if (children.length <= 0) {
-        return null;
+    return null;
-    };
+  }
 
-    return(
+  return (
-      <section className='slider'>
+    <section className="slider">
-        <AiFillLeftCircle className='left-arrow' onClick={prevSlide} />
+      <AiFillLeftCircle className="left-arrow" onClick={prevSlide} />
-        <AiFillLeftCircle className='right-arrow' onClick={nextSlide} />
+      <AiFillLeftCircle className="right-arrow" onClick={nextSlide} />
-        {children.map((slide : any, index : any) => {
+      {children.map((slide: any, index: any) => {
-          return (
+        return (
-            <div
+          <div
-              className={index === current ? 'slide active' : 'slide'}
+            className={index === current ? "slide active" : "slide"}
-              key={index}
+            key={index}
-            >
+          >
-              {index === current && (
+            {index === current && (
-                <img src={slide.props.children[0]} alt='travel image' className='image' />
+              <img
-              )}
+                src={slide.props.children[0]}
-            </div>
+                alt="travel image"
-          );
+                className="image"
-        })}
+              />
-      </section>
+            )}
-    );
+          </div>
-};
+        );
+      })}
+    </section>
+  );
+};

components/Navbar.tsx

@@ -13,7 +13,7 @@ export const Navbar = () => {
   const [showMenu, setShowMenu] = useState(false);
 
   return (
-    <nav className="py-4 xl:px-10 px-4 flex flex-row justify-between sticky top-0 bg-slate-100 dark:bg-gradient-dark z-50 border-b dark:border-gradient-light border-gray-200">
+    <nav className="py-4 xl:px-10 px-4 flex flex-row justify-between sticky top-0 z-50 bg-gradient-to-b from-black/50 to-black/30">
       <Link
         href="/"
         id="logo"
@@ -28,7 +28,7 @@ export const Navbar = () => {
       <div className="hidden xl:flex flex-row gap-10 items-center font-medium font-mono">
         {links.map(({ name, href }) => (
           <Link href={href} key={name}>
-            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out text-white">
+            <button className="px-10 py-1 rounded-sm bg-gradient-to-r from-indigo-500/30 to-fuchsia-500/20 hover:bg-primary/50 transition-all duration-150 ease-out text-white">
               {name}
             </button>
           </Link>

components/R3Background.tsx

@@ -1,8 +1,8 @@
-import { useRef, useMemo } from 'react'
+import { useRef, useMemo } from "react";
-import { Canvas, useFrame } from '@react-three/fiber'
+import { Canvas, useFrame } from "@react-three/fiber";
 import { BufferGeometry, Material, MathUtils, Mesh } from "three";
-import { vertexShader } from './Shaders/Background/vertex';
+import { vertexShader } from "./Shaders/Background/vertex";
-import { fragmentShader } from './Shaders/Background/fragment';
+import { fragmentShader } from "./Shaders/Background/fragment";
 
 const Fragment = () => {
   // This reference will give us direct access to the mesh
@@ -21,12 +21,13 @@ const Fragment = () => {
   );
 
   useFrame((state) => {
-    if(!meshRef.current){
+    if (!meshRef.current) {
-        return;
+      return;
     }
     const { clock } = state;
     //@ts-ignore
-    meshRef.current.material.uniforms.u_time.value = 0.4 * clock.getElapsedTime()/5;
+    meshRef.current.material.uniforms.u_time.value =
+      (0.4 * clock.getElapsedTime()) / 5;
     //@ts-ignore
     meshRef.current.material.uniforms.u_intensity.value = MathUtils.lerp(
       //@ts-ignore
@@ -37,7 +38,12 @@ const Fragment = () => {
   });
 
   return (
-    <mesh ref={meshRef} position={[0, 0, 0]} rotation={[-Math.PI/17, Math.PI/20, 0]} scale={1.5}>
+    <mesh
+      ref={meshRef}
+      position={[0, 0, 0]}
+      rotation={[-Math.PI / 17, Math.PI / 20, 0]}
+      scale={1.5}
+    >
       <planeGeometry args={[30, 30, 200, 200]} />
       <shaderMaterial
         fragmentShader={fragmentShader}
@@ -49,13 +55,12 @@ const Fragment = () => {
   );
 };
 
-
 export const R3Gradient = () => {
-    return (
+  return (
-    <div className='-z-40 h-screen w-screen fixed bg-black opacity-60'>
+    <div className="-z-40 h-screen w-screen fixed bg-black opacity-60 top-0 left-0">
       <Canvas camera={{ position: [0.0, 0.0, 5.0] }}>
         <Fragment />
       </Canvas>
     </div>
-    );
+  );
 };

pages/index.tsx

@@ -3,7 +3,7 @@ export default function Home() {
   return (
     <MainLayout>
       <div className="grid lg:grid-cols-2 grid-cols-1 xl:mt-10 gap-10 items-center">
-        <div className="bg-primary-dark p-10 rounded-lg flex flex-col gap-10 h-fit 3xl:w-2/3 w-full text-lg text-primary-text/90 shadow-lg shadow-gradient-dark/20">
+        <div className="bg-primary-dark/30 border-white/30 border p-10 rounded-lg flex flex-col gap-10 h-fit 3xl:w-2/3 w-full text-lg text-primary-text/90 shadow-lg shadow-gradient-dark/20">
           <div>
             <span className="font-bold text-xl text-primary-text">
               Lorem ipsum dolor{" "}