gaurav/everydayserieswebsite
1
0
Fork 0
forked from nakshatra/everydayserieswebsite
Code Pull Requests Activity

navbar changes and product pages changed

Browse Source
This commit is contained in:
codebox283 2025-02-25 08:58:35 +05:30
parent e364d14efd
commit bce89e7fd8
6 changed files with 159 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/click-video/page.tsx
View File

@ -88,7 +88,7 @@ export default function Series() {
return ( return (
<div className="p-6 bg-[#080E12] dark text-white"> <div className="p-6 bg-[#080E12] dark text-white">
<Navbar /> <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> <h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2> <h2 className='text-4xl'>{description}</h2>
</div> </div>

2
app/series/page.tsx
View File

@ -107,7 +107,7 @@ export default function Series() {
return ( return (
<div className="p-6 bg-[#080E12] dark text-white"> <div className="p-6 bg-[#080E12] dark text-white">
<Navbar /> <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> <h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2> <h2 className='text-4xl'>{description}</h2>
</div> </div>

2
app/template/page.tsx
View File

@ -107,7 +107,7 @@ export default function Series() {
return ( return (
<div className="p-6 bg-[#080E12] dark text-white"> <div className="p-6 bg-[#080E12] dark text-white">
<Navbar /> <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> <h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2> <h2 className='text-4xl'>{description}</h2>
</div> </div>

2
app/writer/page.tsx
View File

@ -85,7 +85,7 @@ export default function Series() {
return ( return (
<div className="p-6 bg-[#080E12] dark text-white"> <div className="p-6 bg-[#080E12] dark text-white">
<Navbar /> <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> <h1 className="text-8xl mb-10">{heading}</h1>
<h2 className='text-4xl'>{description}</h2> <h2 className='text-4xl'>{description}</h2>
</div> </div>

105
components/Navbar/dropdowns.tsx
View File

@ -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 { FaBook, FaBookmark, FaMicrophone, FaMoneyBillAlt, FaPen, FaServicestack, FaStore, FaUserCog, FaUserPlus, FaVideo } from 'react-icons/fa';
import { GiArtificialIntelligence } from 'react-icons/gi'; import { GiArtificialIntelligence } from 'react-icons/gi';
import { GoWorkflow } from 'react-icons/go'; 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 { IoIosApps, IoIosDocument, IoIosMail, IoMdAnalytics, IoMdArrowRoundForward } from 'react-icons/io';
import { IoFlash, IoText } from 'react-icons/io5'; import { IoFlash, IoText } from 'react-icons/io5';
import { LuWorkflow } from 'react-icons/lu'; import { LuWorkflow } from 'react-icons/lu';
@ -432,7 +432,7 @@ const resourceItems: ResourceItem[] = [
{ {
name: 'Enterprise Contact', name: 'Enterprise Contact',
description: 'Partner with us to scale your enterprise', 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 link: '/enterprise-contact' // Add the correct link
}, },
], ],
@ -504,31 +504,86 @@ export const ResourcesDropdown: React.FC = () => {
<div className='w-full space-y-8'> <div className='w-full space-y-8'>
<div> <div>
<h1 className='text-3xl'>Curated Resources to Get You Started.</h1> <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>
<div className='flex space-x-4'> <div className='flex space-x-4'>
{resourceItems.map((item) => ( {/* Mapping over resource items, ensuring Build & Services are in the same column */}
<div key={item.category} className='w-1/4 space-y-2'> {resourceItems.map((item, index) => {
<h3 className='font-medium text-sm text-slate-300'>{item.category}</h3> if (item.category === 'Build') {
<ul className='space-y-4'> return (
{item.list.map((listItem) => ( <div key={index} className='w-1/4 space-y-2'>
<li key={listItem.name} className='flex items-center space-x-4'> {/* Render Build category */}
{listItem.icon && listItem.icon} {/* Only render icon if it exists */} <h3 className='font-medium text-sm text-slate-300'>{item.category}</h3>
<div className='group'> <ul className='space-y-4'>
<a href={listItem.link} > {item.list.slice(0, 2).map((listItem) => (
<h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'> <li key={listItem.name} className='flex items-center space-x-4'>
{listItem.name} {listItem.icon && listItem.icon}
</h3> <div className='group'>
<p className='font-thin text-xs transition-all duration-200 group-hover:underline'> <a href={listItem.link}>
{listItem.description} <h3 className='font-medium transition-colors duration-200 group-hover:text-violet-500'>
</p> {listItem.name}
</a> </h3>
</div> <p className='font-thin text-xs transition-all duration-200 group-hover:underline'>
</li> {listItem.description}
))} </p>
</ul> </a>
</div> </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> </div>
</div> </div>

130
components/Navbar/navbar.tsx
View File

@ -1,59 +1,75 @@
"use client"; "use client";
import React, { useState } from 'react'; import React, { useState, useRef, useEffect } from "react";
import { FaAngleDown } from "react-icons/fa"; import { FaAngleDown } from "react-icons/fa";
import { ProductDropdown, SolutionsDropdown, ResourcesDropdown } from './dropdowns'; import { ProductDropdown, SolutionsDropdown, ResourcesDropdown } from "./dropdowns";
import MobileMenu from './MobileMenu'; // Import the MobileMenu component import MobileMenu from "./MobileMenu"; // Import the MobileMenu component
const Navbar: React.FC = () => { const Navbar: React.FC = () => {
const [showProduct, setShowProduct] = useState<boolean>(false); const [showProduct, setShowProduct] = useState<boolean>(false);
const [showSolutions, setShowSolutions] = useState<boolean>(false); const [showSolutions, setShowSolutions] = useState<boolean>(false);
const [showResources, setShowResources] = useState<boolean>(false); const [showResources, setShowResources] = useState<boolean>(false);
const [activeTab, setActiveTab] = useState<string>(''); const [activeTab, setActiveTab] = useState<string | null>(null);
const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false); // State for mobile menu const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
const toggleProduct = () => { const navbarRef = useRef<HTMLDivElement>(null); // Reference for the navbar
setShowProduct(!showProduct);
setShowSolutions(false);
setShowResources(false);
setActiveTab('product');
};
const toggleSolutions = () => { const toggleDropdown = (tab: string) => {
setShowSolutions(!showSolutions); if (activeTab === tab) {
setShowProduct(false); setActiveTab(null);
setShowResources(false); setShowProduct(false);
setActiveTab('solutions'); setShowSolutions(false);
}; setShowResources(false);
} else {
const toggleResources = () => { setActiveTab(tab);
setShowResources(!showResources); setShowProduct(tab === "product");
setShowProduct(false); setShowSolutions(tab === "solutions");
setShowSolutions(false); setShowResources(tab === "resources");
setActiveTab('resources'); }
}; };
const toggleMobileMenu = () => { const toggleMobileMenu = () => {
setMobileMenuOpen(!mobileMenuOpen); 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 ( 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 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="w-full text-white flex items-center justify-between">
<div className='flex items-center space-x-12 relative'> <div className="flex items-center space-x-12 relative">
<a href='/'> <a href="/">
<img <img
className='h-20' className="h-20"
src='https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png' src="https://res.cloudinary.com/dezd109fz/image/upload/v1737306774/Screenshot_2025-01-16_150353_fwgdmz.png"
alt="Logo" alt="Logo"
/></a> />
</a>
{/* Desktop Menu */} {/* Desktop Menu */}
<ul className='hidden md:flex space-x-12'> <ul className="hidden md:flex space-x-12">
{/* Product Menu */} {/* Product Menu */}
<li className={`flex items-center cursor-pointer relative ${activeTab === 'product' ? 'text-violet-500' : ''}`} onClick={toggleProduct}> <li
Product <FaAngleDown className='ml-2' /> className={`flex items-center cursor-pointer relative ${activeTab === "product" ? "text-violet-500" : "text-white"}`}
{activeTab === 'product' && ( onClick={() => toggleDropdown("product")}
>
Product <FaAngleDown className="ml-2" />
{activeTab === "product" && (
<span className="absolute left-0 -bottom-1 transition-all duration-300"> <span className="absolute left-0 -bottom-1 transition-all duration-300">
<span className="block h-[2px] w-full bg-violet-500"></span> <span className="block h-[2px] w-full bg-violet-500"></span>
</span> </span>
@ -61,9 +77,12 @@ const Navbar: React.FC = () => {
</li> </li>
{/* Solutions Menu */} {/* Solutions Menu */}
<li className={`flex items-center cursor-pointer relative ${activeTab === 'solutions' ? 'text-violet-500' : ''}`} onClick={toggleSolutions}> <li
Solutions <FaAngleDown className='ml-2' /> className={`flex items-center cursor-pointer relative ${activeTab === "solutions" ? "text-violet-500" : "text-white"}`}
{activeTab === 'solutions' && ( onClick={() => toggleDropdown("solutions")}
>
Solutions <FaAngleDown className="ml-2" />
{activeTab === "solutions" && (
<span className="absolute left-0 -bottom-1 transition-all duration-300"> <span className="absolute left-0 -bottom-1 transition-all duration-300">
<span className="block h-[2px] w-full bg-violet-500"></span> <span className="block h-[2px] w-full bg-violet-500"></span>
</span> </span>
@ -71,19 +90,26 @@ const Navbar: React.FC = () => {
</li> </li>
{/* Pricing */} {/* 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 */} {/* Resources Menu */}
<li className={`flex items-center cursor-pointer relative ${activeTab === 'resources' ? 'text-violet-500' : ''}`} onClick={toggleResources}> <li
Resources <FaAngleDown className='ml-2' /> className={`flex items-center cursor-pointer relative ${activeTab === "resources" ? "text-violet-500" : "text-white"}`}
{activeTab === 'resources' && ( onClick={() => toggleDropdown("resources")}
>
Resources <FaAngleDown className="ml-2" />
{activeTab === "resources" && (
<span className="absolute left-0 -bottom-1 transition-all duration-300"> <span className="absolute left-0 -bottom-1 transition-all duration-300">
<span className="block h-[2px] w-full bg-violet-500"></span> <span className="block h-[2px] w-full bg-violet-500"></span>
</span> </span>
)} )}
</li> </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> </ul>
{/* Hamburger Icon for Mobile View */} {/* Hamburger Icon for Mobile View */}
@ -93,19 +119,15 @@ const Navbar: React.FC = () => {
</div> </div>
{/* Action Buttons */} {/* Action Buttons */}
<div className='hidden md:flex space-x-4'> <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'> <button className="border px-4 py-2 rounded-md text-white border-white hover:bg-gray-800">Start Free Trial</button>
Start Free Trial
</button>
<button className='border px-4 py-2 rounded-md bg-violet-700 hover:bg-violet-500 text-white'> <button className="border px-4 py-2 rounded-md bg-violet-700 hover:bg-violet-500 text-white">Take a Demo</button>
Take a Demo
</button>
</div> </div>
</div> </div>
{/* Dropdowns for Desktop View */} {/* Dropdowns for Desktop View */}
<div className='border'> <div className="border">
{showProduct && ( {showProduct && (
<div> <div>
<ProductDropdown /> <ProductDropdown />
@ -124,9 +146,7 @@ const Navbar: React.FC = () => {
</div> </div>
{/* Mobile Menu */} {/* Mobile Menu */}
{mobileMenuOpen && ( {mobileMenuOpen && <MobileMenu show={mobileMenuOpen} toggle={toggleMobileMenu} />}
<MobileMenu show={mobileMenuOpen} toggle={toggleMobileMenu} />
)}
</div> </div>
); );
}; };