4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T2614,"use client"; import React from "react"; import { cn } from "@/lib/utils"; import createGlobe from "cobe"; import { useEffect, useRef } from "react"; import { motion } from "motion/react"; import { IconBrandYoutubeFilled } from "@tabler/icons-react"; export default function FeaturesSectionDemo() { const features = [ { title: "Track issues effectively", description: "Track and manage your project issues with ease using our intuitive interface.", skeleton: , className: "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800", }, { title: "Capture pictures with AI", description: "Capture stunning photos effortlessly using our advanced AI technology.", skeleton: , className: "border-b col-span-1 lg:col-span-2 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 lg:col-span-3 lg: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 lg:col-span-3 border-b lg: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 (

{/* TODO */} header

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

{/* TODO */}

); }; 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 (

{/* TODO */}

{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: 4000, mapBrightness: 6, baseColor: [0.3, 0.3, 0.3], markerColor: [0.1, 0.8, 1], glowColor: [1, 1, 1], markers: [ // longitude latitude { location: [37.7595, -122.4367], size: 0.03 }, { location: [40.7128, -74.006], size: 0.1 }, ], onRender: (state) => { // Called on every animation frame. // `state` will be an empty object, return updated params. state.phi = phi; phi += 0.01; }, }); return () => { globe.destroy(); }; }, []); return (

Features Section Demo 3

Installation

Files

components

Styles