Shadcn Blocks

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

  const navigationData: NavigationSection[] = [
    {
      title: 'About Us',
      href: '#'
    },
    {
      title: 'Testimonials',
      href: '#'
    },
    {
      title: 'Contact us',
      href: '#'
    },
    {
      title: 'Offers',
      href: '#'
    }
  ];

  const menudata = [
    {
      id: 1,
      img: '/blocks/bistro-18.webp',
      imgAlt: 'plate-1',
      userComment:
        'The ambiance is perfect and the food is absolutely delicious. Highly recommended!',
      userAvatar: '/avatars/56.webp'
    },
    {
      id: 2,
      img: '/blocks/bistro-19.webp',
      imgAlt: 'plate-2',
      userComment:
        'Best dining experience in town. The staff is friendly and the menu is exceptional.',
      userAvatar: '/avatars/46.webp'
    },
    {
      id: 3,
      img: '/blocks/bistro-20.webp',
      imgAlt: 'plate-3',
      userComment: 'Every dish is crafted with care. This place never disappoints!',
      userAvatar: '/avatars/57.webp'
    },
    {
      id: 4,
      img: '/blocks/bistro-05.webp',
      imgAlt: 'plate-4',
      userComment: 'Great atmosphere and incredible flavors. A must-visit restaurant!',
      userAvatar: '/avatars/58.webp'
    },
    {
      id: 5,
      img: '/blocks/bistro-20.webp',
      imgAlt: 'plate-3',
      userComment: 'Every dish is crafted with care. This place never disappoints!',
      userAvatar: '/avatars/57.webp'
    }
  ];
</script>

<div class="overflow-x-hidden">
  <Header {navigationData} />

  <main class="flex flex-col pt-17.5">
    <HeroSection {menudata} />
  </main>
</div>

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

  const navigationData: NavigationSection[] = [
    {
      title: 'Home',
      href: '#'
    },
    {
      title: 'Categories',
      href: '#'
    },
    {
      title: 'Team',
      href: '#'
    },
    {
      title: 'About Us',
      href: '#'
    }
  ];

  const blogdata = [
    {
      img: '/blocks/landing-page-02.webp',
      date: 'January 20, 2026',
      blogTitle: 'Build with Empathy for Better User Outcomes',
      description: 'Understand user needs to create intuitive and lovable experiences.',
      author: 'Allen Reilly',
      badge: 'UI',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    },
    {
      img: '/blocks/landing-page-03.webp',
      date: 'May 20, 2025',
      blogTitle: 'Write Code That Scales with Your Product',
      description: 'Structure your projects for easier updates, faster growth, and bugs.',
      author: 'Sara Wilkerson',
      badge: 'Coding',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    }
  ];
</script>

<div class="overflow-x-hidden">
  <Header {navigationData} />

  <main class="flex flex-col pt-17.5">
    <HeroSection {blogdata} />
  </main>
</div>

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

<CTA />

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

<CTA />

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

  const blogPosts = [
    {
      title: 'Design Smarter: How User Behavior Shapes Winning Products',
      description: 'Learn how to discover what users truly want and build with confidence.',
      imageUrl: '/blocks/landing-page-04.webp',
      imageAlt: 'Design workspace with color swatches',
      date: 'March 12, 2025',
      category: 'Product',
      author: 'Phillip Palmer',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    },
    {
      title: 'Nail Your First Launch: A Checklist for Product Debut Success',
      description: 'Avoid common launch traps and create excitement from day one.',
      imageUrl: '/blocks/landing-page-05.webp',
      imageAlt: 'Product launch analytics',
      date: 'January 20, 2025',
      category: 'Startup Growth',
      author: 'Michael Brown',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    },
    {
      title: 'Why Fast Apps Win: The Blueprint for Lightning-Quick Experiences',
      description: 'Explore proven strategies to boost speed and delight users every time.',
      imageUrl: '/blocks/landing-page-06.webp',
      imageAlt: 'Mobile app development',
      date: 'February 28, 2025',
      category: 'Product',
      author: 'Jane Smith',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    },
    {
      title: 'Scaling Design the Right Way with a Solid Component System',
      description: 'Build consistency, save time, and ship optimized UI every release.',
      imageUrl: '/blocks/landing-page-07.webp',
      imageAlt: 'Component design system',
      date: 'March 05, 2025',
      category: 'Design',
      author: 'Dylan Field',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    },
    {
      title: 'Product KPIs That Actually Matter And How to Track Them',
      description: 'Measure progress the right way to build momentum and stay focused.',
      imageUrl: '/blocks/landing-page-08.webp',
      imageAlt: 'Team analyzing KPIs',
      date: 'January 09, 2025',
      category: 'Design',
      author: 'Nina Rich',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    },
    {
      title: 'How AI-Driven Workflows Are Transforming Product Development',
      description: 'Discover smarter ways to ideate, design, and build using AI tools.',
      imageUrl: '/blocks/landing-page-09.webp',
      imageAlt: 'AI in product development',
      date: 'March 05, 2025',
      category: 'Startup Growth',
      author: 'Startup Growth',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    }
  ];
</script>

<Blog {blogPosts} />

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

  const blogPosts = [
    {
      title: 'Ship Faster with a Scalable UI Architecture',
      description:
        'Reduce tech debt, accelerate release cycles,  keep your product consistent you grow.',
      imageUrl: '/blocks/landing-page-04.webp',
      imageAlt: 'ship',
      date: 'May 23, 2025',
      category: 'Dev Productivity',
      author: 'Lea Potts',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    },
    {
      title: 'SEO Playbook for SaaS Products That Scale',
      description:
        'Turn search into compounding sign-ups with a strategy tailored for SaaS funnels.',
      imageUrl: '/blocks/landing-page-10.webp',
      imageAlt: 'Seo',
      date: 'May 15, 2025',
      category: 'SEO',
      author: 'Bella Craig',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    },
    {
      title: 'Automating Product Delivery with AI Workflows',
      description: 'Replace repetitive tasks with AI-powered and give teams more time to innovate.',
      imageUrl: '/blocks/landing-page-09.webp',
      imageAlt: 'AI',
      date: 'February 28, 2025',
      category: 'AI Automation',
      author: 'Noah Ortega',
      authorLink: '#',
      blogLink: '#',
      categoryLink: '#'
    }
  ];
</script>

<Blog {blogPosts} />

<script lang="ts">
  import TestimonialsComponent from '$lib/components/testimonials-18/testimonials-18.svelte';
  import type { TestimonialItem } from '$lib/components/testimonials-18/testimonials-18.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 FAQ from '$lib/components/faq-17/faq-17.svelte';

  const faqItems = [
    {
      question: 'What does your company do?',
      answer:
        "Our company specializes in delivering high-quality solutions that are tailored to meet the evolving needs of businesses and individuals. Whether it's a digital product, a creative service, or a custom solution."
    },
    {
      question: 'What services do you offer?',
      answer:
        'We offer a wide range of services including web development, graphic design, digital marketing, and custom software solutions. Our team works closely with clients to create personalized strategies that help them achieve their goals.'
    }
  ];
</script>

<FAQ {faqItems} />

<script lang="ts">
  import ProductList, { type ProductItem } from '$lib/components/product-list-01/product-list-01.svelte';

  const products: ProductItem[] = [
    {
      image: '/blocks/product-list-06.webp',
      imgAlt: 'Samsung Galaxy Watch 6',
      name: 'Samsung Galaxy Watch 6 Classic',
      price: 129,
      badges: ['Watch', 'Samsung']
    },
    {
      image: '/blocks/product-list-05.webp',
      imgAlt: 'Samsung Galaxy Watch 7',
      name: 'Samsung Galaxy Watch 7',
      price: 229,
      salePrice: 139,
      badges: ['Watch', 'Samsung']
    },
    {
      image: '/blocks/product-list-04.webp',
      imgAlt: 'Samsung Galaxy Watch Ultra',
      name: 'Samsung Galaxy Watch Ultra',
      price: 119,
      badges: ['Watch', 'Samsung']
    },
    {
      image: '/blocks/product-list-03.webp',
      imgAlt: 'Samsung Galaxy Watch 7',
      name: 'Samsung Galaxy Watch 7',
      price: 129,
      badges: ['Watch', 'Samsung']
    },
    {
      image: '/blocks/product-list-02.webp',
      imgAlt: 'Spigen Rugged Armor Pro',
      name: 'Spigen Rugged Armor Pro',
      price: 239,
      badges: ['Watch', 'Spigen']
    },
    {
      image: '/blocks/product-list-01.webp',
      imgAlt: 'Mosmoc Rugged No Gap',
      name: 'Mosmoc Rugged No Gap',
      price: 149,
      badges: ['Watch', 'Samsung']
    }
  ];
</script>

<ProductList {products} />