everydayserieswebsite/app/sales/page.tsx

"use client";

import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { Marquee } from '@/components/ui/marquee';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import { FaListUl, FaSearch, FaArrowsAlt, FaRegFileAlt, FaCalendarAlt, FaChartLine, 
         FaTasks, FaUsers, FaCog, FaRocket, FaLightbulb, FaDatabase } from 'react-icons/fa';
import { OrbitingCircles } from '@/components/magicui/orbiting-circles';

const heading = "Everyday Sales - Optimize and Automate Your Sales Workflows";
const description = "Bid farewell to inflexible systems. Everyday equips you with everything needed to power your sales engine, offering you full control to navigate it as you wish.";

const features = [
  {
    head: "Centralize and Analyze All Your Customer Feedback",
    desc: "Accumulating your customers' insights in one platform ensures you're steering development in the right direction.",
    button: "Explore tools",
    buttonColor: "sky-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_01_slh5ws.png",
    link: "#",
    icon: <FaUsers className="text-sky-400 text-2xl" />
  },
  {
    head: "Set Key Objectives and Align Teams",
    desc: "An executive dashboard allows you to delve into Key Results. Monitor health, status, and related information like objectives or projects.",
    button: "Get started",
    buttonColor: "purple-300",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_02_ivu6pd.png",
    link: "#",
    icon: <FaTasks className="text-purple-400 text-2xl" />
  },
  {
    head: "Craft a Dynamic Sales Roadmap",
    desc: "Create, manage, and deliver a sales roadmap that energizes your entire organization, yet is adaptable enough to adjust to unforeseen circumstances.",
    button: "Unlock now",
    buttonColor: "amber-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809091/Solutions/Marketing/marketing-lp_04_liatuw.png",
    link: "#",
    icon: <FaRocket className="text-amber-400 text-2xl" />
  },
  {
    head: "Visualize and Interpret Trends",
    desc: "Built-in reporting swiftly uncovers key insights and best practices, expediting action and elevating your processes.",
    button: "See demo",
    buttonColor: "emerald-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809091/Solutions/Marketing/marketing-lp_04_liatuw.png",
    link: "#",
    icon: <FaChartLine className="text-emerald-400 text-2xl" />
  },
  {
    head: "Manage Sales Cycles and Delivery",
    desc: "Draw together product insights by consolidating all feedback—from every tool and source—into a single, accessible location.",
    button: "Learn more",
    buttonColor: "rose-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_02_ivu6pd.png",
    link: "#",
    icon: <FaCalendarAlt className="text-rose-400 text-2xl" />
  },
  {
    head: "Establish a Unified Sales Roadmap",
    desc: "Synchronize around a flexible, organization-wide roadmap. Customizable views allow every department to see their role.",
    button: "View details",
    buttonColor: "blue-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_01_slh5ws.png",
    link: "#",
    icon: <FaRegFileAlt className="text-blue-400 text-2xl" />
  }
];

const whyEveryday = [
  {
    title: "Perfect Fit for Sales Teams",
    description: "Everyday seamlessly integrates your sales roadmaps, customer feedback, and target schedules, keeping them perfectly aligned. With the right data at their fingertips, teams can concentrate on delivering exceptional sales results, quicker.",
    icon: <FaUsers className="text-4xl text-indigo-400" />
  },
  {
    title: "Set Key Objectives and Align Teams",
    description: "An executive dashboard allows you to delve into Key Results. Monitor health, status, and related information like objectives or projects.",
    icon: <FaTasks className="text-4xl text-blue-400" />
  },
  {
    title: "Craft a Dynamic Sales Roadmap",
    description: "Create, manage, and deliver a sales roadmap that energizes your entire organization, yet is adaptable enough to adjust to unforeseen circumstances.",
    icon: <FaRocket className="text-4xl text-green-400" />
  },
  {
    title: "Establish a Unified Sales Roadmap",
    description: "Synchronize around a flexible, organization-wide roadmap. Customizable views allow every department to see their role, and plan accordingly.",
    icon: <FaRegFileAlt className="text-4xl text-amber-400" />
  }
];

const detailedFeatures = [
  {
    title: "Built-in Reporting for Key Insights",
    description: "Built-in reporting swiftly uncovers key insights and best practices, expediting action and elevating your processes.",
    subFeature: "Consolidate All Essential Data in One Place Integrate your crucial tools to bring more context into the sales process.",
    icon: <FaChartLine className="text-4xl text-sky-400" />
  },
  {
    title: "Manage Sales Cycles and Delivery",
    description: "Draw together product insights by consolidating all feedback—from every tool and source—into a single, accessible location.",
    subFeature: "Ensure launches stay on course with comprehensive tracking and management.",
    icon: <FaCalendarAlt className="text-4xl text-purple-400" />
  },
  {
    title: "Centralize Customer Feedback",
    description: "Accumulating your customers' insights in one platform ensures you're steering development in the right direction.",
    subFeature: "Develop a feedback repository from every tool and source into a single, accessible location.",
    icon: <FaDatabase className="text-4xl text-rose-400" />
  },
  {
    title: "Visualize and Interpret Trends",
    description: "Plan and Prioritize as a Team. Stay on track with every initiative while maintaining a detailed view into OKRs.",
    subFeature: "Interconnect across all teams with comprehensive data visualization tools.",
    icon: <FaLightbulb className="text-4xl text-amber-400" />
  }
];

const words = `"Experience true versatility for sales teams. Everyday seamlessly integrates your sales roadmaps, customer feedback, and target schedules, keeping them perfectly aligned."`;

export default function SalesHub() {
  return (
    <div className="bg-[#080E12] dark text-white">
      <Navbar />
      
      {/* Hero Section */}
      <div className="min-h-screen flex flex-col justify-center p-6 md:p-12 lg:p-24 relative overflow-hidden">
        <div className="max-w-7xl mx-auto w-full z-10">
          <h1 className="text-5xl md:text-7xl lg:text-8xl font-semibold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
            {heading}
          </h1>
          <h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
            {description}
          </h2>
          <div className="flex flex-wrap gap-4">
            <button className="px-8 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all">
              Get Started
            </button>
            <button className="px-8 py-3 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700">
              Book Demo
            </button>
          </div>
        </div>
        <div className="absolute right-0 bottom-0 w-full md:w-1/2 h-1/2 opacity-20 md:opacity-30">
          <div className="w-full h-full bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-full blur-3xl"></div>
        </div>
      </div>

      {/* Integration Hub */}
      <div className="py-24 px-6 md:px-12">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-12 items-center">
          <div className="relative flex h-[400px] w-full md:w-1/2 flex-col items-center justify-center overflow-hidden">
            <OrbitingCircles iconSize={50} radius={180}>
              <Icons.salesforce />
              <Icons.hubspot />
              <Icons.slack />
              <Icons.zoom />
              <Icons.linkedin />
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={120} reverse speed={2}>
              <Icons.salesforce />
              <Icons.hubspot />
              <Icons.slack />
              <Icons.zoom />
            </OrbitingCircles>
          </div>
          <div className="flex flex-col w-full md:w-1/2 gap-6">
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-wide">
              Bring Your Sales Tools Together
            </h2>
            <p className="text-lg md:text-xl text-gray-300">
              With Everyday, you can easily connect and synchronize data from your CRM, email marketing platforms, sales enablement tools, and more, creating a comprehensive and efficient workflow tailored to your sales team's needs.
            </p>
            <button className="px-6 py-3 bg-gray-800 rounded-lg w-fit hover:bg-gray-700 transition-all border border-gray-700 mt-4">
              Discover Integrations
            </button>
          </div>
        </div>
      </div>

      {/* Why Everyday Section */}
      <div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl md:text-5xl font-bold mb-16 text-center">
            Why Everyday is the <span className="text-indigo-400">Perfect Fit</span> for Sales Teams
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
            {whyEveryday.map((item, index) => (
              <div key={index} className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-800 hover:border-gray-700 transition-all">
                <div className="mb-6">{item.icon}</div>
                <h3 className="text-2xl font-semibold mb-4">{item.title}</h3>
                <p className="text-gray-300">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Features Grid */}
      <div className="py-24 px-6 md:px-12">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl md:text-5xl font-bold mb-4 text-center">All Features</h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            Everything you need to optimize your sales workflows in one powerful platform
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div key={index} className="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-800 hover:border-gray-700">
                <div className="mb-6">{feature.icon}</div>
                <h3 className="text-2xl font-semibold mb-4">{feature.head}</h3>
                <p className="text-gray-300 mb-6">{feature.desc}</p>
                <a href={feature.link} className={`inline-block px-6 py-2 rounded-md bg-${feature.buttonColor} text-gray-900 font-medium hover:opacity-90 transition-opacity`}>
                  {feature.button}
                </a>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Testimonial */}
      <div className="py-24 px-6 md:px-12">
        <div className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-800 rounded-2xl shadow-xl p-10 md:p-16 border border-gray-700">
          <div className="text-amber-400 text-center text-2xl mb-10">
            ★★★★★
          </div>
          <TextGenerateEffect words={words} className="text-xl md:text-2xl font-medium italic text-center" />
          <p className="text-center mt-10 text-gray-400">— Michael Scott, Regional Manager</p>
        </div>
      </div>

      {/* Detailed Features */}
      <div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl md:text-5xl font-bold mb-16 text-center">
            Powerful <span className="text-sky-400">Features</span> for Modern Sales Teams
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            {detailedFeatures.map((feature, index) => (
              <div key={index} className="flex gap-6">
                <div className="flex-shrink-0">{feature.icon}</div>
                <div>
                  <h3 className="text-2xl font-semibold mb-3">{feature.title}</h3>
                  <p className="text-gray-300 mb-4">{feature.description}</p>
                  <div className="bg-gray-800/50 p-4 rounded-lg border-l-4 border-indigo-500">
                    <p className="text-gray-200">{feature.subFeature}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Marketplace Section */}
      <div className="py-24 px-6 md:px-12">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-center">
            Start Swiftly with Everyday Marketplace
          </h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            Our ready-to-use sales workflows and tools assist in building workflows that link across your team and organization. Now, you can centralize customer feedback, track work to goals, plan sales cycles, and more.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {features.slice(0, 3).map((feature, index) => (
              <div key={index} className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-700">
                <h3 className="text-2xl font-semibold mb-4">{feature.head}</h3>
                <p className="text-gray-300 mb-6">{feature.desc}</p>
                <a href={feature.link} className={`inline-block px-6 py-2 rounded-md bg-${feature.buttonColor} text-gray-100 font-medium hover:opacity-90 transition-opacity`}>
                  {feature.button}
                </a>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="py-24 px-6 md:px-12 bg-gradient-to-r from-indigo-900/20 to-purple-900/20">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Ready to Transform Your Sales Workflow?
          </h2>
          <p className="text-xl text-gray-300 mb-10">
            Join thousands of sales teams who have revolutionized their processes with Everyday.
          </p>
          <div className="flex flex-wrap gap-4 justify-center">
            <button className="px-8 py-4 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all">
              Get Started Today
            </button>
            <button className="px-8 py-4 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700">
              Schedule a Demo
            </button>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}

const Icons = {
  salesforce: () => (
    <svg width="100" height="100" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10.4 23C10.4 21.3 10.7 19.8 11.4 18.4C12.1 17 13 15.8 14.2 14.9C15.4 13.9 16.8 13.1 18.3 12.6C19.9 12.1 21.5 11.8 23.2 11.8C25 11.8 26.6 12.1 28.1 12.6C29.6 13.1 31 13.9 32.2 14.9C33.4 15.9 34.3 17.1 35 18.4C35.7 19.8 36 21.3 36 23C36 24.7 35.7 26.2 35 27.6C34.3 29 33.4 30.2 32.2 31.1C31 32.1 29.6 32.9 28.1 33.4C26.6 33.9 25 34.2 23.2 34.2C21.5 34.2 19.9 33.9 18.3 33.4C16.8 32.9 15.4 32.1 14.2 31.1C13 30.1 12.1 28.9 11.4 27.6C10.7 26.2 10.4 24.7 10.4 23Z" fill="#00A1E0"/>
      <path d="M26.5 20C26.5 19.4 26.3 18.9 26 18.5C25.7 18.1 25.2 17.9 24.6 17.9C24 17.9 23.5 18.1 23.2 18.5C22.9 18.9 22.7 19.4 22.7 20C22.7 20.6 22.9 21.1 23.2 21.5C23.5 21.9 24 22.1 24.6 22.1C25.2 22.1 25.7 21.9 26 21.5C26.3 21.1 26.5 20.6 26.5 20Z" fill="white"/>
      <path d="M19.8 24.2C19.8 23.6 19.6 23.1 19.3 22.7C19 22.3 18.5 22.1 17.9 22.1C17.3 22.1 16.8 22.3 16.5 22.7C16.2 23.1 16 23.6 16 24.2C16 24.8 16.2 25.3 16.5 25.7C16.8 26.1 17.3 26.3 17.9 26.3C18.5 26.3 19 26.1 19.3 25.7C19.6 25.3 19.8 24.8 19.8 24.2Z" fill="white"/>
      <path d="M33.3 24.2C33.3 23.6 33.1 23.1 32.8 22.7C32.5 22.3 32 22.1 31.4 22.1C30.8 22.1 30.3 22.3 30 22.7C29.7 23.1 29.5 23.6 29.5 24.2C29.5 24.8 29.7 25.3 30 25.7C30.3 26.1 30.8 26.3 31.4 26.3C32 26.3 32.5 26.1 32.8 25.7C33.1 25.3 33.3 24.8 33.3 24.2Z" fill="white"/>
      <path d="M26.5 28.4C26.5 27.8 26.3 27.3 26 26.9C25.7 26.5 25.2 26.3 24.6 26.3C24 26.3 23.5 26.5 23.2 26.9C22.9 27.3 22.7 27.8 22.7 28.4C22.7 29 22.9 29.5 23.2 29.9C23.5 30.3 24 30.5 24.6 30.5C25.2 30.5 25.7 30.3 26 29.9C26.3 29.5 26.5 29 26.5 28.4Z" fill="white"/>
    </svg>
  ),
  hubspot: () => (
    <svg width="100" height="100" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M245.333 140.667H266.667V226.667H352.667V248H266.667V334H245.333V248H159.333V226.667H245.333V140.667Z" fill="white"/>
      <path d="M394.667 202.667C394.667 190.333 384.667 180.333 372.333 180.333C360 180.333 350 190.333 350 202.667C350 215 360 225 372.333 225C384.667 225 394.667 215 394.667 202.667Z" fill="white"/>
      <path d="M162 202.667C162 190.333 152 180.333 139.667 180.333C127.333 180.333 117.333 190.333 117.333 202.667C117.333 215 127.333 225 139.667 225C152 225 162 215 162 202.667Z" fill="white"/>
      <path d="M394.667 309.333C394.667 297 384.667 287 372.333 287C360 287 350 297 350 309.333C350 321.667 360 331.667 372.333 331.667C384.667 331.667 394.667 321.667 394.667 309.333Z" fill="white"/>
      <path d="M162 309.333C162 297 152 287 139.667 287C127.333 287 117.333 297 117.333 309.333C117.333 321.667 127.333 331.667 139.667 331.667C152 331.667 162 321.667 162 309.333Z" fill="white"/>
      <path d="M256 117.333C176.76 117.333 112.667 181.427 112.667 260.667C112.667 339.907 176.76 404 256 404C335.24 404 399.333 339.907 399.333 260.667C399.333 181.427 335.24 117.333 256 117.333ZM256 382.667C188.52 382.667 134 328.147 134 260.667C134 193.187 188.52 138.667 256 138.667C323.48 138.667 378 193.187 378 260.667C378 328.147 323.48 382.667 256 382.667Z" fill="#FF7A59"/>
    </svg>
  ),
  slack: () => (
    <svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M14.5 10C13.672 10 13 9.328 13 8.5V3.5C13 2.672 13.672 2 14.5 2C15.328 2 16 2.672 16 3.5V8.5C16 9.328 15.328 10 14.5 10Z" fill="#E01E5A"/>
      <path d="M20.5 10H19V8.5C19 7.672 19.672 7 20.5 7C21.328 7 22 7.672 22 8.5C22 9.328 21.328 10 20.5 10Z" fill="#E01E5A"/>
      <path d="M9.5 14C10.328 14 11 14.672 11 15.5V20.5C11 21.328 10.328 22 9.5 22C8.672 22 8 21.328 8 20.5V15.5C8 14.672 8.672 14 9.5 14Z" fill="#2EB67D"/>
      <path d="M3.5 14H5V15.5C5 16.328 4.328 17 3.5 17C2.672 17 2 16.328 2 15.5C2 14.672 2.672 14 3.5 14Z" fill="#2EB67D"/>
      <path d="M14 9.5C14 10.328 13.328 11 12.5 11H7.5C6.672 11 6 10.328 6 9.5C6 8.672 6.672 8 7.5 8H12.5C13.328 8 14 8.672 14 9.5Z" fill="#ECB22E"/>
      <path d="M7.5 5H9V3.5C9 2.672 8.328 2 7.5 2C6.672 2 6 2.672 6 3.5C6 4.328 6.672 5 7.5 5Z" fill="#ECB22E"/>
      <path d="M10 14.5C10 13.672 10.672 13 11.5 13H16.5C17.328 13 18 13.672 18 14.5C18 15.328 17.328 16 16.5 16H11.5C10.672 16 10 15.328 10 14.5Z" fill="#36C5F0"/>
      <path d="M16.5 19H15V20.5C15 21.328 15.672 22 16.5 22C17.328 22 18 21.328 18 20.5C18 19.672 17.328 19 16.5 19Z" fill="#36C5F0"/>
    </svg>
  ),
  zoom: () => (
    <svg width="100" height="100" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M28 46.667C38.2173 46.667 46.6667 38.2177 46.6667 28.0003C46.6667 17.783 38.2173 9.33366 28 9.33366C17.7826 9.33366 9.33331 17.783 9.33331 28.0003C9.33331 38.2177 17.7826 46.667 28 46.667Z" fill="#4A8CFF"/>
      <path d="M22.6667 21V35L35 28L22.6667 21Z" fill="white"/>
    </svg>
  ),
  linkedin: () => (
    <svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 3H5C3.895 3 3 3.895 3 5V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V5C21 3.895 20.105 3 19 3Z" fill="#0077B5"/>
      <path d="M8.5 10.5V16.5H6.5V10.5H8.5Z" fill="white"/>
      <path d="M7.5 7.5C8.32843 7.5 9 8.17157 9 9C9 9.82843 8.32843 10.5 7.5 10.5C6.67157 10.5 6 9.82843 6 9C6 8.17157 6.67157 7.5 7.5 7.5Z" fill="white"/>
      <path d="M13 10.5C13 10.5 13 12.5 13 13.5C13 14.5 13.5 15.5 14.5 15.5C15.5 15.5 16 14.5 16 13.5V10.5H18V16.5H16V15.5C16 15.5 15.5 16.5 14 16.5C12.5 16.5 11 15.5 11 13.5V10.5H13Z" fill="white"/>
    </svg>
  ),
};