diff --git a/src/components/features-section-demo-1.tsx b/src/components/features-section-demo-1.tsx new file mode 100644 index 0000000..e1746e0 --- /dev/null +++ b/src/components/features-section-demo-1.tsx @@ -0,0 +1,139 @@ +import React from "react"; +import { useId } from "react"; + +export default function FeaturesSectionDemo() { + return ( +
+
+ {grid.map((feature) => ( +
+ +

+ {feature.title} +

+

+ {feature.description} +

+
+ ))} +
+
+ ); +} + +const grid = [ + { + title: "HIPAA and SOC2 Compliant", + description: + "Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.", + }, + { + title: "Automated Social Media Posting", + description: + "Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.", + }, + { + title: "Advanced Analytics", + description: + "Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.", + }, + { + title: "Content Calendar", + description: + "Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.", + }, + { + title: "Audience Targeting", + description: + "Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.", + }, + { + title: "Social Listening", + description: + "Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.", + }, + { + title: "Customizable Templates", + description: + "Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.", + }, + { + title: "Collaboration Tools", + description: + "Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.", + }, +]; + +export const Grid = ({ + pattern, + size, +}: { + pattern?: number[][]; + size?: number; +}) => { + const p = pattern ?? [ + [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1], + [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1], + [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1], + [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1], + [Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1], + ]; + return ( +
+
+ +
+
+ ); +}; + +export function GridPattern({ width, height, x, y, squares, ...props }: any) { + const patternId = useId(); + + return ( + + ); +} diff --git a/src/components/features-section-demo-2.tsx b/src/components/features-section-demo-2.tsx new file mode 100644 index 0000000..f32c4e8 --- /dev/null +++ b/src/components/features-section-demo-2.tsx @@ -0,0 +1,109 @@ +import { cn } from "@/lib/utils"; +import { + IconAdjustmentsBolt, + IconCloud, + IconCurrencyDollar, + IconEaseInOut, + IconHeart, + IconHelp, + IconRouteAltLeft, + IconTerminal2, +} from "@tabler/icons-react"; + +export default function FeaturesSectionDemo() { + const features = [ + { + title: "Built for developers", + description: + "Built for engineers, developers, dreamers, thinkers and doers.", + icon: , + }, + { + title: "Ease of use", + description: + "It's as easy as using an Apple, and as expensive as buying one.", + icon: , + }, + { + title: "Pricing like no other", + description: + "Our prices are best in the market. No cap, no lock, no credit card required.", + icon: , + }, + { + title: "100% Uptime guarantee", + description: "We just cannot be taken down by anyone.", + icon: , + }, + { + title: "Multi-tenant Architecture", + description: "You can simply share passwords instead of buying new seats", + icon: , + }, + { + title: "24/7 Customer Support", + description: + "We are available a 100% of the time. Atleast our AI Agents are.", + icon: , + }, + { + title: "Money back guarantee", + description: + "If you donot like EveryAI, we will convince you to like us.", + icon: , + }, + { + title: "And everything else", + description: "I just ran out of copy ideas. Accept my sincere apologies", + icon: , + }, + ]; + return ( +
+ {features.map((feature, index) => ( + + ))} +
+ ); +} + +const Feature = ({ + title, + description, + icon, + index, +}: { + title: string; + description: string; + icon: React.ReactNode; + index: number; +}) => { + return ( +
+ {index < 4 && ( +
+ )} + {index >= 4 && ( +
+ )} +
+ {icon} +
+
+
+ + {title} + +
+

+ {description} +

+
+ ); +}; diff --git a/src/components/features-section-demo-3.tsx b/src/components/features-section-demo-3.tsx new file mode 100644 index 0000000..15f43c1 --- /dev/null +++ b/src/components/features-section-demo-3.tsx @@ -0,0 +1,281 @@ +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 */} + + header +
+
+ + ); +}; + +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: 16000, + 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 ( + + ); +}; diff --git a/src/pages/home/CallToAction.tsx b/src/pages/home/CallToAction.tsx new file mode 100644 index 0000000..f812f67 --- /dev/null +++ b/src/pages/home/CallToAction.tsx @@ -0,0 +1,40 @@ +import { CircleBackground } from '../../components/CircleBackground' +import { Container } from '../../components/Container' +import { Button } from '../../components/Button' + +export function CallToAction() { + return ( +
+
+ +
+ +
+

+ Build the Future, Today +

+

+ Ready to reclaim your digital freedom? Start building on a cloud that’s autonomous, efficient, and truly yours. Explore the documentation or join our community to get started. +

+
+ + +
+
+ +
+ ) +} diff --git a/src/pages/home/HomeBenefits.tsx b/src/pages/home/HomeBenefits.tsx new file mode 100644 index 0000000..8dc3cca --- /dev/null +++ b/src/pages/home/HomeBenefits.tsx @@ -0,0 +1,284 @@ +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"; +import { LockClosedIcon, CogIcon, BoltIcon, CurrencyDollarIcon } from '@heroicons/react/24/solid' +import { H2, P } from '@/components/Texts' + + +export function HomeBenefits() { + const features = [ + { + title: "Sovereign", + description: + "Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.", + icon: , + className: + "col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800", + }, + { + title: "Autonomous", + description: + "The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.", + icon: , + className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800", + }, + { + title: "Energy Efficient", + description: + "Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.", + icon: , + className: + "col-span-1 lg:col-span-3 lg:border-r dark:border-neutral-800", + }, + { + title: "Cost Efficient", + description: + "No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.", + icon: , + className: "col-span-1 lg:col-span-3 border-b lg:border-none", + }, + ]; + return ( +
+
+

+ Why It Changes Everything +

+ +

+ Mycelium Cloud isn’t just another cloud — it’s a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise. +

+
+ +
+
+ {features.map((feature) => ( + + {feature.title} + {feature.description} + + ))} +
+
+
+ ); +} + +const FeatureCard = ({ + children, + className, +}: { + children?: React.ReactNode; + className?: string; +}) => { + return ( +
+ {children} +
+ ); +}; + +const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: React.ReactNode }) => { + return ( +
+ {icon} +

+ {children} +

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

+ {children} +

+ ); +}; + +export const SkeletonOne = () => { + return ( +
+
+
+ {/* TODO */} + header +
+
+ +
+
+
+ ); +}; + +export const SkeletonThree = () => { + return ( + +
+
+ {/* TODO */} + + header +
+
+ + ); +}; + +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: 16000, + 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 ( + + ); +}; diff --git a/src/pages/home/HomeFeaturesDark.tsx b/src/pages/home/HomeFeaturesDark.tsx index 713bcf0..8e06500 100644 --- a/src/pages/home/HomeFeaturesDark.tsx +++ b/src/pages/home/HomeFeaturesDark.tsx @@ -33,7 +33,7 @@ export function HomeFeaturesDark() {

- The Building Blocks of Decentralized Future + The Building Blocks of Decentralized Future

From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries. @@ -42,7 +42,7 @@ export function HomeFeaturesDark() {

{features.map((feature) => ( -
+
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index 8f3ef76..e2772f8 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -6,6 +6,8 @@ import { HomeCloud } from './HomeCloud' import { HomeAgent } from './HomeAgent' import { StackSectionLight } from './StackSection' import { WorldMap } from './HomeGlobe' +import { HomeBenefits } from './HomeBenefits' +import { CallToAction } from './CallToAction' export default function HomePage() { @@ -29,13 +31,12 @@ export default function HomePage() { - + - + -
) }