fda

neerajrekwar · Aug 10, 2024 · cf7d382 · cf7d382
1 parent 376e4dd
commit cf7d382
Show file tree

Hide file tree

Showing 9 changed files with 1,524 additions and 178 deletions.
diff --git a/app/about/page.tsx b/app/about/page.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function About() {
   return (
-    <main className="bg-transparent">
+    <main className="bgrid2">
       <HeroSection />
     </main>
   );

diff --git a/app/components/.MultiStepLoader.tsx.2851026260~ b/app/components/.MultiStepLoader.tsx.2851026260~
@@ -0,0 +1,62 @@
+"use client";
+import React, { useState } from "react";
+import { MultiStepLoader as Loader } from "./ui/multi-step-loader";
+import { IconSquareRoundedX } from "@tabler/icons-react";
+
+const loadingStates = [
+  {
+    text: "Buying a condo",
+  },
+  {
+    text: "Travelling in a flight",
+  },
+  {
+    text: "Meeting Tyler Durden",
+  },
+  {
+    text: "He makes soap",
+  },
+  {
+    text: "We goto a bar",
+  },
+  {
+    text: "Start a fight",
+  },
+  {
+    text: "We like it",
+  },
+  {
+    text: "Welcome to F**** C***",
+  },
+];
+
+export function MultiStepLoader() {
+  const [loading, setLoading] = useState(false);
+  return (
+    <div className="w-full h-40 flex items-center justify-center">
+      {/* Core Loader Modal */}
+      <Loader loadingStates={loadingStates} loading={loading} duration={2000} />
+
+      {/* The buttons are for demo only, remove it in your actual code ⬇️ */}
+      <button
+        onClick={() => setLoading(true)}
+        className="bg-six hover:bg-seven text-four mx-auto text-sm md:text-base transition font-medium duration-200 h-10 rounded-lg px-8 flex items-center justify-center"
+        style={{
+          boxShadow:
+            "0px -1px 0px 0px #ffffff40 inset, 0px 1px 0px 0px #ffffff40 inset",
+        }}
+      >
+        Click to load
+      </button>
+
+      {loading && (
+        <button
+          className="fixed top-4 right-4 text-black dark:text-white z-[120]"
+          onClick={() => setLoading(false)}
+        >
+          <IconSquareRoundedX className="h-10 w-10" />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/MultiStepLoader.tsx b/app/components/MultiStepLoader.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import { MultiStepLoader as Loader } from "./ui/multi-step-loader";
-import { IconSquareRoundedX } from "@tabler/icons-react";
+import { IconX } from "@tabler/icons-react";
 
 const loadingStates = [
   {
@@ -33,14 +33,14 @@ const loadingStates = [
 export function MultiStepLoader() {
   const [loading, setLoading] = useState(false);
   return (
-    <div className="w-full h-40 flex items-center justify-center">
+    <div className="w-full h-40 text-white flex items-center justify-center">
       {/* Core Loader Modal */}
       <Loader loadingStates={loadingStates} loading={loading} duration={2000} />
 
       {/* The buttons are for demo only, remove it in your actual code ⬇️ */}
       <button
         onClick={() => setLoading(true)}
-        className="bg-six hover:bg-seven text-four mx-auto text-sm md:text-base transition font-medium duration-200 h-10 rounded-lg px-8 flex items-center justify-center"
+        className="bg-custom-radial-s hover:bg-seven mx-auto text-sm md:text-base transition font-medium duration-200 h-10 rounded-lg px-8 flex items-center justify-center bg-clip-text text-transparent bg-gradient-to-br  from-pink-200 from-10% via-purple-300 from-10% to-blue-500 from-10%"
         style={{
           boxShadow:
             "0px -1px 0px 0px #ffffff40 inset, 0px 1px 0px 0px #ffffff40 inset",
@@ -51,10 +51,10 @@ export function MultiStepLoader() {
 
       {loading && (
         <button
-          className="fixed top-4 right-4 text-black dark:text-white z-[120]"
+          className="fixed rounded-md top-4 right-4 text-five z-[120]"
           onClick={() => setLoading(false)}
         >
-          <IconSquareRoundedX className="h-10 w-10" />
+          <IconX className="h-6 w-6 sm:h-10 md:w-10" />
         </button>
       )}
     </div>

diff --git a/app/components/ShootingVsStarts.tsx b/app/components/ShootingVsStarts.tsx
@@ -97,7 +97,7 @@ export function ShootingStarsAndStarsBackgroundDemo() {
               </motion.button>
             </div>
             <div className="text-base md:text-xl m-2 mx-8 ">
-              <div className="flex text-four py-6">
+              <div className="flex text-four py-6 ">
                 <motion.span
                   initial={{ scale: 0.2, x: -200, y: -200  }}
                   animate={{ rotate: 360, scale: 1, x: 0, y: 0 }}
@@ -108,7 +108,7 @@ export function ShootingStarsAndStarsBackgroundDemo() {
                     delay: 2,
                     duration: 5,
                   }}
-                  className="p-2 m-1 bg-seven  rounded-full flex justify-center items-center"
+                  className=" p-2 m-1 bg-seven  rounded-full flex justify-center items-center"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -120,7 +120,7 @@ export function ShootingStarsAndStarsBackgroundDemo() {
                     strokeWidth={2}
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    className="hover:text-[#e7700d] active:text-[#e7700d ] transition-all duration-[1s] icon icon-tabler icons-tabler-outline icon-tabler-brand-stackoverflow"
+                    className=" hover:text-[#e7700d] active:text-[#e7700d ] transition-all duration-[1s] icon icon-tabler icons-tabler-outline icon-tabler-brand-stackoverflow"
                   >
                     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                     <path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />