create project revamp, sidebar change, color-scheme change

plan-ai · Aug 30, 2023 · eb592de · eb592de
1 parent 8f0b3f0
commit eb592de
Show file tree

Hide file tree

Showing 42 changed files with 7,676 additions and 5,476 deletions.
diff --git a/src/assets/css/globals.css b/src/assets/css/globals.css
@@ -12,11 +12,11 @@
     color: white;
   }
   html {
-    @apply bg-body text-white;
+    @apply bg-newdark text-white;
     -webkit-tap-highlight-color: transparent;
   }
   html.dark {
-    @apply bg-dark text-white;
+    @apply bg-newdark text-white;
   }
   html,
   body {
@@ -61,10 +61,47 @@ input::-webkit-inner-spin-button {
   margin: 0;
 }
 
+.textShadow{
+  text-shadow: 0px 0px 15px #92ABFB;
+}
+
+.textShadowWhite{
+  text-shadow: 0px 0px 15px #FFFFFF;
+}
+
+.textShadowGreen{
+  text-shadow: 0px 0px 15px #90FAC7;
+}
+
 .landing-font{
   font-family: 'Inter',sans-serif;
 }
 
+.progressGradient{
+  background: linear-gradient(90deg, theme('colors.primary') 0%, theme('colors.primary') 80% , rgba(146, 171, 251,0) 100% );
+
+}
+
+.lineGradient{
+  background: linear-gradient(180deg, rgba(146, 171, 251, 0.00) 0%, #92ABFB 32.83%, rgba(146, 171, 251, 0.941) 81.68%, rgba(146, 171, 251, 0.00) 100%);
+}
+
+.lineGradientHorizontal{
+  background: linear-gradient(90deg, rgba(146, 171, 251, 0.00) 0%, #92ABFB 32.83%, rgba(146, 171, 251, 0.941) 81.68%, rgba(146, 171, 251, 0.00) 100%);
+}
+
+.lineGradientHorizontalGray{
+  background: linear-gradient(90deg, rgba(146, 171, 251, 0.00) 0%, #595959 32.83%, #595959f0 81.68%, rgba(146, 171, 251, 0.00) 100%);
+}
+
+.gradient-border-box-bottom {
+  border-bottom: double transparent;
+  background-image: linear-gradient(theme('colors.light-gray'), theme('colors.light-gray')),
+    linear-gradient(to right, #90aafa, #2a4b6b, #90aafa);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+}
+
 .conic-gradient-1{
   background: conic-gradient(from -13deg at 50.00% 50.00%, #1D606A 52.535998821258545deg, #90AAFA 133.08900117874146deg, #90AAFA 172.46400117874146deg, #FFF 249.44698333740234deg, #1D606A 298.1610059738159deg, #90AAFA 322.4999928474426deg, #90AAFA 322.53599882125854deg, #1D606A 360deg);
 }
@@ -82,14 +119,22 @@ input::-webkit-inner-spin-button {
 
 .gradient-border:focus {
   border: double transparent;
-  background-image: linear-gradient(theme('colors.body'), theme('colors.body')),
+  background-image: linear-gradient(theme('colors.light-gray'), theme('colors.light-gray')),
     linear-gradient(to right, #90aafa, #2a4b6b, #90aafa);
   background-origin: border-box;
   background-clip: padding-box, border-box;
 }
 
+.gradient-border-dark:focus {
+  border: double transparent !important;
+  background-image: linear-gradient(theme('colors.newdark'), theme('colors.newdark')),
+    linear-gradient(to right, #90aafa, #2a4b6b, #90aafa) !important;
+  background-origin: border-box !important;
+  background-clip: padding-box, border-box !important;
+}
+
 .gradient-border-box {
-  border: double transparent;
+  border: 2px double transparent;
   background-image: linear-gradient(theme('colors.body'), theme('colors.body')),
     linear-gradient(to right, #90aafa, #2a4b6b, #90aafa);
   background-origin: border-box;

diff --git a/src/components/create/Create.tsx b/src/components/create/Create.tsx
@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+
+import Step1 from '@/components/create/Step1';
+import Step2 from '@/components/create/Step2';
+import Step3 from '@/components/create/Step3';
+import Step4 from '@/components/create/Step4';
+import Step5 from '@/components/create/Step5';
+
+interface CreateProps {}
+
+export const Create: React.FC<CreateProps> = ({}) => {
+  const [step, setStep] = useState(1);
+
+  return (
+    <div className="landing-font flex flex-col items-center gap-6 xl:gap-8 3xl:gap-10">
+      {step === 1 && (
+        <div className="z-[40] flex items-center rounded-full bg-newdark py-2 px-4 text-base font-bold xl:text-lg 3xl:text-xl">
+          <div className="text-primary">Step 1.</div>
+          <div>initial setup</div>
+        </div>
+      )}
+      {step === 2 && (
+        <div className="z-[40] flex items-center rounded-full bg-newdark py-2 px-4 text-base font-bold xl:text-lg 3xl:text-xl">
+          <div className="text-primary">Step 2.</div>
+          <div>funding an issue</div>
+        </div>
+      )}
+      {step === 3 && (
+        <div className="z-[40] flex items-center rounded-full bg-newdark py-2 px-4 text-base font-bold xl:text-lg 3xl:text-xl">
+          <div className="text-primary">Step 3.</div>
+          <div>preview</div>
+        </div>
+      )}
+      {step === 4 && (
+        <div className="z-[40] flex items-center rounded-full bg-newdark py-2 px-4 text-base font-bold xl:text-lg 3xl:text-xl">
+          <div className="text-primary">creating your project</div>
+        </div>
+      )}
+      {step === 5 && (
+        <div className="z-[40] flex items-center rounded-full bg-newdark py-2 px-4 text-base font-bold xl:text-lg 3xl:text-xl">
+          <div className="text-primary">project created!</div>
+        </div>
+      )}
+      <div className="relative flex h-[38rem] w-[34rem] items-center justify-center xl:h-[44rem] xl:w-[40rem]  2xl:h-[46rem] 2xl:w-[42rem]">
+        <div className="absolute z-[20] h-full w-full">
+          <div className="absolute -left-[2.5%] bottom-0 h-[60%] w-[102.5%] rounded-full border-2 bg-white blur-[100px]" />
+          <div
+            className="absolute left-[20%] bottom-[12%] h-[50%] w-full -rotate-[48.87deg] rounded-full border-2 bg-cyan-800 blur-[50px]
+           "
+          />
+          <div className="absolute -left-[2.5%] -top-[1%] h-[75%] w-[105%] rounded-full border-2 bg-indigo-300 blur-[100px]" />
+        </div>
+        {step === 1 && <Step1 setStep={setStep} />}
+        {step === 2 && <Step2 setStep={setStep} />}
+        {step === 3 && <Step3 setStep={setStep} />}
+        {step === 4 && <Step4 setStep={setStep} />}
+        {step === 5 && <Step5 setStep={setStep} />}
+      </div>
+    </div>
+  );
+};
+
+export default Create;