Revamped Version Of The Site

README.md

@@ -6,10 +6,14 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 In the project directory, you can run:
 
+### `npm i`
+
+This will install all the necessary dependencies needed for the project to run.
+
 ### `npm start`
 
 Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser..
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
@@ -44,3 +48,4 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 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/).
+

package.json

@@ -10,11 +10,14 @@
     "@types/node": "^16.18.41",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.2.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "sass": "^1.66.1",
+    "tailwind-merge": "^2.3.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -41,5 +44,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/index.html

@@ -6,7 +6,7 @@
     <meta property="og:title" content="Encifher" />
     <meta property="og:image" content="https://www.encifher.io/logo.png" />
     <meta property="og:description" content="Encifher" />
-    <!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v=2" /> -->
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico?v=2" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/encifher-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

src/App.tsx

@@ -1,13 +1,12 @@
-import './App.css';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import HolderPage from './components/HolderPage/HolderPage';
-
+import { MainPage } from './components/Backgorund and content/MainPage';
+import "./index.css";
 function App() {
   return (
     <div>
       <Router>
         <Routes>
-          <Route path="/" element={<HolderPage />} />
+          <Route path="/" element={<MainPage />} />
         </Routes>
       </Router>
     </div>

src/components/Backgorund and content/BackgroundAndContent.tsx

@@ -0,0 +1,150 @@
+import { useMotionValue } from "framer-motion";
+import React, { useState, useEffect } from "react";
+import { useMotionTemplate, motion } from "framer-motion";
+import { cn } from "../../utils/cn";
+
+export const BackgroundAndContent = ({ className }: { className?: string }) => {
+  let mouseX = useMotionValue(0);
+  let mouseY = useMotionValue(0);
+
+  const [randomString, setRandomString] = useState("");
+
+  useEffect(() => {
+    let str = generateRandomString(10000);
+    setRandomString(str);
+  }, []);
+
+  function onMouseMove(
+    e:
+      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.TouchEvent<HTMLDivElement>
+  ) {
+    let x = 0;
+    let y = 0;
+
+    if (e.type.includes("touch")) {
+      const touchEvent = e as React.TouchEvent<HTMLDivElement>;
+      const { touches, changedTouches } = touchEvent.nativeEvent ?? touchEvent;
+      const touch = touches[0] ?? changedTouches[0];
+      x = touch.pageX;
+      y = touch.pageY;
+    } else if (e.type.includes("mouse")) {
+      const mouseEvent = e as React.MouseEvent<HTMLDivElement, MouseEvent>;
+      x = mouseEvent.clientX;
+      y = mouseEvent.clientY;
+    }
+
+    const { left, top } = e.currentTarget.getBoundingClientRect();
+    mouseX.set(x - left);
+    mouseY.set(y - top);
+
+    const str = generateRandomString(1500);
+    setRandomString(str.repeat(10));
+  }
+
+  return (
+    <div
+      className={cn(
+        "bg-transparent aspect-square  flex items-center justify-center w-full h-full relative",
+        className
+      )}
+    >
+      <div
+        onMouseMove={onMouseMove}
+        onTouchMove={onMouseMove}
+        className="pt-[20vh] group/card  w-full relative overflow-hidden bg-transparent flex items-start justify-center h-full"
+      >
+        <CardPattern
+          mouseX={mouseX}
+          mouseY={mouseY}
+          randomString={randomString}
+        />
+        <div className="relative z-10 flex-wrap items-center justify-center">
+          <div className="relative m-auto h-44 w-60 md:w-80 flex items-center justify-center">
+            <div className="absolute max-sm:w-[80vw] sm:w-[80vw] md:w-[50vw] xl:w-[30vw] h-full bg-white/[0.8] dark:bg-black/[0.8] blur-sm rounded-full" />
+            <span className="dark:text-white z-20">
+              <img
+                src="/assets/images/Logos/logo-white.png"
+                alt="Encipher-logo"
+              />
+            </span>
+          </div>
+          <div className="relative h-44 w-auto flex items-center justify-center mt-5 m-auto">
+            <span className="font-bold text-white z-20 font-Lexend text-3xl md:text-4xl">
+              ENCRYPTING SOON...
+            </span>
+          </div>
+          <div className="relative h-12 w-12 m-auto mt-[23vh] md:max-lg:mt-[35vh] rounded-full flex items-center justify-center text-white font-bold text-4xl">
+            <div className="absolute w-full h-full bg-white/[0.8] dark:bg-black/[0.8] blur-sm rounded-full" />
+            <span className="z-20">
+              <a
+                href="https://twitter.com/encifherio"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <img
+                  src="/assets/images/Logos/twitter-white.png"
+                  alt="X"
+                  className="holder-page-footer-x-icon w-6"
+                />
+              </a>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export function CardPattern({ mouseX, mouseY, randomString }: any) {
+  const smallerScreen = window.innerWidth <= 768;
+  let maskImage = smallerScreen
+    ? useMotionTemplate`radial-gradient(550px at ${mouseX}px ${mouseY}px, white, transparent)`
+    : useMotionTemplate`radial-gradient(700px at ${mouseX}px ${mouseY}px, white, transparent)`;
+
+  let style = { maskImage, WebkitMaskImage: maskImage };
+
+  return (
+    <div className="pointer-events-none">
+      <div className="absolute inset-0 rounded-5xl  [mask-image:linear-gradient(white,transparent)] group-hover/card:opacity-50"></div>
+      <motion.div
+        className="absolute inset-0 rounded-10xl bg-gradient-to-r from-purple-500 via-indigo-600 to-cyan-400 opacity-0  group-hover/card:opacity-100 backdrop-blur-xl transition duration-500"
+        style={style}
+      />
+      <motion.div
+        className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay  group-hover/card:opacity-100"
+        style={style}
+      >
+        <p className="absolute inset-x-0 text-xs h-full break-words whitespace-pre-wrap text-white font-mono font-bold transition duration-600">
+          {randomString}
+        </p>
+      </motion.div>
+    </div>
+  );
+}
+
+const characters =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+export const generateRandomString = (length: number) => {
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+};
+
+export const Icon = ({ className, ...rest }: any) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className={className}
+      {...rest}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
+    </svg>
+  );
+};

src/components/Backgorund and content/MainPage.tsx

@@ -0,0 +1,12 @@
+import { BackgroundAndContent } from "./BackgroundAndContent";
+
+export function MainPage() {
+  return (
+    <div className="bg-black flex flex-col items-start relative h-[100vh] xl:h-[96.8vh] m-0">
+      <BackgroundAndContent />
+      <div className="p-[0.05vh] m-0 bg-black w-[100vw] text-center text-white font-Lexend ">
+        © 2023 Rize Labs, HQ Singapore
+      </div>
+    </div>
+  );
+}

src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

tailwind.config.js

@@ -0,0 +1,45 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        Lexend: ["Lexend", "sans-serif"],
+      },
+      colors: {
+        Main_Colour: "#5024FF",
+      },
+      textShadow: {
+        default: "2px 2px 4px rgba(0, 0, 0, 0.1)",
+        md: "3px 3px 6px rgba(0, 0, 0, 0.15)",
+        lg: "0px 0px 10px white",
+        xl: "5px 5px 10px rgba(0, 0, 0, 0.25)",
+        none: "none",
+      },
+    },
+  },
+  plugins: [
+    function ({ addUtilities }) {
+      addUtilities(
+        {
+          ".text-shadow": {
+            textShadow: "2px 2px 4px rgba(0, 0, 0, 0.1)",
+          },
+          ".text-shadow-md": {
+            textShadow: "3px 3px 6px rgba(0, 0, 0, 0.15)",
+          },
+          ".text-shadow-lg": {
+            textShadow: "0px 0px 5px white",
+          },
+          ".text-shadow-xl": {
+            textShadow: "5px 5px 10px rgba(0, 0, 0, 0.25)",
+          },
+          ".text-shadow-none": {
+            textShadow: "none",
+          },
+        },
+        ["responsive", "hover"]
+      );
+    },
+  ],
+};