diff --git a/app/click-video/page.tsx b/app/click-video/page.tsx
index a8e9e14..0b1d8b6 100644
--- a/app/click-video/page.tsx
+++ b/app/click-video/page.tsx
@@ -88,7 +88,7 @@ export default function Series() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
- <div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
+ <div className='h-screen py-10 px-24 flex flex-col items-start justify-center'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
diff --git a/app/series/page.tsx b/app/series/page.tsx
index 4015a19..02756f7 100644
--- a/app/series/page.tsx
+++ b/app/series/page.tsx
@@ -107,7 +107,7 @@ export default function Series() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
- <div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
+ <div className='h-screen py-10 px-24 flex flex-col items-start justify-center'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
diff --git a/app/template/page.tsx b/app/template/page.tsx
index 9b9b0a5..d0acdb9 100644
--- a/app/template/page.tsx
+++ b/app/template/page.tsx
@@ -107,7 +107,7 @@ export default function Series() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
- <div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
+ <div className='h-screen py-10 px-24 flex flex-col items-start justify-center'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
diff --git a/app/writer/page.tsx b/app/writer/page.tsx
index 8e3c34f..bd1f493 100644
--- a/app/writer/page.tsx
+++ b/app/writer/page.tsx
@@ -85,7 +85,7 @@ export default function Series() {
return (
<div className="p-6 bg-[#080E12] dark text-white">
<Navbar />
- <div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
+ <div className='h-screen py-10 px-24 flex flex-col items-start justify-center'>
<h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2>
</div>
diff --git a/components/Navbar/dropdowns.tsx b/components/Navbar/dropdowns.tsx
index a1d1c5d..25a711d 100644
--- a/components/Navbar/dropdowns.tsx
+++ b/components/Navbar/dropdowns.tsx
@@ -3,7 +3,7 @@ import { CgWebsite } from 'react-icons/cg';
import { FaBook, FaBookmark, FaMicrophone, FaMoneyBillAlt, FaPen, FaServicestack, FaStore, FaUserCog, FaUserPlus, FaVideo } from 'react-icons/fa';
import { GiArtificialIntelligence } from 'react-icons/gi';
import { GoWorkflow } from 'react-icons/go';
-import { GrTemplate } from 'react-icons/gr';
+import { GrContactInfo, GrTemplate } from 'react-icons/gr';
import { IoIosApps, IoIosDocument, IoIosMail, IoMdAnalytics, IoMdArrowRoundForward } from 'react-icons/io';
import { IoFlash, IoText } from 'react-icons/io5';
import { LuWorkflow } from 'react-icons/lu';
@@ -432,7 +432,7 @@ const resourceItems: ResourceItem[] = [
{
name: 'Enterprise Contact',
description: 'Partner with us to scale your enterprise',
- icon: undefined, // No Icon
+ icon: <GrContactInfo className='h-10 w-10 p-2 rounded-lg items-center bg-white text-violet-500' />,
link: '/enterprise-contact' // Add the correct link
},
],
@@ -504,31 +504,86 @@ export const ResourcesDropdown: React.FC = () => {
<div className='w-full space-y-8'>
<div>
<h1 className='text-3xl'>Curated Resources to Get You Started.</h1>
- <p className='text-gray-300 text-sm'>Documents, videos, communities and lot more.</p>
+ <p className='text-gray-300 text-sm'>Documents, videos, communities and a lot more.</p>
</div>
<div className='flex space-x-4'>
- {resourceItems.map((item) => (
- <div key={item.category} className='w-1/4 space-y-2'>
- <h3 className='font-medium text-sm text-slate-300'>{item.category}</h3>
- <ul className='space-y-4'>
- {item.list.map((listItem) => (
- <li key={listItem.name} className='flex items-center space-x-4'>
- {listItem.icon && listItem.icon} {/* Only render icon if it exists */}
- <div className='group'>
- <a href={listItem.link} >
- <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
- {listItem.name}
- </h3>
- <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
- {listItem.description}
- </p>
- </a>
- </div>
- </li>
- ))}
- </ul>
- </div>
- ))}
+ {/* Mapping over resource items, ensuring Build & Services are in the same column */}
+ {resourceItems.map((item, index) => {
+ if (item.category === 'Build') {
+ return (
+ <div key={index} className='w-1/4 space-y-2'>
+ {/* Render Build category */}
+ <h3 className='font-medium text-sm text-slate-300'>{item.category}</h3>
+ <ul className='space-y-4'>
+ {item.list.slice(0, 2).map((listItem) => (
+ <li key={listItem.name} className='flex items-center space-x-4'>
+ {listItem.icon && listItem.icon}
+ <div className='group'>
+ <a href={listItem.link}>
+ <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
+ {listItem.name}
+ </h3>
+ <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
+ {listItem.description}
+ </p>
+ </a>
+ </div>
+ </li>
+ ))}
+ </ul>
+
+ {/* Render Services category immediately after Build */}
+ {resourceItems
+ .filter((el) => el.category === 'Services')
+ .map((serviceItem) => (
+ <div key={serviceItem.category}>
+ <h3 className='font-medium text-sm text-slate-300 mt-6'>{serviceItem.category}</h3>
+ <ul className='space-y-4'>
+ {serviceItem.list.slice(0, 2).map((listItem) => (
+ <li key={listItem.name} className='flex items-center space-x-4'>
+ {listItem.icon && listItem.icon}
+ <div className='group'>
+ <a href={listItem.link}>
+ <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
+ {listItem.name}
+ </h3>
+ <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
+ {listItem.description}
+ </p>
+ </a>
+ </div>
+ </li>
+ ))}
+ </ul>
+ </div>
+ ))}
+ </div>
+ );
+ } else if (item.category !== 'Services') {
+ return (
+ <div key={index} className='w-1/4 space-y-2'>
+ <h3 className='font-medium text-sm text-slate-300'>{item.category}</h3>
+ <ul className='space-y-4'>
+ {item.list.map((listItem) => (
+ <li key={listItem.name} className='flex items-center space-x-4'>
+ {listItem.icon && listItem.icon}
+ <div className='group'>
+ <a href={listItem.link}>
+ <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
+ {listItem.name}
+ </h3>
+ <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
+ {listItem.description}
+ </p>
+ </a>
+ </div>
+ </li>
+ ))}
+ </ul>
+ </div>
+ );
+ }
+ })}
</div>
</div>
</div>
diff --git a/components/Navbar/navbar.tsx b/components/Navbar/navbar.tsx
index 54b13f7..abafc48 100644
--- a/components/Navbar/navbar.tsx
+++ b/components/Navbar/navbar.tsx
@@ -1,59 +1,75 @@
"use client";
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from "react";
import { FaAngleDown } from "react-icons/fa";
-import { ProductDropdown, SolutionsDropdown, ResourcesDropdown } from './dropdowns';
-import MobileMenu from './MobileMenu'; // Import the MobileMenu component
+import { ProductDropdown, SolutionsDropdown, ResourcesDropdown } from "./dropdowns";
+import MobileMenu from "./MobileMenu"; // Import the MobileMenu component
const Navbar: React.FC = () => {
const [showProduct, setShowProduct] = useState<boolean>(false);
const [showSolutions, setShowSolutions] = useState<boolean>(false);
const [showResources, setShowResources] = useState<boolean>(false);
- const [activeTab, setActiveTab] = useState<string>('');
- const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false); // State for mobile menu
+ const [activeTab, setActiveTab] = useState<string | null>(null);
+ const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
- const toggleProduct = () => {
- setShowProduct(!showProduct);
- setShowSolutions(false);
- setShowResources(false);
- setActiveTab('product');
- };
+ const navbarRef = useRef<HTMLDivElement>(null); // Reference for the navbar
- const toggleSolutions = () => {
- setShowSolutions(!showSolutions);
- setShowProduct(false);
- setShowResources(false);
- setActiveTab('solutions');
- };
-
- const toggleResources = () => {
- setShowResources(!showResources);
- setShowProduct(false);
- setShowSolutions(false);
- setActiveTab('resources');
+ const toggleDropdown = (tab: string) => {
+ if (activeTab === tab) {
+ setActiveTab(null);
+ setShowProduct(false);
+ setShowSolutions(false);
+ setShowResources(false);
+ } else {
+ setActiveTab(tab);
+ setShowProduct(tab === "product");
+ setShowSolutions(tab === "solutions");
+ setShowResources(tab === "resources");
+ }
};
const toggleMobileMenu = () => {
setMobileMenuOpen(!mobileMenuOpen);
};
+ // Close dropdowns when clicking outside the navbar
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (navbarRef.current && !navbarRef.current.contains(event.target as Node)) {
+ setActiveTab(null);
+ setShowProduct(false);
+ setShowSolutions(false);
+ setShowResources(false);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, []);
+
return (
- <div className='fixed top-0 w-full h-fit px-10 bg-[#080E12] bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-100 z-50'>
- <div className='w-full text-white flex items-center justify-between'>
- <div className='flex items-center space-x-12 relative'>
- <a href='/'>
- <img
- className='h-20'
- src='https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png'
- alt="Logo"
- /></a>
+ <div ref={navbarRef} className="fixed top-0 w-full h-fit px-10 bg-[#080E12] bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-100 z-50">
+ <div className="w-full text-white flex items-center justify-between">
+ <div className="flex items-center space-x-12 relative">
+ <a href="/">
+ <img
+ className="h-20"
+ src="https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png"
+ alt="Logo"
+ />
+ </a>
{/* Desktop Menu */}
- <ul className='hidden md:flex space-x-12'>
+ <ul className="hidden md:flex space-x-12">
{/* Product Menu */}
- <li className={`flex items-center cursor-pointer relative ${activeTab === 'product' ? 'text-violet-500' : ''}`} onClick={toggleProduct}>
- Product <FaAngleDown className='ml-2' />
- {activeTab === 'product' && (
+ <li
+ className={`flex items-center cursor-pointer relative ${activeTab === "product" ? "text-violet-500" : "text-white"}`}
+ onClick={() => toggleDropdown("product")}
+ >
+ Product <FaAngleDown className="ml-2" />
+ {activeTab === "product" && (
<span className="absolute left-0 -bottom-1 transition-all duration-300">
<span className="block h-[2px] w-full bg-violet-500"></span>
</span>
@@ -61,9 +77,12 @@ const Navbar: React.FC = () => {
</li>
{/* Solutions Menu */}
- <li className={`flex items-center cursor-pointer relative ${activeTab === 'solutions' ? 'text-violet-500' : ''}`} onClick={toggleSolutions}>
- Solutions <FaAngleDown className='ml-2' />
- {activeTab === 'solutions' && (
+ <li
+ className={`flex items-center cursor-pointer relative ${activeTab === "solutions" ? "text-violet-500" : "text-white"}`}
+ onClick={() => toggleDropdown("solutions")}
+ >
+ Solutions <FaAngleDown className="ml-2" />
+ {activeTab === "solutions" && (
<span className="absolute left-0 -bottom-1 transition-all duration-300">
<span className="block h-[2px] w-full bg-violet-500"></span>
</span>
@@ -71,19 +90,26 @@ const Navbar: React.FC = () => {
</li>
{/* Pricing */}
- <a href="/pricing"><li className='flex items-center cursor-pointer'>Pricing</li></a>
+ <a href="/pricing">
+ <li className="flex items-center cursor-pointer text-white">Pricing</li>
+ </a>
{/* Resources Menu */}
- <li className={`flex items-center cursor-pointer relative ${activeTab === 'resources' ? 'text-violet-500' : ''}`} onClick={toggleResources}>
- Resources <FaAngleDown className='ml-2' />
- {activeTab === 'resources' && (
+ <li
+ className={`flex items-center cursor-pointer relative ${activeTab === "resources" ? "text-violet-500" : "text-white"}`}
+ onClick={() => toggleDropdown("resources")}
+ >
+ Resources <FaAngleDown className="ml-2" />
+ {activeTab === "resources" && (
<span className="absolute left-0 -bottom-1 transition-all duration-300">
<span className="block h-[2px] w-full bg-violet-500"></span>
</span>
)}
</li>
- <a href="/ai-agents"><li className='flex items-center cursor-pointer'>AI Agents</li></a>
+ <a href="/ai-agents">
+ <li className="flex items-center cursor-pointer text-white">AI Agents</li>
+ </a>
</ul>
{/* Hamburger Icon for Mobile View */}
@@ -93,19 +119,15 @@ const Navbar: React.FC = () => {
</div>
{/* Action Buttons */}
- <div className='hidden md:flex space-x-4'>
- <button className='border px-4 py-2 rounded-md text-white border-white hover:bg-gray-800'>
- Start Free Trial
- </button>
+ <div className="hidden md:flex space-x-4">
+ <button className="border px-4 py-2 rounded-md text-white border-white hover:bg-gray-800">Start Free Trial</button>
- <button className='border px-4 py-2 rounded-md bg-violet-700 hover:bg-violet-500 text-white'>
- Take a Demo
- </button>
+ <button className="border px-4 py-2 rounded-md bg-violet-700 hover:bg-violet-500 text-white">Take a Demo</button>
</div>
</div>
{/* Dropdowns for Desktop View */}
- <div className='border'>
+ <div className="border">
{showProduct && (
<div>
<ProductDropdown />
@@ -124,9 +146,7 @@ const Navbar: React.FC = () => {
</div>
{/* Mobile Menu */}
- {mobileMenuOpen && (
- <MobileMenu show={mobileMenuOpen} toggle={toggleMobileMenu} />
- )}
+ {mobileMenuOpen && <MobileMenu show={mobileMenuOpen} toggle={toggleMobileMenu} />}
</div>
);
};