rainbow border added

Author: Gerome-Elassaad

README.md

@@ -1,22 +1,9 @@
 ![opengraph](https://github.com/user-attachments/assets/de684e88-a65c-42ea-b067-d1a3bc85a420)
 
 
-## Powered by the [E2B SDK](https://github.com/e2b-dev/code-interpreter).
-<p align="center">
-  <a href="https://github.com/e2b-dev/code-interpreter">
-    <strong><h2>Powered by the E2B SDK</h2></strong>
-  </a>
-</p>
-
-<p align="center">
-  <a href="https://e2b.dev/startups">
-    <img src="https://img.shields.io/badge/SPONSORED%20BY-E2B%20FOR%20STARTUPS-ff8800?style=for-the-badge" alt="SPONSORED BY E2B FOR STARTUPS" />
-  </a>
-</p>
-
 <p align="center">
   <a href="https://e2b.dev/research">
-    <img src="https://img.shields.io/badge/SPONSORED%20BY-E2B%20FOR%20STARTUPS-ff8800?style=for-the-badge" alt="SPONSORED BY E2B FOR RESEARCH" />
+    <img src="https://img.shields.io/badge/SPONSORED%20BY-E2B%20FOR%20STARTUPS-32CD32?style=for-the-badge" alt="SPONSORED BY E2B FOR RESEARCH" />
   </a>
 </p>
 
@@ -262,4 +249,4 @@ npm run build
 
 ## Contributing
 
-As an open-source project, we welcome contributions from the community. If you are experiencing any bugs or want to add some improvements, please feel free to open an issue or pull request.
+As an open-source project, we welcome contributions from the community. If you are experiencing any bugs or want to add some improvements, please feel free to open an issue or pull request.

components/enhanced-chat-input.tsx

@@ -11,6 +11,7 @@ import { ArrowUp, Paperclip, Square, X, AlertTriangle, RefreshCw, Github } from
 import { type SetStateAction, useEffect, useMemo, useState, useCallback } from "react"
 import TextareaAutosize from "react-textarea-autosize"
 import { GitHubImportModal } from "./modals/github-import-modal"
+import "./rainbow-animations.css"
 
 interface ProjectAnalysis {
   structure: {
@@ -281,7 +282,7 @@ export function EnhancedChatInput({
       <div className="relative">
         <RepoBanner className="absolute bottom-full inset-x-2 translate-y-1 z-0 pb-2" />
         <div
-          className={`rainbow-chat-input shadow-md rounded-2xl relative z-10 bg-background border focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 focus-within:ring-offset-background transition-shadow duration-200 ${
+          className={`rainbow-chat-input rainbow-border shadow-md rounded-2xl relative z-10 bg-background focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 focus-within:ring-offset-background transition-shadow duration-200 ${
             dragActive
               ? "before:absolute before:inset-0 before:rounded-2xl before:border-2 before:border-dashed before:border-primary"
               : ""
@@ -389,4 +390,4 @@ export function EnhancedChatInput({
       </p>
     </form>
   )
-}
+}

components/navbar.tsx

@@ -175,11 +175,14 @@ export function NavBar({
                   <span>Profile</span>
                 </Link>
                 </DropdownMenuItem>
-
+                
+              <Link href="/settings">
               <DropdownMenuItem className="cursor-pointer">
                 <Settings className="mr-2 h-4 w-4" />
                 <span>Settings</span>
               </DropdownMenuItem>
+              </Link>
+
 
               <DropdownMenuSeparator />
 
@@ -193,10 +196,13 @@ export function NavBar({
                 About CodinIT
               </DropdownMenuItem>
 
+              <Link href="https://github.com/Gerome-Elassaad/CodingIT">
               <DropdownMenuItem onClick={() => onSocialClick("github")} className="cursor-pointer">
                 <GitHubLogoIcon className="mr-2 h-4 w-4 text-muted-foreground" />
                 Star on GitHub
               </DropdownMenuItem>
+              </Link>
+
 
               <DropdownMenuItem onClick={() => onSocialClick("discord")} className="cursor-pointer">
                 <DiscordLogoIcon className="mr-2 h-4 w-4 text-muted-foreground" />

components/rainbow-animations.css

@@ -1,168 +1,3 @@
-/* Rainbow Chat Container */
-.rainbow-chat-container {
-  position: relative;
-  padding: 2px;
-  border-radius: 12px;
-  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
-  background-size: 400% 400%;
-  animation: rainbow-border 4s ease-in-out infinite;
-}
-
-.rainbow-chat-inner {
-  background: white;
-  border-radius: 10px;
-  overflow: hidden;
-}
-
-.dark .rainbow-chat-inner {
-  background: rgb(23, 23, 23);
-}
-
-/* Rainbow Chat Input Hover Effect */
-.rainbow-chat-input {
-  position: relative;
-  transition: all 0.3s ease;
-}
-
-.rainbow-chat-input:hover::before {
-  content: "";
-  position: absolute;
-  inset: -2px;
-  border-radius: 18px;
-  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
-  background-size: 400% 400%;
-  animation: rainbow-border 2s ease-in-out infinite;
-  z-index: -1;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.rainbow-chat-input:hover::before {
-  opacity: 0.8;
-}
-
-.rainbow-chat-input:hover::after {
-  content: "";
-  position: absolute;
-  inset: -6px;
-  border-radius: 22px;
-  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
-  background-size: 400% 400%;
-  animation: rainbow-border 2s ease-in-out infinite;
-  z-index: -2;
-  opacity: 0;
-  filter: blur(8px);
-  transition: opacity 0.3s ease;
-}
-
-.rainbow-chat-input:hover::after {
-  opacity: 0.4;
-}
-
-/* Enhanced glow effect for focus */
-.rainbow-chat-input:focus-within::before {
-  opacity: 1;
-  animation: rainbow-border 1.5s ease-in-out infinite;
-}
-
-.rainbow-chat-input:focus-within::after {
-  opacity: 0.6;
-  animation: rainbow-border 1.5s ease-in-out infinite;
-}
-
-/* Rainbow Button Border Only */
-.rainbow-button-border {
-  position: relative;
-  border: 2px solid transparent;
-  border-radius: 0.5rem;
-  animation: rainbow-border 3s linear infinite;
-  overflow: hidden;
-}
-
-.rainbow-button-content {
-  border-radius: 0.375rem;
-  background: var(--background);
-  color: var(--foreground);
-  border: none !important;
-  color: #374151;
-  transition: all 0.3s ease;
-}
-
-.dark .rainbow-button-content {
-  background: rgb(23, 23, 23);
-  color: white;
-}
-
-.rainbow-button-content:hover {
-  background: rgba(0, 0, 0, 0.05) !important;
-  color: #374151 !important;
-}
-
-.dark .rainbow-button-content:hover {
-  background: rgba(255, 255, 255, 0.1) !important;
-  color: white !important;
-}
-
-/* Submit Button Rainbow Border */
-.rainbow-submit-border {
-  position: relative;
-  padding: 2px;
-  border-radius: 8px;
-  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
-  background-size: 400% 400%;
-  animation: rainbow-border 3s ease-in-out infinite;
-}
-
-.rainbow-submit-content {
-  background: #374151;
-  border-radius: 6px;
-  border: none !important;
-  color: white;
-  transition: all 0.3s ease;
-}
-
-.rainbow-submit-content:hover {
-  background: #4b5563 !important;
-}
-
-.rainbow-submit-content:disabled {
-  background: #9ca3af !important;
-  color: #6b7280 !important;
-}
-
-/* Sign In Button Rainbow Border */
-.rainbow-signin-border {
-  position: relative;
-  padding: 2px;
-  border-radius: 8px;
-  background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
-  background-size: 400% 400%;
-  animation: rainbow-border 3s ease-in-out infinite;
-}
-
-.rainbow-signin-content {
-  background: white;
-  border-radius: 6px;
-  border: none !important;
-  color: #374151;
-  transition: all 0.3s ease;
-}
-
-.dark .rainbow-signin-content {
-  background: rgb(23, 23, 23);
-  color: white;
-}
-
-.rainbow-signin-content:hover {
-  background: rgba(0, 0, 0, 0.05) !important;
-  color: #374151 !important;
-}
-
-.dark .rainbow-signin-content:hover {
-  background: rgba(255, 255, 255, 0.1) !important;
-  color: white !important;
-}
-
 /* Rainbow Border Animation */
 @keyframes rainbow-border {
   0% {
@@ -195,7 +30,7 @@
   }
 }
 
-/* Pulse Animation for Enhanced Effect */
+/* Pulse Animation for Enhanced Effect (Used by rainbow-chat-container) */
 .rainbow-chat-container::before {
   content: "";
   position: absolute;
@@ -217,12 +52,10 @@
   .rainbow-chat-container,
   .rainbow-button-border,
   .rainbow-submit-border,
-  .rainbow-signin-border,
-  .rainbow-chat-input {
+  .rainbow-signin-border {
     padding: 1.5px;
   }
-  
-  .rainbow-chat-input:hover::after {
+  .rainbow-chat-input::after {
     inset: -4px;
     filter: blur(6px);
   }
@@ -241,6 +74,11 @@
     background: linear-gradient(45deg, #6366f1, #8b5cf6);
     box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
   }
+  
+  .rainbow-border {
+    animation: none;
+    border-color: #7c3aed;
+  }
 }
 
 .rainbow-border {
@@ -250,12 +88,3 @@
   animation: rainbow-border 4s linear infinite;
   overflow: hidden;
 }
-
-/* For reduced motion preferences */
-@media (prefers-reduced-motion) {
-  .rainbow-border,
-  .rainbow-button-border {
-    animation: none;
-    border-color: #7c3aed;
-  }
-}