Completed UI Task (Landing Page changes #30 )

Author: Ashu1823

client/package-lock.json

@@ -14,6 +14,7 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",

client/package.json

@@ -0,0 +1,44 @@
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from "@/components/ui/accordion"
+
+
+export function Faq() {
+    const faqs = [
+        {
+            question: "How to create an account?",
+            answer: "Yes, signUp to create a new account and get opt auth & protection."
+        },
+        {
+            question: "Is it free to chat with the model?",
+            answer: "Yes, you can complete your profile and start chat."
+        },
+        {
+            question: "can we make our account private?",
+            answer: "No, as a collaborative platform, other developers can find you."
+        },
+        {
+            question: "can we chat with anyone?",
+            answer: "Yes, you can search dev and chat with anyone."
+        }
+    ]
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1  relative z-10 py-10 max-w-7xl mx-auto">
+            <h1>FAQS</h1>
+            {faqs.map(data => (
+                <Accordion type="single" collapsible>
+                    <AccordionItem value="item-1">
+                        <AccordionTrigger>{data.question}</AccordionTrigger>
+                        <AccordionContent>
+                            {data.answer}
+                        </AccordionContent>
+                    </AccordionItem>
+                </Accordion>
+            ))}
+        </div>
+
+    );
+}

client/src/components/FAQ/Faq.tsx

@@ -7,66 +7,66 @@ import Balancer from "react-wrap-balancer";
 import { Button } from "../ui/button";
 
 // Icon imports
-import { Github, Twitter, Facebook } from "lucide-react";
+import { Github } from "lucide-react";
 
 // Local component imports
 import { Section, Container } from "@/components/ui/craft";
+import { DiscordLogoIcon } from '@radix-ui/react-icons';
 
 // Asset imports
 // import Logo from "@/public/logo.svg";
 
 export default function Footer() {
+    const handleGithubClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault(); // Prevent any default button behavior
+        window.open("https://github.com/devhub-ai/devhub", "_blank");
+    };
+    const handleDiscordClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault(); // Prevent any default button behavior
+        window.open("https://discord.gg/he8QHEC8WP", "_blank");
+    };
     return (
         <footer>
             <Section>
                 <Container className="grid gap-12 md:grid-cols-[1.5fr_0.5fr_0.5fr]">
                     <div className="not-prose flex flex-col gap-6">
-                        <Link to="/">
-                            <h3 className="sr-only">brijr/components</h3>
-                            {/* <img
-                                src={Logo}
+                        <div className='logo'>
+                            <img
+                                src="https://i.ibb.co/kh28sVv/cropped-image.png"
                                 alt="Logo"
-                                width={120}
+                                width={60}
                                 height={27.27}
                                 className="transition-all hover:opacity-75 dark:invert"
-                            ></img> */}
-                        </Link>
+                            ></img>
+                        </div>
                         <p>
                             <Balancer>
-                                brijr/components is a collection of Next.js, React, Typescript
-                                components for building landing pages and websites.
+                                DevHub is an innovative platform designed to connect developers who share similar interests and complementary skills.
                             </Balancer>
                         </p>
                     </div>
-                    <div className="flex flex-col gap-2">
-                        <h5>Website</h5>
-                        <Link to="/">Blog</Link>
-                        <Link to="/">Authors</Link>
-                        <Link to="/">Categories</Link>
-                    </div>
-                    <div className="flex flex-col gap-2">
+                    <div className="flex flex-col gap-2" style={{justifyContent: 'flex-end'}}>
                         <h5>Legal</h5>
                         <Link to="/privacy-policy">Privacy Policy</Link>
+                    </div>
+                    <div className="flex flex-col justify-cont gap-2" style={{justifyContent: 'flex-end'}}>
                         <Link to="/terms-of-service">Terms of Service</Link>
                         <Link to="/cookie-policy">Cookie Policy</Link>
                     </div>
                 </Container>
                 <Container className="not-prose flex flex-col justify-between gap-6 border-t md:flex-row md:items-center md:gap-2">
                     <div className="flex gap-2">
-                        <Button variant="outline" size="icon">
+                        <Button variant="outline" size="icon" onClick={handleGithubClick}>
                             <Github />
                         </Button>
-                        <Button variant="outline" size="icon">
-                            <Twitter />
-                        </Button>
-                        <Button variant="outline" size="icon">
-                            <Facebook />
+                        <Button variant="outline" size="icon" onClick={handleDiscordClick}>
+                            <DiscordLogoIcon />
                         </Button>
                     </div>
                     <p className="text-muted-foreground">
                         ©{" "}
-                        <a to="https://github.com/brijr/components">brijr/components</a>.
-                        All rights reserved. 2024-present.
+                        <span>Devhub</span>.
+                        All rights reserved. 2024.
                     </p>
                 </Container>
             </Section>

client/src/components/Footer/Footer.tsx

@@ -1,61 +1,53 @@
 import { cn } from "@/lib/utils";
-import {
-    IconAdjustmentsBolt,
-    IconCloud,
-    IconCurrencyDollar,
-    IconEaseInOut,
-    IconHeart,
-    IconHelp,
-    IconRouteAltLeft,
-    IconTerminal2,
-} from "@tabler/icons-react";
+import { IconLock, IconStar, IconShare, IconUsers, IconUserPlus, IconBulb, IconBuilding, IconMap } from "@tabler/icons-react";
+
 
 export function FeaturesSectionDemo() {
     const features = [
         {
-            title: "Built for developers",
+            title: "Secure Your Access",
             description:
-                "Built for engineers, developers, dreamers, thinkers and doers.",
-            icon: <IconTerminal2 />,
+                "Protect your account with industry-standard OTP authentication, ensuring only you can log in.",
+            icon: <IconLock />,
         },
         {
-            title: "Ease of use",
+            title: "Showcase Your Skills",
             description:
-                "It's as easy as using an Apple, and as expensive as buying one.",
-            icon: <IconEaseInOut />,
+                "Link your coding profiles from GitHub, LeetCode, and more to demonstrate your expertise and achievements.",
+            icon: <IconStar />,
         },
         {
-            title: "Pricing like no other",
+            title: "Share Your Journey",
             description:
-                "Our prices are best in the market. No cap, no lock, no credit card required.",
-            icon: <IconCurrencyDollar />,
+                "Create a profile that reflects your passion and work, and easily share it with others to grow your network.",
+            icon: <IconShare />,
         },
         {
-            title: "100% Uptime guarantee",
-            description: "We just cannot be taken down by anyone.",
-            icon: <IconCloud />,
+            title: "Find Your Community",
+            description: "Search and connect with like-minded developers and engineers from across the globe based on skills and interests.",
+            icon: <IconUsers />,
         },
         {
-            title: "Multi-tenant Architecture",
-            description: "You can simply share passwords instead of buying new seats",
-            icon: <IconRouteAltLeft />,
+            title: "Collaborate Instantly",
+            description: "Start conversations, discuss projects, and brainstorm ideas with fellow developers through instant chat.",
+            icon: <IconUserPlus />,
         },
         {
-            title: "24/7 Customer Support",
+            title: "Share Your Innovations",
             description:
-                "We are available a 100% of the time. Atleast our AI Agents are.",
-            icon: <IconHelp />,
+                "Post your latest projects, get feedback, and showcase your creativity to the developer community.",
+            icon: <IconBulb />,
         },
         {
-            title: "Money back guarantee",
+            title: "Build Together",
             description:
-                "If you donot like EveryAI, we will convince you to like us.",
-            icon: <IconAdjustmentsBolt />,
+                "Form groups to collaborate, work on projects, or simply discuss ideas with others who share your vision.",
+            icon: <IconBuilding />,
         },
         {
-            title: "And everything else",
-            description: "I just ran out of copy ideas. Accept my sincere apologies",
-            icon: <IconHeart />,
+            title: "Plan Your Path",
+            description: "Follow a customized roadmap to guide your learning, hone your skills, and reach your career goals as a developer.",
+            icon: <IconMap />,
         },
     ];
     return (

client/src/components/Hero/features.tsx

@@ -1,37 +1,35 @@
 import { FloatingDock } from "@/components/ui/floating-dock";
 import {
   IconBrandGithub,
-  IconBrandX,
+  IconBrandDiscord,
   IconExchange,
   IconHome,
   IconNewSection,
   IconTerminal2,
 } from "@tabler/icons-react";
 
-
 export function Navbar() {
   const links = [
     {
       title: "Home",
       icon: (
         <IconHome className="h-full w-full text-neutral-500 dark:text-neutral-300" />
       ),
-      href: "#",
+      to: "#top", // Scroll to top
     },
-
     {
-      title: "Products",
+      title: "Features",
       icon: (
         <IconTerminal2 className="h-full w-full text-neutral-500 dark:text-neutral-300" />
       ),
-      href: "#",
+      to: "#features", // Scroll to features section
     },
     {
-      title: "Components",
+      title: "FAQs",
       icon: (
         <IconNewSection className="h-full w-full text-neutral-500 dark:text-neutral-300" />
       ),
-      href: "#",
+      to: "#help", // Scroll to help section
     },
     {
       title: "DevHub",
@@ -43,35 +41,34 @@ export function Navbar() {
           alt="DevHub"
         />
       ),
-      href: "#",
+      to: "#", // No scrolling
     },
     {
-      title: "Changelog",
+      title: "DevMap",
       icon: (
         <IconExchange className="h-full w-full text-neutral-500 dark:text-neutral-300" />
       ),
-      href: "#",
+      to: "#", // No scrolling
     },
-
     {
-      title: "Twitter",
+      title: "Discord",
       icon: (
-        <IconBrandX className="h-full w-full text-neutral-500 dark:text-neutral-300" />
+        <IconBrandDiscord className="h-full w-full text-neutral-500 dark:text-neutral-300" />
       ),
-      href: "#",
+      to: "https://discord.gg/he8QHEC8WP", // Discord link
     },
     {
       title: "GitHub",
       icon: (
         <IconBrandGithub className="h-full w-full text-neutral-500 dark:text-neutral-300" />
       ),
-      href: "#",
+      to: "https://github.com/devhub-ai/devhub", // GitHub link
     },
   ];
+
   return (
     <div className="flex items-center justify-center mt-16 w-full">
       <FloatingDock
-        // mobileClassName="translate-y-20" // only for demo, remove for production
         items={links}
       />
     </div>

client/src/components/Navbar/navbar.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }