Improved canvas , UI layout, and reconnect button functionality

1. Removed scrollbar from the canvas for a cleaner UI. 2. Added functionality to "Reconnect" button to automatically connect with the last device used. 3. Updated the tech stack UI for a modernized look and feel. 4. Aligned all sections with the head section for consistent layout. 5. Enhanced padding across elements to improve visual spacing and readability.
Amanmahe · Nov 12, 2024 · 359b4ed · 359b4ed
1 parent 22f9953
commit 359b4ed
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 39 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -46,7 +46,7 @@ const page = () => {
         <Features />
         <Separator className="mt-20" />
         <TechStack />
-        <Separator className="mt-20" />
+        <Separator className="mt-12" />
         <FAQSection />
         <Footer />
       </div>

diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
@@ -304,7 +304,7 @@ const Canvas = forwardRef(
     }, [createCanvases,]);
 
     return (
-      <main className=" flex flex-col flex-[1_1_0%] min-h-100 bg-highlight  rounded-2xl m-4 relative"
+      <main className=" flex flex-col flex-[1_1_0%] min-h-80 bg-highlight  rounded-2xl m-4 relative"
         ref={canvasContainerRef}
       >
       </main>

diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
@@ -204,22 +204,23 @@ const Connection: React.FC<ConnectionProps> = ({
       connectToDevice();
     }
   };
+  let lastConnectedPort: SerialPort | null = null;
 
   const connectToDevice = async () => {
     try {
       if (portRef.current && portRef.current.readable) {
         await disconnectDevice();
       }
 
-      const port = await navigator.serial.requestPort();
+      const port = lastConnectedPort || await navigator.serial.requestPort();
       await port.open({ baudRate: 230400 });
       Connection(true);
       setIsConnected(true);
       onPauseChange(true);
       setIsDisplay(true);
       isConnectedRef.current = true;
       portRef.current = port;
-
+      lastConnectedPort = port;
       toast.success("Connection Successful", {
         description: (
           <div className="mt-2 flex flex-col space-y-1">

diff --git a/src/components/LandingComp/FAQSection.tsx b/src/components/LandingComp/FAQSection.tsx
@@ -170,7 +170,7 @@ const FAQSection = () => {
       <h1 className="text-3xl font-bold text-center text-foreground md:text-4xl lg:text-5xl">
         Frequently Asked Questions
       </h1>
-      <div className="mx-auto mt-8 max-w-6xl">
+      <div className="mx-auto mt-8 max-w-6xl pl-10">
         <Accordion type="single" collapsible className=" max-w-7xl">
           {FAQs.map((faq, index) => (
             <AccordionItem value={`item-${index}`} key={index}>

diff --git a/src/components/LandingComp/TechStack.tsx b/src/components/LandingComp/TechStack.tsx
@@ -1,11 +1,10 @@
 "use client";
 import Link from "next/link";
 import React from "react";
-import { Button } from "../ui/button";
 import Image from "next/image";
-import { GitHubLogoIcon } from "@radix-ui/react-icons";
 import { useTheme } from "next-themes";
 import Chords from "./Chords";
+import { Button } from "../../components/ui/button";
 
 const Stack = () => {
   const { theme } = useTheme();
@@ -60,43 +59,65 @@ const Stack = () => {
     },
   ];
   return (
-    <section className="w-full py-12">
-  <div className="container grid items-center justify-center gap-4 px-4 text-center md:px-6 max-w-7xl">
-    <div className="space-y-3">
-      <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
-        <Chords /> is open-source, and free to use.
-      </h2>
-      <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
-        It is powered by the following technologies, that makes it super fast, efficient, and reliable.
-      </p>
-    </div>
-    <div className="max-w-6xl mx-auto">
-      <div className="grid gap-8 mt-8 grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
-        {stack.map((item, index) => (
-          <Link
-            key={index}
-            href={item.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex flex-col items-center justify-center p-6 space-y-4 transition-transform transform rounded-lg border border-gray-900 shadow-md hover:shadow-lg hover:scale-[1.05] hover:border-gray-500 hover:shadow-muted-foreground"
-          >
-            <Image
-              src={item.logo}
-              alt={item.name}
-              width={60}
-              height={60}
-              className="w-16 h-16"
-            />
-            <h3 className="text-lg font-semibold">{item.name}</h3>
-            <p className="text-sm text-muted-foreground">{item.description}</p>
-          </Link>
-        ))}
+    <section className="w-full pt-12">
+  <div className="container grid grid-cols-1 md:grid-cols-2 items-center gap-8 px-4 md:px-6 max-w-7xl">
+
+    {/* Left Side (Text Content) */}
+    <div className="space-y-6 text-left md:pl-20">
+      <div className="space-y-3">
+        <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
+        <span className="block"> {/* Use block to force line break */}
+        <Chords /> is
+      </span>
+      <span className="block"> {/* Use block to force line break */}
+        open-source,
+      </span>
+      <span className="block"> {/* Use block to force line break */}
+        and free to use.
+      </span>
+        </h2>
+        <p className="max-w-md pt-14 text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+          It is powered by the following technologies, making it super fast, efficient, and reliable.
+        </p>
+      </div>
+      <div className="pt-14 w-60">
+      <Button className="flex items-center w-full justify-center py-2 px-6 sm:py-3 sm:px-8 rounded-full  font-semibold">
+        <span>Source Code</span>
+      </Button>
       </div>
     </div>
+
+    {/* Right Side (Images) */}
+    <div className="grid gap-8 grid-cols-1 sm:grid-cols-2 md:grid-cols-2">
+  {stack.map((item, index) => (
+    <Link
+      key={index}
+      href={item.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="flex flex-row items-start p-6 space-x-4 transition-transform transform rounded-lg"
+    >
+      <Image
+        src={item.logo}
+        alt={item.name}
+        width={60}
+        height={60}
+        className="w-8 h-8"
+      />
+      <div className="flex flex-col">
+        <h3 className="text-lg font-semibold">{item.name}</h3>
+        <p className="text-sm text-muted-foreground">{item.description}</p>
+      </div>
+    </Link>
+  ))}
+</div>
+
+
 
   </div>
 </section>
 
+
   );
 };
 

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -31,7 +31,7 @@ const Navbar = ({ isDisplay }: { isDisplay: boolean }) => {
         <div className="flex w-full max-w-screen mx-2 md:mx-4 justify-between items-center">
           <div className="flex flex-row gap-2 items-center group">
             <Link href="/">
-              <div className="font-rancho font-bold text-2xl duration-300  bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-transparent bg-clip-text ">
+              <div className="font-rancho font-bold text-2xl duration-300 pl-4 bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-transparent bg-clip-text ">
                 Chords
               </div>
             </Link>