Product Landing Page Template for Astro

---
import LandingPage from '@templates/LandingPage.astro'

const layout = {
    seo: { ... } // Your SEO configuration
    menu: { ... } // Menu configuration
    footer: { ... } // Footer configuration
}
---

<LandingPage
    layout={layout}
    hero={{ ... }} {/* Your hero section */}
    scrollBanner={{ ... }} {/* Your hero section */}
    testimonials={{ ... }} {/* Testimonials carousel displayed under the scroll banner */}
    features={{ ... }} {/* Feature tiles with an optional heading */}
    comparison={{ ... }} {/* Comparison table comparing product with other similar products */}
    pricingTable={{ ... }} {/* Pricing options */}
    testimonialAfterPricing={{ ... }} {/* Additional testimonial under the pricing table */}
    faq={{ ... }} {/* Your FAQ section */}
    ctaWithBackground={{ ... }} {/* Last call to action with a background image */}
>
    <span slot="faq" class="muted">
        Have another question? Contact us through our <a href="/contact">contact page</a>.
    </span>
</LandingPage>

---
import LandingPage from '@templates/LandingPage.astro'

// Your layout with SEO, including menu and footer
const layout = {
    seo: {
        title: 'Landing Page Template - Webcore',
        url: 'https://webcoreui.dev/',
        description: 'A customizable template for digital product landing pages.',
        faviconUrl: '/logo.svg',
        canonical: 'https://webcoreui.dev/',
        prefetchGTAG: true,
        prefetchGA: true,
        meta: [{ name: 'keywords', content: 'productivity app' }]
    },
    menu: {
        logo: {
            html: logo
        },
        items: [
            { name: 'Templates', href: '/templates' }
        ]
    },
    footer: {
        logo: {
            html: logo
        },
        columns: [
            {
                title: 'Product',
                items: [
                    { name: 'Features', href: '/features' },
                    { name: 'Pricing', href: '/pricing' }
                ]
            }
        ],
        subText: `© ${new Date().getFullYear()} Webcore. All Rights Reserved.`
    }
}

// Your hero section
const hero = {
    badge: {
        text: 'New Release',
        theme: 'info'
    },
    heading: 'Revolutionize Your Team Productivity',
    subHeading: 'Manage tasks, automate workflows, and collaborate in real-time',
    buttons: [{
        text: 'Start Free Trial',
        theme: 'success',
        icon: rocketIcon,
        href: '/start'
    }],
    image: {
        src: '/img/dashboard.webp',
        alt: 'Flowcore Dashboard',
        width: 1200,
        height: 350
    },
    avatarWithRating: {
        avatar: {
            img: [
                '/img/avatar0.webp',
                '/img/avatar1.webp',
                '/img/avatar2.webp',
                '/img/avatar3.webp',
                '/img/avatar4.webp'
            ]
        },
        rating: {
            score: 5,
            color: 'var(--w-color-warning)'
        },
        text: '<b>123 teams</b> already enrolled'
    }
}

// Scroll banner of logos under the hero section
const scrollBanner = {
    images: [{
        src: '/img/logos/company-logo.svg',
        alt: 'Company name',
        width: 125,
        height: 200
    }],
    animationSpeed: 50,
    stopOnHover: false
}

// Testimonials carousel displayed under the scroll banner
const testimonials = {
    showIcon: true,
    title: 'Loved by Teams Worldwide',
    subTitle: 'See what our users have to say',
    pagination: {
        type: 'dots'
    },
    testimonials: [{
        text: 'Flowcore transformed how our team manages projects.',
        name: 'Jessica L.',
        role: 'Project Manager',
        avatar: {
            img: '/img/jessica.webp',
            alt: 'Jessica L.'
        }
    }]
}

// Feature tiles with an optional heading
const features = {
    title: 'Supercharge Your Workflow',
    items: [{
        title: 'Task Management',
        description: 'Create, assign, and track tasks effortlessly.',
        secondary: true,
        img: {
            src: '/img/task-management.webp',
            alt: 'Task Management',
            width: 500,
            height: 300
        }
    }]
}

// Comparison table comparing product with other similar products
const comparison = {
    title: 'Compare Flowcore with Alternatives',
    headings: ['Feature', 'Flowcore', 'Competitor A', 'Competitor B'],
    data: [
        ['Unlimited Projects', true, false, false],
        ['Task Automation', true, true, false],
        ['Team Collaboration Tools', true, true, true],
        ['Custom Workflows', true, false, true],
        ['Advanced Analytics', true, false, false],
        ['Mobile App Access', true, true, true],
        ['Priority Support', true, false, true],
        ['Integrations (Slack, Google, etc.)', true, true, false],
        ['Free Plan Available', true, true, false],
        ['Dedicated Account Manager', 'Enterprise only', false, false]
    ],
    trueColor: 'var(--w-color-success)',
    falseColor: 'var(--w-color-alert)',
    alignment: 'center',
    striped: 'row',
    hover: true
}

// Pricing options
const pricingTable = {
    title: 'Simple & Transparent Pricing',
    options: [{
        title: 'Pro',
        price: '$15',
        period: 'per month',
        priceSubText: 'Billed monthly. Cancel anytime.',
        features: [
            'Unlimited Users',
            'Advanced Task Automation',
            'Priority Support',
            'Integrations'
        ],
        recommended: true,
        ribbon: {
            label: 'Most Popular',
            colorText: '#000',
            colorStart: '#ff7e5f',
            colorEnd: '#feb47b'
        },
        buttons: [{
            text: 'Start Pro Trial ->',
            href: '/start'
        }],
        glow: true,
        glowOptions: {
            startColor: '#ff7e5f',
            endColor: '#feb47b'
        }
    }]
}

// Additional single testimonial under the pricing table
const testimonialAfterPricing = {
    text: 'Upgrading to Flowcore Pro was the best decision we made.',
    name: 'Emily W.',
    role: 'Agency Owner',
    avatar: {
        img: '/img/emily.webp',
        alt: 'Emily W.',
        size: 50
    }
}

// Your FAQ section
const faq = {
    icon: 'plus',
    reverse: true,
    items: [{
        title: 'Can I try Flowcore for free?',
        content: 'Yes! Our Free plan allows you to explore core features without commitment.'
    }]
}

// Last call to action with a background image
const ctaWithBackground = {
    title: 'Ready to Transform Your Workflow?',
    subTitle: 'Join hundreds of teams already boosting productivity with Flowcore.',
    cta: {
        text: 'Start Your Free Trial ->',
        href: '#'
    },
    background: {
        src: '/img/team-collab.png',
        alt: 'Team Collaboration',
        width: 1920,
        height: 1080
    }
}
---

<LandingPage
    layout={layout}
    hero={hero}
    scrollBanner={scrollBanner}
    testimonials={testimonials}
    features={features}
    comparison={comparison}
    pricingTable={pricingTable}
    testimonialAfterPricing={testimonialAfterPricing}
    faq={faq}
    ctaWithBackground={ctaWithBackground}
/>

type LandingPageProps = {
    layout: LayoutProps
    hero: HeroProps
    scrollBanner?: ScrollBannerProps
    testimonials?: TestimonialsProps
    features?: { title?: string } & FeaturesGridProps
    comparison?: { title?: string } & ComparisonProps
    pricingTable: { title?: string } & PricingTableProps
    testimonialAfterPricing?: TestimonialProps
    faq?: FAQProps
    ctaWithBackground?: CtaWithBackgroundProps
    [key: string]: any
}