navbar changes and product pages changed
This commit is contained in:
codebox283
parent
e364d14efd
commit
bce89e7fd8
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,16 +504,44 @@ 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'>
|
||||
{/* 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.map((listItem) => (
|
||||
{item.list.slice(0, 2).map((listItem) => (
|
||||
<li key={listItem.name} className='flex items-center space-x-4'>
|
||||
{listItem.icon && listItem.icon} {/* Only render icon if it exists */}
|
||||
{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'>
|
||||
@ -530,6 +558,33 @@ export const ResourcesDropdown: React.FC = () => {
|
||||
</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>
|
||||
<div className='relative bottom-0 flex border-gray-300 border-t mt-10 pt-5 px-10 text-sm font-light space-x-8'>
|
||||
|
||||
@ -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);
|
||||
const toggleDropdown = (tab: string) => {
|
||||
if (activeTab === tab) {
|
||||
setActiveTab(null);
|
||||
setShowProduct(false);
|
||||
setShowSolutions(false);
|
||||
setActiveTab('resources');
|
||||
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='/'>
|
||||
<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'
|
||||
className="h-20"
|
||||
src="https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png"
|
||||
alt="Logo"
|
||||
/></a>
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user