import React from "react"; import { cn } from "@/lib/utils"; import Image from "next/image"; import createGlobe from "cobe"; import { useEffect, useRef } from "react"; import { motion } from "framer-motion"; import { IconBrandYoutubeFilled } from "@tabler/icons-react"; import Link from "next/link"; export function FeaturesSectionWithBentoGrid() { const features = [ { title: "Track issues effectively", description: "Track and manage your project issues with ease using our intuitive interface.", skeleton: , className: "col-span-1 md:col-span-4 lg:col-span-4 border-b md:border-r dark:border-neutral-800", }, { title: "Capture pictures with AI", description: "Capture stunning photos effortlessly using our advanced AI technology.", skeleton: , className: "col-span-1 md:col-span-2 lg:col-span-2 border-b dark:border-neutral-800", }, { title: "Watch our AI on YouTube", description: "Whether its you or Tyler Durden, you can get to know about our product on YouTube", skeleton: , className: "col-span-1 md:col-span-3 lg:col-span-3 border-b md:border-r dark:border-neutral-800", }, { title: "Deploy in seconds", description: "With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.", skeleton: , className: "col-span-1 md:col-span-3 lg:col-span-3 border-b md:border-none", }, ]; return (

Packed with thousands of features

From Image generation to video generation, Everything AI has APIs for literally everything. It can even create this website copy for you.

{features.map((feature) => ( {feature.title} {feature.description}

{feature.skeleton}

))}

); } const FeatureCard = ({ children, className, }: { children?: React.ReactNode; className?: string; }) => { return (

{children}

); }; const FeatureTitle = ({ children }: { children?: React.ReactNode }) => { return (

{children}

); }; const FeatureDescription = ({ children }: { children?: React.ReactNode }) => { return (

{children}

); }; export const SkeletonOne = () => { return (

); }; export const SkeletonThree = () => { return (

); }; export const SkeletonTwo = () => { const images = [ "https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", "https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", "https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", "https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", "https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", ]; const imageVariants = { whileHover: { scale: 1.1, rotate: 0, zIndex: 100, }, whileTap: { scale: 1.1, rotate: 0, zIndex: 100, }, }; return (

{images.map((image, idx) => ( bali images

))}

{images.map((image, idx) => ( bali images

))}

); }; export const SkeletonFour = () => { return (

); }; export const Globe = ({ className }: { className?: string }) => { const canvasRef = useRef(null); useEffect(() => { let phi = 0; if (!canvasRef.current) return; const globe = createGlobe(canvasRef.current, { devicePixelRatio: 2, width: 600 * 2, height: 600 * 2, phi: 0, theta: 0, dark: 1, diffuse: 1.2, mapSamples: 16000, mapBrightness: 6, baseColor: [0.3, 0.3, 0.3], markerColor: [0.1, 0.8, 1], glowColor: [1, 1, 1], markers: [ { location: [37.7595, -122.4367], size: 0.03 }, { location: [40.7128, -74.006], size: 0.1 }, ], onRender: (state) => { state.phi = phi; phi += 0.01; }, }); return () => { globe.destroy(); }; }, []); return (