Shadcn Blocks

<script lang="ts">
  import Header, { type NavigationSection } from '$lib/components/hero-01/header.svelte';
  import HeroSection from '$lib/components/hero-01/hero-01.svelte';

  const navigationData: NavigationSection[] = [
    {
      title: 'Home',
      href: '#'
    },
    {
      title: 'Products',
      href: '#'
    },
    {
      title: 'About Us',
      href: '#'
    },
    {
      title: 'Contacts',
      href: '#'
    }
  ];
</script>

<div class="relative">
  <Header {navigationData} />

  <main class="flex flex-col">
    <HeroSection />
  </main>
</div>

<script lang="ts">
  import {
    SwatchBookIcon,
    SearchIcon,
    StarIcon,
    SmartphoneIcon,
    LockKeyholeIcon,
    ShieldBanIcon
  } from '@lucide/svelte';
  import Features from '$lib/components/features-01/features-01.svelte';

  const featuresList = [
    {
      icon: SwatchBookIcon,
      title: 'User-Friendly Interface',
      description:
        "Navigate effortlessly with our intuitive design, optimised for all devices. Enjoy a seamless experience whether you're on a computer or mobile.",
      cardBorderColor: 'border-primary/40 hover:border-primary',
      avatarTextColor: 'text-primary',
      avatarBgColor: 'bg-primary/10'
    },
    {
      icon: ShieldBanIcon,
      title: 'Secure Checkout',
      description:
        'Enjoy a safe shopping experience with multiple payment options and SSL encryption. Your personal and financial information is always protected.',
      cardBorderColor:
        'border-green-600/40 hover:border-green-600 dark:border-green-400/40 dark:hover:border-green-400',
      avatarTextColor: 'text-green-600 dark:text-green-400',
      avatarBgColor: 'bg-green-600/10 dark:bg-green-400/10'
    },
    {
      icon: SearchIcon,
      title: 'Advanced Search',
      description:
        'Find products quickly with advanced filters, sorting options, and suggestion. Save time and effortlessly locate exactly what you need with ease.',
      cardBorderColor:
        'border-amber-600/40 hover:border-amber-600 dark:border-amber-400/40 dark:hover:border-amber-400',
      avatarTextColor: 'text-amber-600 dark:text-amber-400',
      avatarBgColor: 'bg-amber-600/10 dark:bg-amber-400/10'
    },
    {
      icon: StarIcon,
      title: 'Customer Reviews and Ratings',
      description:
        'Make informed decisions with detailed product reviews and ratings from other buyers. Trust the experiences of fellow shoppers to guide choices.',
      cardBorderColor: 'border-destructive/40 hover:border-destructive',
      avatarTextColor: 'text-destructive',
      avatarBgColor: 'bg-destructive/10'
    },
    {
      icon: SmartphoneIcon,
      title: 'Mobile App Integration',
      description:
        'Enhance your shopping experience with our mobile app and push notifications. Stay updated on arrivals and exclusive offers directly on phone.',
      cardBorderColor:
        'border-sky-600/40 hover:border-sky-600 dark:border-sky-400/40 dark:hover:border-sky-400',
      avatarTextColor: 'text-sky-600 dark:text-sky-400',
      avatarBgColor: 'bg-sky-600/10 dark:bg-sky-400/10'
    },
    {
      icon: LockKeyholeIcon,
      title: 'Security Features',
      description:
        'Protect your data with fraud detection and two-factor authentication. Ensure a secure environment for all transactions and account activities.',
      cardBorderColor: 'border-primary/40 hover:border-primary',
      avatarTextColor: 'text-primary',
      avatarBgColor: 'bg-primary/10'
    }
  ];
</script>

<Features {featuresList} />

<script lang="ts">
  import Pricing from '$lib/components/pricing-01/pricing-01.svelte';

  const pricingData = [
    {
      id: 'starter',
      title: 'Starter',
      description: 'Ideal for crypto pros!',
      monthly: 99,
      annual: 999
    },
    {
      id: 'professional',
      title: 'Professional',
      description: 'Ideal for business owners.',
      monthly: 199,
      annual: 1999
    }
  ];
</script>

<Pricing {pricingData} />

<script lang="ts">
  import TestimonialsComponent from '$lib/components/testimonials-01/testimonials-01.svelte';
  import type { TestimonialItem } from '$lib/components/testimonials-01/testimonials-01.svelte';

  const testimonials: TestimonialItem[] = [
    {
      name: 'Craig Bator',
      role: 'CEO & Co Founder',
      company: 'Zendesk',
      avatar: '/avatars/01.webp',
      rating: 5,
      content:
        "I've been using shadcn/studio for a year now and it's made managing my finances so much easier and quick."
    },
    {
      name: 'Martin Dorwart',
      role: 'Product manager',
      company: 'Orbit',
      avatar: '/avatars/02.webp',
      rating: 4,
      content:
        "With shadcn/studio, I can easily track my investments and see how they're performing in real-time."
    },
    {
      name: 'Sarah Johnson',
      role: 'Lead Designer',
      company: 'Figma',
      avatar: '/avatars/03.webp',
      rating: 5,
      content:
        "The UI components are beautifully designed and incredibly easy to customize. It's transformed our design workflow."
    },
    {
      name: 'Alex Chen',
      role: 'Frontend Developer',
      company: 'Vercel',
      avatar: '/avatars/04.webp',
      rating: 4,
      content:
        'shadcn/studio has saved us countless hours in development. The component library is comprehensive and well-documented.'
    }
  ];
</script>

<TestimonialsComponent {testimonials} />

<script lang="ts">
  import SocialProof from '$lib/components/social-proof-01/social-proof-01.svelte';

  const features = [
    {
      title: 'Powerful Campaign Tracking & ROI Analysis',
      description: 'Track campaign performance and analyze return on investment'
    },
    {
      title: 'Customizable Reporting & Data Exportation',
      description: 'Create custom reports and export data easily'
    }
  ];
</script>

<SocialProof {features} />

<script lang="ts">
  import Portfolio from '$lib/components/portfolio-01/portfolio-01.svelte';

  const images: string[] = [
    '/blocks/portfolio-01.webp',
    '/blocks/portfolio-02.webp',
    '/blocks/portfolio-03.webp',
    '/blocks/portfolio-04.webp',
    '/blocks/portfolio-05.webp',
    '/blocks/portfolio-06.webp'
  ];
</script>

<Portfolio {images} />

<script lang="ts">
  import Team from '$lib/components/team-01/team-01.svelte';

  const teamMembers = [
    {
      image: '/blocks/team-01.webp',
      alt: 'Phillip Bothman',
      name: 'Phillip Bothman',
      role: 'Founder & CEO',
      description: 'A visionary leader driving innovation and collaboration.',
      socialLinks: {
        facebook: '#',
        twitter: '#',
        github: '#',
        instagram: '#'
      }
    },
    {
      image: '/blocks/team-02.webp',
      alt: 'James Kenter',
      name: 'James Kenter',
      role: 'Engineering Manager',
      description: 'Leading teams to build smart, scalable solutions.',
      socialLinks: {
        facebook: '#',
        twitter: '#',
        github: '#',
        instagram: '#'
      }
    },
    {
      image: '/blocks/team-03.webp',
      alt: 'Cristofer Kenter',
      name: 'Cristofer Kenter',
      role: 'Product Designer',
      description: 'Crafting intuitive and engaging user experiences.',
      socialLinks: {
        facebook: '#',
        twitter: '#',
        github: '#',
        instagram: '#'
      }
    },
    {
      image: '/blocks/team-04.webp',
      alt: 'Alena Lubin',
      name: 'Alena Lubin',
      role: 'Frontend Developer',
      description: 'Bringing designs to life with seamless interfaces.',
      socialLinks: {
        facebook: '#',
        twitter: '#',
        github: '#',
        instagram: '#'
      }
    },
    {
      image: '/blocks/team-05.webp',
      alt: 'Jayden Lipshultz',
      name: 'Jayden Lipshultz',
      role: 'Sales Lead',
      description: 'Driving business growth and strong client relationships.',
      socialLinks: {
        facebook: '#',
        twitter: '#',
        github: '#',
        instagram: '#'
      }
    },
    {
      image: '/blocks/team-06.webp',
      alt: 'Maria Donin',
      name: 'Maria Donin',
      role: 'Product Manager',
      description: 'Bridging business needs with impactful solutions.',
      socialLinks: {
        facebook: '#',
        twitter: '#',
        github: '#',
        instagram: '#'
      }
    },
    {
      image: '/blocks/team-07.webp',
      alt: 'Carter Saris',
      name: 'Carter Saris',
      role: 'UX Researcher',
      description: 'Uncovering insights to enhance user experiences.',
      socialLinks: {
        facebook: '#',
        twitter: '#',
        github: '#',
        instagram: '#'
      }
    },
    {
      image: '/blocks/team-08.webp',
      alt: 'Ahmad Donin',
      name: 'Ahmad Donin',
      role: 'Customer Success',
      description: 'Ensuring customer satisfaction and long-term success.',
      socialLinks: {
        facebook: '#',
        twitter: '#',
        github: '#',
        instagram: '#'
      }
    }
  ];
</script>

<Team {teamMembers} />

<script lang="ts">
  import CTA from '$lib/components/cta-01/cta-01.svelte';
</script>

<CTA />

<script lang="ts">
  import LogoCloud from '$lib/components/logo-cloud-01/logo-cloud-01.svelte';

  const logos = [
    {
      image: '/blocks/amazon.webp',
      alt: 'Amazon'
    },
    {
      image: '/blocks/hubspot.webp',
      alt: 'HubSpot'
    },
    {
      image: '/blocks/walmart.webp',
      alt: 'Walmart'
    },
    {
      image: '/blocks/microsoft.webp',
      alt: 'Microsoft'
    },
    {
      image: '/blocks/evernote.webp',
      alt: 'Evernote'
    },
    {
      image: '/blocks/paypal.webp',
      alt: 'PayPal'
    },
    {
      image: '/blocks/airbnb.webp',
      alt: 'Airbnb'
    },
    {
      image: '/blocks/adobe.webp',
      alt: 'Adobe'
    },
    {
      image: '/blocks/shopify.webp',
      alt: 'Shopify'
    },
    {
      image: '/blocks/huawei.webp',
      alt: 'Huawei'
    }
  ];
</script>

<LogoCloud {logos} />

<script lang="ts">
  import FAQ from '$lib/components/faq-01/faq-01.svelte';

  const faqItems = [
    {
      question: 'Do you charge for each upgrade?',
      answer:
        'Some upgrades are free, while others may have an additional cost, depending on the type of upgrade and your current plan. For specific pricing details, please check our pricing page or contact our support team.'
    },
    {
      question: 'Do I need to purchase a license for each website?',
      answer:
        'Yes, you need to purchase a separate license for each website where you plan to use our components. Each license is tied to a single domain and its subdomains. This ensures proper licensing compliance and helps us maintain and improve our products for all users.'
    },
    {
      question: 'What is regular license?',
      answer:
        'A regular license grants you the right to use our components on a single website or project. It includes access to all basic features, documentation, and standard support. This license is perfect for individual developers or small businesses working on a single project.'
    },
    {
      question: 'What is extended license?',
      answer:
        'An extended license provides additional rights and features beyond the regular license. It includes usage rights for multiple websites, priority support, access to premium components, and the ability to use components in commercial projects that you sell to end customers. Perfect for agencies and large enterprises.'
    }
  ];
</script>

<FAQ {faqItems} />

<script lang="ts">
  import Gallery from '$lib/components/gallery-01/gallery-01.svelte';

  const gallerySections = [
    {
      images: [
        {
          src: '/blocks/gallery-01.webp',
          alt: 'Coastal cliffs and ocean view'
        }
      ]
    },
    {
      type: 'grid',
      images: [
        {
          src: '/blocks/gallery-02.webp',
          alt: 'Silhouettes on beach'
        },
        {
          src: '/blocks/gallery-03.webp',
          alt: 'Snowy mountain peaks'
        },
        {
          src: '/blocks/gallery-04.webp',
          alt: 'Rolling green hills'
        },
        {
          src: '/blocks/gallery-05.webp',
          alt: 'Sunset landscape'
        }
      ]
    },
    {
      type: 'grid',
      images: [
        {
          src: '/blocks/gallery-06.webp',
          alt: 'Silhouettes on beach'
        },
        {
          src: '/blocks/gallery-07.webp',
          alt: 'Snowy mountain peaks'
        },
        {
          src: '/blocks/gallery-08.webp',
          alt: 'Rolling green hills'
        },
        {
          src: '/blocks/gallery-09.webp',
          alt: 'Sunset landscape'
        }
      ]
    },
    {
      images: [
        {
          src: '/blocks/gallery-10.webp',
          alt: 'Coastal cliffs and ocean view'
        }
      ]
    }
  ];
</script>

<Gallery sections={gallerySections} />

<script lang="ts">
  import Blog from '$lib/components/blog-01/blog-01.svelte';

  const blogCards = [
    {
      img: '/blocks/blog-01.webp',
      alt: 'Modern house',
      title: 'Laws of Transfer of Immovable Property',
      description:
        'Experience the charm of this lovely and cozy apartment, featuring warm decor and inviting spaces, perfect for relaxation and comfort, ideal for your next getaway.',
      blogLink: '#'
    },
    {
      img: '/blocks/blog-02.webp',
      alt: 'Traditional house',
      title: 'Thane Development Plan 2026 & Master Plan',
      description:
        'Discover a unique nook in the heart of the city, offering convenience and access to attractions. Stylishly designed, it provides a comfortable retreat.',
      blogLink: '#'
    },
    {
      img: '/blocks/blog-03.webp',
      alt: 'Modern house with pool',
      title: 'What is a Property Sale Agreement?',
      description:
        'Welcome to this charming independent house bedroom, featuring a spacious layout and cozy furnishings. Enjoy abundant natural light and peaceful.',
      blogLink: '#'
    }
  ];
</script>

<Blog {blogCards} />

<script lang="ts">
  import { MedalIcon, SparklesIcon, StarIcon, TargetIcon } from '@lucide/svelte';
  import AboutUs from '$lib/components/about-us-01/about-us-01.svelte';

  const stats = [
    {
      icon: SparklesIcon,
      value: '20+',
      description: 'Years of Experience'
    },
    {
      icon: TargetIcon,
      value: '70+',
      description: 'Successful Projects'
    },
    {
      icon: StarIcon,
      value: '550+',
      description: 'Customer Reviews'
    },
    {
      icon: MedalIcon,
      value: '25',
      description: 'Achieve Awards'
    }
  ];
</script>

<AboutUs {stats} />

<script lang="ts">
  import { Clock8Icon, MapPinIcon, BriefcaseBusinessIcon, PhoneIcon } from '@lucide/svelte';
  import ContactUs from '$lib/components/contact-us-01/contact-us-01.svelte';

  const contactInfo = [
    {
      title: 'Office Hours',
      icon: Clock8Icon,
      description: 'Monday-Friday\n8:00 am to 5:00 pm'
    },
    {
      title: 'Our Address',
      icon: MapPinIcon,
      description: '802 Perston Rd,Maine\n96812, USA'
    },
    {
      title: 'Office 2',
      icon: BriefcaseBusinessIcon,
      description: '802 Perston Rd,Maine\n96812, USA'
    },
    {
      title: 'Get in Touch',
      icon: PhoneIcon,
      description: '+1-316-888-9685\n+1-316-477-0169'
    }
  ];
</script>

<ContactUs {contactInfo} />

<script lang="ts">
  import Navbar from '$lib/components/navbar-01/navbar-01.svelte';

  const navigationData = [
    {
      title: 'Home',
      href: '#'
    },
    {
      title: 'Products',
      href: '#'
    },
    {
      title: 'About Us',
      href: '#'
    },
    {
      title: 'Contacts',
      href: '#'
    }
  ];
</script>

<div class="h-60">
  <Navbar {navigationData} />
</div>

<script lang="ts">
  import Footer from '$lib/components/footer-01/footer-01.svelte';
</script>

<Footer />

<script lang="ts">
  import Login from '$lib/components/login-01/login-01.svelte';
</script>

<Login />

<script lang="ts">
  import Register from '$lib/components/register-01/register-01.svelte';
</script>

<Register />

<script lang="ts">
  import ForgotPassword from '$lib/components/forgot-password-01/forgot-password-01.svelte';
</script>

<ForgotPassword />

<script lang="ts">
  import ResetPassword from '$lib/components/reset-password-01/reset-password-01.svelte';
</script>

<ResetPassword />

<script lang="ts">
  import VerifyEmail from '$lib/components/verify-email-01/verify-email-01.svelte';
</script>

<VerifyEmail />

<script lang="ts">
  import TwoFactorAuthentication from '$lib/components/two-factor-authentication-01/two-factor-authentication-01.svelte';
</script>

<TwoFactorAuthentication />

<script lang="ts">
  import AppIntegration from '$lib/components/app-integration-01/app-integration-01.svelte';

  const integrations = [
    {
      name: 'Microsoft',
      description: 'Empowering Innovation and Connectivity',
      image: '/blocks/microsoft-icon.webp',
      alt: 'Microsoft'
    },
    {
      name: 'Spotify',
      description: 'Your soundtrack to every moment.',
      image: '/blocks/spotify-icon.webp',
      alt: 'Spotify'
    },
    {
      name: 'Github',
      description: 'Your Hub for Open Source Innovation',
      image: '/blocks/github-icon.webp',
      alt: 'Github'
    }
  ];
</script>

<AppIntegration {integrations} />

<script lang="ts">
  import Error from '$lib/components/error-01/error-01.svelte';
</script>

<Error />