"use client";

import { GradientMesh } from "@/components/gradient-mesh";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export function HeroSection01() {
  return (
    <div className="h-screen flex items-center justify-center relative">
      {/* GradientWave behind the text */}
      <GradientMesh />
      <div className="flex flex-col text-center">
        <img
          src="/ai-logo.png"
          alt="Your Image"
          height={50}
          width={50}
          className="h-30 z-40 w-full object-contain"
        />
        <h2 className="font-extrabold pt-10 text-black mix-blend-overlay tracking-tighter text-7xl md:text-7xl lg:text-9xl">
          Design <br /> without Limits
        </h2>
        <div className="space-y-6 z-10 pt-20 flex justify-center items-center flex-col text-center px-6">
          <p className="text-black w-full  max-w-lg font-light text-sm md:text-xl">
            I create digital experiences that connect and inspire. I build apps,
            websites, brands, and products end-to-end.
          </p>
          <div className="flex gap-3 mt-6 flex-wrap justify-center">
            <Link target="_blank" href="https://cal.com/aliimam-in/30min">
              <Button className="h-12 md:h-14 rounded-full cursor-pointer px-8 md:px-10">
                Book an Intro Call
              </Button>
            </Link>
            <Button
              variant={"secondary"}
              className="h-12 md:h-14 cursor-pointer rounded-full px-8 md:px-10"
            >
              Get Started Explore
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* eslint-disable @next/next/no-img-element */
"use client";

import { GradientWave } from "@/components/gradient-wave";
import { Button } from "@/components/ui/button";
import { ClaudeAI, Cursor, Github, Google, Grok, OpenAI } from "@aliimam/logos";
import { Marquee } from "@/components/marquee";

const technologies = [
  {
    name: "Figma",
    designation: "UI/UX Design Tool",
    description: "Collaborative interface design.",
    logo: "/templates/dalim-www.jpg",
    icon: <Github className="h-6 w-6 text-black" />,
  },
  {
    name: "Adobe XD",
    designation: "Design & Prototyping",
    description: "Create wireframes, prototypes.",
    logo: "/templates/dalim-ui.jpg",
    icon: <OpenAI className="h-6 w-6 text-black" />,
  },
  {
    name: "Sketch",
    designation: "Vector Design Tool",
    description: "Professional digital design for macOS",
    logo: "/templates/dalim-icons.jpg",
    icon: <Cursor className="h-6 w-6 text-black" />,
  },
  {
    name: "Canva",
    designation: "Graphic Design Platform",
    description:
      "Easily create social media posts.",
    logo: "/templates/dalim-graphic.jpg",
    icon: <Google className="h-6 w-6 text-black" />,
  },
];

export function HeroSection02() {
  return (
    <div className="min-h-screen relative">
      <div className="overflow-hidden flex flex-col px-6 items-center justify-center">
        <GradientWave className="absolute inset-0 opacity-50 dark:opacity-10" /> 
        <div className="flex w-full absolute z-20 top-4 px-4 justify-between">
          <div>
            <img
              src="/ai-logo.png"
              alt="Design Logo"
              height={50}
              width={50}
              className="h-10 w-full object-contain"
            />
          </div>
          <Button className="rounded-full">Explore Designs</Button>
        </div>

        <div className="z-10 mt-28 my-20 space-y-10 border shadow-2xl backdrop-blur-sm rounded-xl p-10 lg:p-20 mx-auto max-w-7xl flex flex-col">
          <div className="flex justify-center flex-col lg:flex-row items-center gap-6 lg:gap-10">
            <h1 className="text-3xl font-medium mix-blend-overlay md:text-5xl lg:text-8xl text-center">
              Design Code
            </h1>
            <p className="max-w-md text-sm text-center lg:text-left">
              Discover top-notch design tools and resources that help you craft
              stunning interfaces and graphics. Learn and create with the best
              in the design industry.
            </p>
          </div>

          {/* Logos Row */}
          <div className="flex flex-col lg:flex-row items-center gap-10">
            <div className="flex justify-center flex-wrap -space-y-4 -space-x-6">
              <OpenAI
                className="bg-white border text-black shadow-2xl h-20 w-20 rounded-full p-5"
                size={20}
                height={25}
              />
              <ClaudeAI
                className="bg-white border shadow-2xl h-20 w-20 rounded-full p-5"
                size={20}
                height={24}
              />
              <Cursor
                className="bg-white hidden md:block h-20 w-20 text-black border shadow-2xl rounded-full p-5"
                size={20}
                height={16}
              />
              <Github
                className="bg-white h-20 border text-black shadow-2xl w-20 rounded-full p-5"
                size={20}
                height={20}
              />
              <Grok
                className="bg-white hidden md:block h-20 w-20 text-black border shadow-2xl rounded-full p-5"
                size={20}
                height={30}
              />
              <Google
                className="bg-white h-20 w-20 border shadow-2xl rounded-full p-5"
                size={20}
                height={30}
              />
            </div>
            <h1 className="text-3xl font-medium mix-blend-overlay md:text-5xl lg:text-8xl text-center">
              Creative Tools
            </h1>
          </div>
 
          <div className="flex flex-col lg:flex-row lg:items-end gap-10">
            <h1 className="underline font-medium text-3xl mix-blend-overlay md:text-5xl lg:text-8xl text-center">
              Learn & Create
            </h1>
            <Button className="px-20 h-20 rounded-full">Explore Designs</Button>
          </div>
        </div>

       
      </div>
       <div className="w-full z-10 relative flex flex-col items-center">
          <p className="text-center text-muted-foreground mb-10 text-lg z-10 relative">
            Some of the top design tools used by professionals
          </p>
          <Marquee className="w-full">
            {technologies.map((tech, index) => (
              <div key={index} className="h-full">
                <div className="flex items-center gap-3 h-full overflow-visible border backdrop-blur-md rounded-xl mx-10 min-w-[220px]">
                  <div className="absolute bg-white border-r -z-50 p-3 rounded-l-md -left-12.5 top-6">
                    {tech.icon}
                  </div>
                  <div className="flex flex-col px-4 py-3 flex-1">
                    <h3 className="font-semibold text-md">{tech.name}</h3>
                    <p className="text-sm text-muted-foreground">
                      {tech.designation}
                    </p>
                    <p className="text-xs text-muted-foreground mt-1">
                      {tech.description}
                    </p>
                  </div>
                  <img
                    src={tech.logo}
                    alt={tech.name}
                    className="h-full w-38 object-cover rounded-r-xl"
                  />
                </div>
              </div>
            ))}
          </Marquee>
        </div>
    </div>
  );
}

import { Separator } from "@/components/ui/separator";
import { BadgeQuestionMark } from "@aliimam/icons";
import { Instagram, Threads, X } from "@aliimam/logos";
import React from "react";

export function HeroSection03() {
  return (
    <div className="min-h-screen relative">
      <div className="w-full absolute h-full z-0 bg-[radial-gradient(circle,_black_1px,_transparent_1px)] dark:bg-[radial-gradient(circle,_white_1px,_transparent_1px)] opacity-15 [background-size:20px_20px]"/>
        <header className="flex justify-between items-center px-8 pt-6">
          <div className="text-2xl font-bold italic">aliimam.in</div>
          <nav className="hidden md:flex gap-6 text-sm">
            <a
              href="#"
              className="font-semibold hover:opacity-60 transition-opacity"
            >
              Index
            </a>
            <a
              href="#"
              className="text-gray-400 hover:opacity-60 transition-opacity"
            >
              About
            </a>
            <a
              href="#"
              className="text-gray-400 hover:opacity-60 transition-opacity"
            >
              Work
            </a>
            <a
              href="#"
              className="text-gray-400 hover:opacity-60 transition-opacity"
            >
              Archive
            </a>
            <a
              href="#"
              className="text-gray-400 hover:opacity-60 transition-opacity"
            >
              Contact
            </a>
          </nav>
        </header>

        <main className="relative pt-20 pb-20">
          <div className="flex relative gap-2 px-6 md:items-center w-full flex-col justify-center">
            <div className="md:flex gap-6 items-center">
              <p className="text-xs text-muted-foreground md:text-sm text-start md:text-right leading-5 max-w-[220px] md:max-w-[180px]">
                I am india digital product designer based in Bokaro Steel City, India.
              </p>
              <h1 className="text-6xl md:text-7xl xl:text-[10rem] font-light leading-none tracking-wider">
                DIGITAL
              </h1>
            </div>

            <div className="md:flex gap-6 items-center">
              <h1 className="text-6xl md:text-7xl xl:text-[10rem] flex font-light leading-none tracking-wider">
                <span>PR</span>
                <BadgeQuestionMark
                  type="solid"
                  className="lg:size-40 size-14 md:size-18 text-primary"
                />
                <span>DUCTS</span>
              </h1>
              <p className="text-xs text-muted-foreground md:text-sm pt-8 leading-5 max-w-[250px] md:max-w-[180px]">
                Open to all forms of design collaboration, regardless of
                location and language.
              </p>
            </div>

            <div className="md:flex gap-6 items-center">
              <h1 className="text-6xl md:text-7xl xl:text-[10rem] md:flex font-light leading-none tracking-wider">
                <span>DESIGN</span>
                <div className="hidden lg:block">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="160"
                    height="160"
                    viewBox="0 0 24 24"
                    fill="#f43f5e"
                  >
                    <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />
                  </svg>
                </div>
                <div className="block lg:hidden">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="70"
                    height="70"
                    viewBox="0 0 24 24"
                    fill="#f43f5e"
                  >
                    <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />
                  </svg>
                </div>
                <span>CODE</span>
              </h1>
            </div>
          </div>
          <div className="mx-auto max-w-7xl w-full px-6 gap-3">
            <div className="md:flex md:mx-8 grid md:justify-end items-center gap-3">
              <Separator className="w-full my-6 mx-auto max-w-3xl" />
              <div className="text-xs whitespace-nowrap md:text-sm">
                BOKARO STEEL CITY, INDIA 827010
              </div>
              <div className="flex w-full items-end gap-3">
                <span className="text-2xl md:text-4xl font-thin">DESIGNER</span>
                <span className="text-3xl md:text-5xl font-bold italic text-orange-600">
                  ali
                </span>
              </div>
            </div>
          </div>

          <div className="md:px-20 px-6 gap-6 items-end md:flex pt-12">
            <div className="w-84 h-48 shadow-lg border rounded-md overflow-hidden mb-8 md:mb-0">
              <img
                src="/templates/portfolio.jpg"
                alt="Portfolio"
                className="w-full h-full object-cover"
              />
            </div>
            <p className="text-xs text-muted-foreground md:text-sm pt-8 leading-5">
              Open to all forms of design collaboration, regardless of location
              and language.
            </p>
          </div>

          <div className="absolute bottom-8 right-8 md:right-12 flex gap-6">
            <Instagram />
            <X />
            <Threads />
          </div>

          <div className="fixed right-0 top-1/2 h-36 items-center flex transform -translate-y-1/2  ">
            <div className="bg-foreground text-background py-6 px-3 text-sm font-bold ">
              <span className="rotate-180 [writing-mode:vertical-rl]">
                Design Award
              </span>
            </div>
          </div>
        </main>
       
    </div>
  );
}

/* eslint-disable @next/next/no-img-element */
import React from "react";
import { ArrowDownRight } from "@aliimam/icons";
import { Oswald } from "next/font/google";
import { Button } from "@/components/ui/button";
 
const myFont = Oswald({
  weight: ["400", "700"],
  subsets: ["latin"],
});

export function HeroSection04() {
  return (
    <section className="min-h-screen overflow-hidden relative py-20">
      <div className="mx-auto max-w-7xl relative z-20 px-6">
        <div className="relative ">
          <p className="text-sm absolute -top-4 left-20 font-medium tracking-wider">
            1,996
          </p>
          <h1
            className={`${myFont.className} z-20 text-primary relative font-bold text-center tracking-[-7px] text-7xl md:text-9xl xl:tracking-[-1rem] md:tracking-[-14px] xl:text-[10rem]`}
          >
            CREATIVE DESIGNER
          </h1>
          <p className="text-4xl hidden xl:block absolute -bottom-12 right-24 font-thin tracking-[6px]">
            ALI IMAM
          </p>
          <p className="text-4xl absolute xl:hidden -bottom-12 left-24 font-thin tracking-[6px]">
            ALI IMAM
          </p>
        </div>

        <div className="grid relative">
          <div className="space-y-8 pt-20 flex gap-6 justify-center">
            <div className="flex gap-6 bg-secondary w-full max-w-xl h-fit p-10 items-end space-y-2 text-xl font-bold md:text-2xl lg:text-3xl">
              <div className="font-semibold text-xl">
                <div>/ ART DIRECTION</div>
                <div>/ WEB DESIGN (UX/UI)</div>
                <div>/ WEB DEVELOPMENT</div>
              </div>
              <div className="absolute hidden  md:flex left-1/2 -top-10 w-fit overflow-hidden bg-secondary">
                <img
                  src="/ai.jpg"
                  alt="Designer portrait"
                  className="h-100 w-full object-contain grayscale"
                />
                <div className="text-left p-2 rotate-180 [writing-mode:vertical-rl] text-xs font-medium tracking-widest">
                  BASED IN BOKARO STEEL CITY
                </div>
              </div>
            </div>
          </div>
          <div className="flex md:hidden left-1/2 -top-10 w-full md:w-fit overflow-hidden bg-secondary">
            <img
              src="/ai.jpg"
              alt="Designer portrait"
              className="h-100 w-full object-contain grayscale"
            />
            <div className="text-left p-2 rotate-180 [writing-mode:vertical-rl] text-xs font-medium tracking-widest">
              BASED IN BOKARO STEEL CITY
            </div>
          </div>
        </div>

        <div className="md:mt-40 mt-10">
          <p className="mx-auto max-w-2xl font-mono text-center text-sm font-medium tracking-wide md:text-base">
            I'M EXPERIENCED WEB AND UX/UI DESIGNER,
            <br />
            WHO DESIGN MEMORABLE WEB EXPERIENCES FOR
            <br />
            BRANDS OF ALL SIZES
          </p>
        </div>
        <div className="flex justify-center pt-6">
        <Button size={"lg"}>Book a call</Button>
        </div>

        <div className="md:flex mt-20 items-end justify-between">
          <div className="relative">
            <div className="w-60 h-36 shadow-lg border rounded-md overflow-hidden mb-8 md:mb-0">
              <img
                src="/templates/portfolio.jpg"
                alt="Portfolio"
                className="w-full h-full object-cover"
              />
            </div>
            <div className="w-60 h-36 absolute left-6 -top-6  shadow-lg border rounded-md overflow-hidden mb-8 md:mb-0">
              <img
                src="/templates/portfolio.jpg"
                alt="Portfolio"
                className="w-full h-full object-cover"
              />
            </div>
            <div className="w-60 h-36 absolute left-12 -top-12  shadow-lg border rounded-md overflow-hidden mb-8 md:mb-0">
              <img
                src="/templates/portfolio.jpg"
                alt="Portfolio"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
          <div>
            <div className="flex items-center md:justify-end gap-2">
              <span className="text-lg font-medium tracking-wider">
                RECENT WORK
              </span>
              <ArrowDownRight className="size-6" />
            </div>

            <div className="mt-3 md:text-right">
              <h2
                className={`${myFont.className} text-5xl uppercase tracking-[-4px]`}
              >
                Design without Limits
              </h2>
            </div>
          </div>
        </div>
      </div>
      <div
        className="absolute block dark:hidden inset-0 z-0"
        style={{
          backgroundImage: `
        linear-gradient(to right, #e5e5e5 1px, transparent 1px),
        linear-gradient(to bottom, #e5e5e5 1px, transparent 1px)
      `,
          backgroundSize: "20px 20px",
          backgroundPosition: "0 0, 0 0",
          maskImage: `
        repeating-linear-gradient(
              to right,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            repeating-linear-gradient(
              to bottom,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)
      `,
          WebkitMaskImage: `
 repeating-linear-gradient(
              to right,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            repeating-linear-gradient(
              to bottom,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)
      `,
          maskComposite: "intersect",
          WebkitMaskComposite: "source-in",
        }}
      />

      <div
        className="absolute hidden dark:block inset-0 z-0"
        style={{
          backgroundImage: `
        linear-gradient(to right, #404040 1px, transparent 1px),
        linear-gradient(to bottom, #404040 1px, transparent 1px)
      `,
          backgroundSize: "20px 20px",
          backgroundPosition: "0 0, 0 0",
          maskImage: `
        repeating-linear-gradient(
              to right,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            repeating-linear-gradient(
              to bottom,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)
      `,
          WebkitMaskImage: `
 repeating-linear-gradient(
              to right,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            repeating-linear-gradient(
              to bottom,
              black 0px,
              black 3px,
              transparent 3px,
              transparent 8px
            ),
            radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)
      `,
          maskComposite: "intersect",
          WebkitMaskComposite: "source-in",
        }}
      />
    </section>
  );
}

"use client";
import React, { useState } from "react"; 
import { ChevronRight, MapPin, Speech } from "@aliimam/icons";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Github } from "@aliimam/logos";

import { Marquee } from "@/components/marquee";
import { Blur } from "@/components/blur";

const technologies = [
  { name: "React", color: "bg-blue-500" },
  { name: "Next.js", color: "bg-black" },
  { name: "TypeScript", color: "bg-blue-600" },
  { name: "Tailwind CSS", color: "bg-cyan-500" },
  { name: "Framer Motion", color: "bg-pink-500" },
  { name: "Radix UI", color: "bg-green-500" },
  { name: "Lucide Icons", color: "bg-orange-500" },
  { name: "shadcn/ui", color: "bg-purple-500" },
];

export function HeroSection05() {
  const [selectedDuration, setSelectedDuration] = useState("30m");
  const [selectedDay, setSelectedDay] = useState(9);

  const calendarDays = [
    { date: 1, available: true },
    { date: 2, available: true },
    { date: 5, available: false },
    { date: 6, available: true },
    { date: 7, available: false },
    { date: 8, available: true },
    { date: 9, available: true },
    { date: 12, available: true },
    { date: 13, available: false },
    { date: 14, available: false },
    { date: 15, available: true },
    { date: 16, available: false },
    { date: 19, available: false },
    { date: 20, available: true },
    { date: 21, available: false },
    { date: 22, available: true },
    { date: 23, available: false },
    { date: 26, available: false },
    { date: 27, available: true },
    { date: 28, available: false },
    { date: 29, available: true },
    { date: 30, available: false },
  ];

  const durations = ["15m", "30m", "45m", "1h"];

  return (
    <div className="min-h-screen py-12">
      <div
        className="absolute hidden dark:block inset-0 z-0"
        style={{
          background:
            "radial-gradient(125% 125% at 50% 10%, #000 40%, #6366f1 100%)",
        }}
      />
      <div
        className="absolute dark:hidden inset-0 z-0"
        style={{
          background:
            "radial-gradient(125% 125% at 50% 10%, #fff 40%, #6366f1 100%)",
        }}
      />
      <div className="max-w-7xl mx-auto z-20 relative border shadow-2xl">
        <div className="p-6 md:p-20 md:pb-0 rounded-md">
          <div className="mb-6">
            <Badge variant="secondary" className="px-4 py-2 rounded-full">
              aliimam.in launches v5
              <ChevronRight className="size-6" />
            </Badge>
          </div>

          <div className="grid lg:grid-cols-2 gap-12 items-start">
            <div>
              <h1 className="text-6xl pt-3 lg:text-7xl font-bold mb-6">
                The smarter way to manage your design.
              </h1>

              <p className="text-md text-muted-foreground mb-8">
                A fully customizable platform for designers, teams, and
                developers to schedule and collaborate seamlessly.
              </p>

              <div className="space-y-3 mb-6">
                <Button className="w-full h-12 text-base" size="lg">
                  <Github />
                  Sign up with Github
                </Button>

                <Button
                  variant="outline"
                  className="w-full h-12 text-base"
                  size="lg"
                >
                  Sign up with email
                  <ChevronRight className="ml-2 h-4 w-4" />
                </Button>
              </div> 
            </div>

            <Card className="shadow-2xl grid gap-6 md:grid-cols-2">
              <div className="flex flex-col space-y-4 p-6">
                <div className="flex items-center gap-3 mb-2">
                  <Avatar>
                    <AvatarImage src="/brand/ai-logo.png" />
                    <AvatarFallback>AI</AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-semibold">Ali Imam</p>
                  </div>
                </div>
                <CardTitle className="text-2xl">Design Engineer</CardTitle>
                <CardDescription className="text-base">
                  Discuss your legal matters with our experienced attorneys in a
                  private consultation.
                </CardDescription>
                <div className="flex items-center gap-3">
                  <div className="flex flex-wrap gap-2">
                    {durations.map((duration) => (
                      <Button
                        key={duration}
                        variant={
                          selectedDuration === duration ? "default" : "outline"
                        }
                        size="sm"
                        onClick={() => setSelectedDuration(duration)}
                        className="min-w-[60px]"
                      >
                        {duration}
                      </Button>
                    ))}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Speech className="h-5 w-5 text-primary" />
                  <span className="text-sm text-muted-foreground">Zoom</span>
                </div>

                <div className="flex items-center gap-2">
                  <MapPin className="h-5 w-5 text-muted-foreground" />
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-auto p-1 text-sm hover:bg-transparent"
                  >
                    Europe/London
                    <ChevronRight className="ml-1 h-4 w-4 rotate-90" />
                  </Button>
                </div>
              </div>

              <CardContent className="space-y-6 md:mt-6 overflow-hidden">
                <div className="border rounded-lg w-[500px] p-4">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="font-semibold ">May 2025</h3>
                  </div>

                  <div className="grid grid-cols-7 gap-1 mb-2">
                    {["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"].map(
                      (day) => (
                        <div
                          key={day}
                          className="text-xs text-gray-500 text-center font-medium py-2"
                        >
                          {day}
                        </div>
                      )
                    )}
                  </div>

                  <div className="grid grid-cols-7 gap-1">
                    {calendarDays.map((day, idx) => (
                      <Button
                        key={idx}
                        variant={
                          selectedDay === day.date
                            ? "default"
                            : day.available
                              ? "secondary"
                              : "ghost"
                        }
                        size="sm"
                        disabled={!day.available}
                        onClick={() =>
                          day.available && setSelectedDay(day.date)
                        }
                        className={`
                        aspect-square p-0 h-auto
                        ${!day.available && "text-muted-foreground hover:bg-transparent"}
                      `}
                      >
                        {day.date}
                      </Button>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
        <div className="relative py-10 w-full">
          <Marquee>
            {technologies.map((tech, index) => (
              <Badge
                key={index}
                className={`${tech.color} rounded-md px-4 py-2 text-sm font-medium text-white`}
              >
                {tech.name}
              </Badge>
            ))}
          </Marquee>
          <div className="bg-linear-to-r from-[oklch(0.141 0.005 285.823)] absolute inset-y-0 left-0 w-40"></div>
          <div className="bg-linear-to-l from-[oklch(0.141 0.005 285.823)] absolute inset-y-0 right-0 w-40"></div>
          <Blur
            className="pointer-events-none absolute left-0 top-0 h-full w-20"
            direction="left"
            blurIntensity={1}
          />
          <Blur
            className="pointer-events-none absolute right-0 top-0 h-full w-20"
            direction="right"
            blurIntensity={1}
          />
        </div>
      </div>
    </div>
  );
}

"use client"

import { Hero } from "@/components/hero"
import { RenderCanvas } from "@/components/render-canvas"

export function Page() {
  return (
    <div className="relative min-h-svh w-full overflow-y-auto">
      <RenderCanvas
        lineWidth={20}
        trails={100}
        width={1400}
        height={920}
        className="absolute inset-0"
      />

      <div className="relative z-40 flex min-h-svh items-center justify-center">
        <Hero />
      </div>
    </div>
  )
}

/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import { useEffect, useState } from "react"
import { motion, Variants } from "framer-motion"

import { Photo } from "@/components/gallery"
import { GridPattern } from "@/components/grid-pattern"
import { Button } from "@/components/ui/button"

type Direction = "left" | "right"

export function PhotoGallery({
  animationDelay = 0.5,
}: {
  animationDelay?: number
}) {
  const [isVisible, setIsVisible] = useState(false)
  const [isLoaded, setIsLoaded] = useState(false)

  useEffect(() => {
    // First make the container visible with a fade-in
    const visibilityTimer = setTimeout(() => {
      setIsVisible(true)
    }, animationDelay * 1000)

    // Then start the photo animations after a short delay
    const animationTimer = setTimeout(
      () => {
        setIsLoaded(true)
      },
      (animationDelay + 0.4) * 1000
    ) // Add 0.4s for the opacity transition

    return () => {
      clearTimeout(visibilityTimer)
      clearTimeout(animationTimer)
    }
  }, [animationDelay])

  // Animation variants for the container
  const containerVariants = {
    hidden: { opacity: 1 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.15,
        delayChildren: 0.1, // Reduced from 0.3 to 0.1 since we already have the fade-in delay
      },
    },
  }

  // Animation variants for each photo
  const photoVariants: Variants = {
    hidden: () => ({
      x: 0,
      y: 0,
      rotate: 0,
      scale: 1,
    }),
    visible: (custom: {
      x: number | string
      y: number | string
      order: number
    }) => ({
      x: custom.x,
      y: custom.y,
      rotate: 0,
      scale: 1,
      transition: {
        type: "spring",
        stiffness: 70,
        damping: 12,
        mass: 1,
        delay: custom.order * 0.15,
      },
    }),
  }

  // Photo positions - horizontal layout with random y offsets
  const photos = [
    {
      id: 1,
      order: 0,
      x: "-320px",
      y: "15px",
      zIndex: 50, // Highest z-index (on top)
      direction: "left" as Direction,
      src: "https://images.pexels.com/photos/33600936/pexels-photo-33600936.jpeg",
    },
    {
      id: 2,
      order: 1,
      x: "-160px",
      y: "32px",
      zIndex: 40,
      direction: "left" as Direction,
      src: "https://images.pexels.com/photos/31596551/pexels-photo-31596551/free-photo-of-winter-scene-with-lake-view-in-van-turkiye.jpeg",
    },
    {
      id: 3,
      order: 2,
      x: "0px",
      y: "8px",
      zIndex: 30,
      direction: "right" as Direction,
      src: "https://images.pexels.com/photos/15526696/pexels-photo-15526696.jpeg",
    },
    {
      id: 4,
      order: 3,
      x: "160px",
      y: "22px",
      zIndex: 20,
      direction: "right" as Direction,
      src: "https://images.pexels.com/photos/19936068/pexels-photo-19936068/free-photo-of-women-sitting-on-hilltop-with-clouds-below.jpeg",
    },
    {
      id: 5,
      order: 4,
      x: "320px",
      y: "44px",
      zIndex: 10, // Lowest z-index (at bottom)
      direction: "left" as Direction,
      src: "https://images.pexels.com/photos/20494995/pexels-photo-20494995/free-photo-of-head-of-peacock.jpeg",
    },
  ]

  return (
    <div className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-y-auto">
      <GridPattern
        className="absolute inset-0 h-full w-full [mask-image:radial-gradient(900px_circle_at_center,transparent,white)]"
        width={100}
        height={10}
      />
      <p className="lg:text-md my-2 text-center text-xs font-light tracking-widest text-slate-600 uppercase dark:text-slate-400">
        A Journey Through Visual Stories
      </p>
      <h3 className="z-20 mx-auto max-w-2xl justify-center py-3 text-center text-4xl md:text-7xl">
        Welcome to My <span className="text-primary"> Stories</span>
      </h3>
      <div className="relative mb-8 h-[350px] w-full items-center justify-center lg:flex">
        <motion.div
          className="relative mx-auto flex w-full max-w-7xl justify-center"
          initial={{ opacity: 0 }}
          animate={{ opacity: isVisible ? 1 : 0 }}
          transition={{ duration: 0.4, ease: "easeOut" }}
        >
          <motion.div
            className="relative flex w-full justify-center"
            variants={containerVariants}
            initial="hidden"
            animate={isLoaded ? "visible" : "hidden"}
          >
            <div className="relative h-[220px] w-[220px]">
              {/* Render photos in reverse order so that higher z-index photos are rendered later in the DOM */}
              {[...photos].reverse().map((photo) => (
                <motion.div
                  key={photo.id}
                  className="absolute top-0 left-0"
                  style={{ zIndex: photo.zIndex }} // Apply z-index directly in style
                  variants={photoVariants}
                  custom={{
                    x: photo.x,
                    y: photo.y,
                    order: photo.order,
                  }}
                >
                  <Photo
                    width={220}
                    height={220}
                    src={photo.src}
                    alt="Photo"
                    direction={photo.direction}
                  />
                </motion.div>
              ))}
            </div>
          </motion.div>
        </motion.div>
      </div>
      <div className="flex w-full justify-center">
        <Button className="cursor-pointer">View All Stories</Button>
      </div>
    </div>
  )
}

"use client"

import { ButtonRotate } from "@/components/button-rotate"
import { Hero } from "@/components/hero"
import { GradientBars } from "@/components/gradient-bars"

export function HeroSection() {
  return (
    <div className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-y-auto">
      <GradientBars numBars={20} color="var(--primary)" />
      <ButtonRotate />
      <Hero />
    </div>
  )
}

import { Hero } from "@/components/hero"
import { ShaderRGB } from "@/components/shader-rgb"

export function DemoOne() {
  return (
    <div className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-y-auto">
      <ShaderRGB />
      <Hero />
    </div>
  )
}

import { HeroSection } from "@/components/hero"
import { ShaderVoid } from "@/components/shader-void"

export function DemoOne() {
  return (
    <div className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-hidden">
      <ShaderVoid
        voidBallsAmount={3}
        width={1300}
        height={1100}
        voidBallsColor="#fff200"
        plasmaBallsColor="#fff200"
        plasmaBallsStroke="#fff200"
        gooeyCircleSize={30}
        blendMode="overlay"
        className="absolute inset-0 mx-auto h-full w-full"
      />
      <HeroSection />
    </div>
  )
}

import { HeroSection } from "@/components/hero";

export function DemoOne() {
  return (
    <div className="relative flex min-h-svh w-full flex-col items-center justify-center overflow-hidden">
      <HeroSection />
    </div>
  );
}