```blade




<section
    class="project-requirements-hero relative overflow-hidden"
    aria-labelledby="project-requirements-title"
>
    <div class="hero-background-image absolute inset-0"></div>
    <div class="hero-background-overlay absolute inset-0"></div>
    <div class="hero-grid-pattern absolute inset-0"></div>

    <div class="relative z-10 mx-auto max-w-7xl px-6 py-28 lg:px-8">
        <div class="mx-auto max-w-5xl text-center">

            <div class="mb-6 inline-flex items-center gap-2 rounded-full border border-red-400/30 bg-red-500/10 px-5 py-2 text-sm font-bold text-red-300 backdrop-blur-md">
                <svg
                    class="h-5 w-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h7.586a2 2 0 011.414.586l4.414 4.414A2 2 0 0121 9.414V19a2 2 0 01-2 2z"
                    />
                </svg>

                Project Requirements
            </div>

            

        </div>
    </div>
</section>




<section
    id="requirements-form"
    class="requirements-page-section py-16 sm:py-20"
>
    <div class="relative z-10 mx-auto max-w-6xl px-6 lg:px-8">

        <div class="mb-10 text-center">
            <span class="inline-flex items-center rounded-full border border-red-200 bg-red-50 px-4 py-2 text-sm font-bold uppercase tracking-widest text-red-600">
              Tell Us About<span class="hero-gradient-text"><b></b>Your Project</span>
            </h1>
            </span>

            <h2 class="mt-4 text-3xl font-black text-gray-900 sm:text-4xl">
                Complete Your Project Requirements
            </h2>

            <p class="mx-auto mt-4 max-w-3xl text-base leading-7 text-gray-600">
                Please provide as much information as possible. The more details
                you provide, the better we can understand and plan your project.
            </p>
        </div>

        
        <form
            method="POST"
            action="https://bwebdesignagency.com/client/projects/1/requirements"
            enctype="multipart/form-data"
            class="space-y-8"
            id="project-requirements-form"
        >
            <input type="hidden" name="_token" value="vB1L0XbV1bfFgfkuZrCtXZjh7tEnXFcoD7KFeNKo" autocomplete="off">
            <input
                type="hidden"
                name="action"
                id="form-action"
                value=""
            >

            

            <div class="requirements-card overflow-hidden rounded-3xl border">
                <div class="requirements-card-header border-b px-6 py-5 sm:px-8">
                    <h2 class="text-xl font-black text-gray-900">
                        1. Project Information
                    </h2>

                    <p class="mt-1 text-sm text-gray-600">
                        Tell us about the project you want us to build.
                    </p>
                </div>

                <div class="grid gap-6 p-6 sm:p-8">

                    <div>
                        <label for="project_name" class="form-label">
                            Project Name <span class="text-red-600">*</span>
                        </label>

                        <input
                            type="text"
                            id="project_name"
                            name="project_name"
                            value="web development"
                            class="form-input"
                            placeholder="e.g. My Business Website"
                            required
                        >
                    </div>

                    <div>
                        <label for="project_type" class="form-label">
                            Project Type <span class="text-red-600">*</span>
                        </label>

                        <select
                            id="project_type"
                            name="project_type"
                            class="form-input"
                            required
                        >
                            <option value="">Select project type</option>

                                                            <option
                                    value="New Website"
                                                                    >
                                    New Website
                                </option>
                                                            <option
                                    value="Website Redesign"
                                                                    >
                                    Website Redesign
                                </option>
                                                            <option
                                    value="E-commerce Website"
                                                                    >
                                    E-commerce Website
                                </option>
                                                            <option
                                    value="Business Website"
                                                                    >
                                    Business Website
                                </option>
                                                            <option
                                    value="Portfolio Website"
                                                                    >
                                    Portfolio Website
                                </option>
                                                            <option
                                    value="Blog / Magazine"
                                                                    >
                                    Blog / Magazine
                                </option>
                                                            <option
                                    value="Web Application"
                                                                    >
                                    Web Application
                                </option>
                                                            <option
                                    value="Other"
                                                                    >
                                    Other
                                </option>
                                                    </select>
                    </div>

                    <div>
                        <label for="project_description" class="form-label">
                            Project Description <span class="text-red-600">*</span>
                        </label>

                        <textarea
                            id="project_description"
                            name="project_description"
                            rows="5"
                            class="form-input"
                            placeholder="Describe the website or application you want us to create..."
                            required
                        ></textarea>
                    </div>

                    <div>
                        <label for="project_goals" class="form-label">
                            Project Goals <span class="text-red-600">*</span>
                        </label>

                        <textarea
                            id="project_goals"
                            name="project_goals"
                            rows="5"
                            class="form-input"
                            placeholder="What do you want this website to achieve?"
                            required
                        ></textarea>
                    </div>

                    <div>
                        <label for="target_audience" class="form-label">
                            Target Audience <span class="text-red-600">*</span>
                        </label>

                        <textarea
                            id="target_audience"
                            name="target_audience"
                            rows="4"
                            class="form-input"
                            placeholder="Who are your ideal customers or website visitors?"
                            required
                        ></textarea>
                    </div>

                </div>
            </div>


            

            <div class="requirements-card overflow-hidden rounded-3xl border">
                <div class="requirements-card-header border-b px-6 py-5 sm:px-8">
                    <h2 class="text-xl font-black text-gray-900">
                        2. Inspiration & References
                    </h2>

                    <p class="mt-1 text-sm text-gray-600">
                        Share websites or examples that match the direction you like.
                    </p>
                </div>

                <div class="grid gap-6 p-6 sm:p-8">

                    
                        <div>
                            <label for="inspiration_website_1" class="form-label">
                                Inspiration Website 1
                            </label>

                            <input
                                type="url"
                                id="inspiration_website_1"
                                name="inspiration_website_1"
                                value=""
                                class="form-input"
                                placeholder="https://example.com"
                            >
                        </div>

                    
                        <div>
                            <label for="inspiration_website_2" class="form-label">
                                Inspiration Website 2
                            </label>

                            <input
                                type="url"
                                id="inspiration_website_2"
                                name="inspiration_website_2"
                                value=""
                                class="form-input"
                                placeholder="https://example.com"
                            >
                        </div>

                    
                        <div>
                            <label for="inspiration_website_3" class="form-label">
                                Inspiration Website 3
                            </label>

                            <input
                                type="url"
                                id="inspiration_website_3"
                                name="inspiration_website_3"
                                value=""
                                class="form-input"
                                placeholder="https://example.com"
                            >
                        </div>

                    
                    <div>
                        <label for="inspiration_likes" class="form-label">
                            What Do You Like About These Websites?
                        </label>

                        <textarea
                            id="inspiration_likes"
                            name="inspiration_likes"
                            rows="5"
                            class="form-input"
                            placeholder="Tell us what you like about the examples you provided..."
                        ></textarea>
                    </div>

                </div>
            </div>


            

            <div class="requirements-card overflow-hidden rounded-3xl border">
                <div class="requirements-card-header border-b px-6 py-5 sm:px-8">
                    <h2 class="text-xl font-black text-gray-900">
                        3. Design Preferences
                    </h2>

                    <p class="mt-1 text-sm text-gray-600">
                        Help us understand your preferred visual style.
                    </p>
                </div>

                <div class="grid gap-6 p-6 sm:p-8 lg:grid-cols-2">

                    <div>
                        <label for="primary_color" class="form-label">
                            Primary Color
                        </label>

                        <input
                            type="text"
                            id="primary_color"
                            name="primary_color"
                            value=""
                            class="form-input"
                            placeholder="e.g. Red, #E11D48"
                        >
                    </div>

                    <div>
                        <label for="secondary_color" class="form-label">
                            Secondary Color
                        </label>

                        <input
                            type="text"
                            id="secondary_color"
                            name="secondary_color"
                            value=""
                            class="form-input"
                            placeholder="e.g. Black, #111827"
                        >
                    </div>

                    <div>
                        <label for="colors_to_avoid" class="form-label">
                            Colors to Avoid
                        </label>

                        <input
                            type="text"
                            id="colors_to_avoid"
                            name="colors_to_avoid"
                            value=""
                            class="form-input"
                            placeholder="Colors you do not want used"
                        >
                    </div>

                    <div>
                        <label for="design_theme" class="form-label">
                            Design Theme
                        </label>

                        <select
                            id="design_theme"
                            name="design_theme"
                            class="form-input"
                        >
                            <option value="">Select theme</option>

                                                            <option
                                    value="Light"
                                                                    >
                                    Light
                                </option>
                                                            <option
                                    value="Dark"
                                                                    >
                                    Dark
                                </option>
                                                            <option
                                    value="Light and Dark"
                                                                    >
                                    Light and Dark
                                </option>
                                                            <option
                                    value="No Preference"
                                                                    >
                                    No Preference
                                </option>
                                                    </select>
                    </div>

                    <div>
                        <label for="design_style" class="form-label">
                            Design Style
                        </label>

                        <select
                            id="design_style"
                            name="design_style"
                            class="form-input"
                        >
                            <option value="">Select style</option>

                                                            <option
                                    value="Modern"
                                                                    >
                                    Modern
                                </option>
                                                            <option
                                    value="Luxury"
                                                                    >
                                    Luxury
                                </option>
                                                            <option
                                    value="Corporate"
                                                                    >
                                    Corporate
                                </option>
                                                            <option
                                    value="Minimalist"
                                                                    >
                                    Minimalist
                                </option>
                                                            <option
                                    value="Creative"
                                                                    >
                                    Creative
                                </option>
                                                            <option
                                    value="Elegant"
                                                                    >
                                    Elegant
                                </option>
                                                            <option
                                    value="Professional"
                                                                    >
                                    Professional
                                </option>
                                                            <option
                                    value="Bold"
                                                                    >
                                    Bold
                                </option>
                                                            <option
                                    value="Simple"
                                                                    >
                                    Simple
                                </option>
                                                            <option
                                    value="Other"
                                                                    >
                                    Other
                                </option>
                                                    </select>
                    </div>

                    <div>
                        <label for="font_preference" class="form-label">
                            Font Preference
                        </label>

                        <input
                            type="text"
                            id="font_preference"
                            name="font_preference"
                            value=""
                            class="form-input"
                            placeholder="e.g. Modern sans-serif, elegant serif"
                        >
                    </div>

                    <div class="lg:col-span-2">
                        <label for="design_description" class="form-label">
                            Design Description
                        </label>

                        <textarea
                            id="design_description"
                            name="design_description"
                            rows="5"
                            class="form-input"
                            placeholder="Describe the overall design you have in mind..."
                        ></textarea>
                    </div>

                </div>
            </div>


            

            <div class="requirements-card overflow-hidden rounded-3xl border">
                <div class="requirements-card-header border-b px-6 py-5 sm:px-8">
                    <h2 class="text-xl font-black text-gray-900">
                        4. Required Pages
                    </h2>

                    <p class="mt-1 text-sm text-gray-600">
                        Select all pages you want included in the website.
                    </p>
                </div>

                <div class="p-6 sm:p-8">

                    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Home"
                                                                    >

                                <span>Home</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="About Us"
                                                                    >

                                <span>About Us</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Services"
                                                                    >

                                <span>Services</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Products"
                                                                    >

                                <span>Products</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Portfolio"
                                                                    >

                                <span>Portfolio</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Blog"
                                                                    >

                                <span>Blog</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="FAQ"
                                                                    >

                                <span>FAQ</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Testimonials"
                                                                    >

                                <span>Testimonials</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Contact"
                                                                    >

                                <span>Contact</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Pricing"
                                                                    >

                                <span>Pricing</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Booking"
                                                                    >

                                <span>Booking</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Gallery"
                                                                    >

                                <span>Gallery</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Team"
                                                                    >

                                <span>Team</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Careers"
                                                                    >

                                <span>Careers</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Privacy Policy"
                                                                    >

                                <span>Privacy Policy</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Terms &amp; Conditions"
                                                                    >

                                <span>Terms &amp; Conditions</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_pages[]"
                                    value="Other"
                                                                    >

                                <span>Other</span>
                            </label>

                        
                    </div>

                    <div class="mt-6">
                        <label for="other_pages" class="form-label">
                            Other Pages
                        </label>

                        <textarea
                            id="other_pages"
                            name="other_pages"
                            rows="3"
                            class="form-input"
                            placeholder="List any additional pages..."
                        ></textarea>
                    </div>

                </div>
            </div>


            

            <div class="requirements-card overflow-hidden rounded-3xl border">
                <div class="requirements-card-header border-b px-6 py-5 sm:px-8">
                    <h2 class="text-xl font-black text-gray-900">
                        5. Required Features
                    </h2>

                    <p class="mt-1 text-sm text-gray-600">
                        Select the features and functionality your project needs.
                    </p>
                </div>

                <div class="p-6 sm:p-8">

                    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Contact Form"
                                                                    >

                                <span>Contact Form</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="WhatsApp Integration"
                                                                    >

                                <span>WhatsApp Integration</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Online Booking"
                                                                    >

                                <span>Online Booking</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Payment System"
                                                                    >

                                <span>Payment System</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="E-commerce"
                                                                    >

                                <span>E-commerce</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Shopping Cart"
                                                                    >

                                <span>Shopping Cart</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Customer Accounts"
                                                                    >

                                <span>Customer Accounts</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Blog"
                                                                    >

                                <span>Blog</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Newsletter"
                                                                    >

                                <span>Newsletter</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Search"
                                                                    >

                                <span>Search</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Membership"
                                                                    >

                                <span>Membership</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Appointment System"
                                                                    >

                                <span>Appointment System</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Live Chat"
                                                                    >

                                <span>Live Chat</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Google Maps"
                                                                    >

                                <span>Google Maps</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Social Media Integration"
                                                                    >

                                <span>Social Media Integration</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Reviews &amp; Testimonials"
                                                                    >

                                <span>Reviews &amp; Testimonials</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Admin Dashboard"
                                                                    >

                                <span>Admin Dashboard</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="API Integration"
                                                                    >

                                <span>API Integration</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Multi-language"
                                                                    >

                                <span>Multi-language</span>
                            </label>

                        
                            <label class="checkbox-card">
                                <input
                                    type="checkbox"
                                    name="required_features[]"
                                    value="Other"
                                                                    >

                                <span>Other</span>
                            </label>

                        
                    </div>

                    <div class="mt-6">
                        <label for="special_features" class="form-label">
                            Special Features / Additional Functionality
                        </label>

                        <textarea
                            id="special_features"
                            name="special_features"
                            rows="4"
                            class="form-input"
                            placeholder="Describe any special functionality you require..."
                        ></textarea>
                    </div>

                </div>
            </div>


            

            <div class="requirements-card overflow-hidden rounded-3xl border">
                <div class="requirements-card-header border-b px-6 py-5 sm:px-8">
                    <h2 class="text-xl font-black text-gray-900">
                        6. Business Information
                    </h2>

                    <p class="mt-1 text-sm text-gray-600">
                        Provide the business information that should appear on your website.
                    </p>
                </div>

                <div class="grid gap-6 p-6 sm:p-8 lg:grid-cols-2">

                    <div>
                        <label for="business_name" class="form-label">
                            Business Name <span class="text-red-600">*</span>
                        </label>

                        <input
                            type="text"
                            id="business_name"
                            name="business_name"
                            value=""
                            class="form-input"
                            placeholder="Your business or company name"
                            required
                        >
                    </div>

                    <div>
                        <label for="tagline" class="form-label">
                            Tagline
                        </label>

                        <input
                            type="text"
                            id="tagline"
                            name="tagline"
                            value=""
                            class="form-input"
                            placeholder="Your business tagline"
                        >
                    </div>

                    <div class="lg:col-span-2">
                        <label for="about_content" class="form-label">
                            About Content
                        </label>

                        <textarea
                            id="about_content"
                            name="about_content"
                            rows="5"
                            class="form-input"
                            placeholder="Provide information about your business, company history, values, mission, etc."
                        ></textarea>
                    </div>

                    <div class="lg:col-span-2">
                        <label for="services_content" class="form-label">
                            Services Content
                        </label>

                        <textarea
                            id="services_content"
                            name="services_content"
                            rows="5"
                            class="form-input"
                            placeholder="List and describe the services your business provides..."
                        ></textarea>
                    </div>

                    <div class="lg:col-span-2">
                        <label for="products_content" class="form-label">
                            Products Content
                        </label>

                        <textarea
                            id="products_content"
                            name="products_content"
                            rows="5"
                            class="form-input"
                            placeholder="List and describe your products, if applicable..."
                        ></textarea>
                    </div>

                    <div>
                        <label for="contact_information" class="form-label">
                            Contact Information <span class="text-red-600">*</span>
                        </label>

                        <textarea
                            id="contact_information"
                            name="contact_information"
                            rows="5"
                            class="form-input"
                            placeholder="Phone number, email, address and other contact details"
                            required
                        ></textarea>
                    </div>

                    <div>
                        <label for="social_media_accounts" class="form-label">
                            Social Media Accounts
                        </label>

                        <textarea
                            id="social_media_accounts"
                            name="social_media_accounts"
                            rows="5"
                            class="form-input"
                            placeholder="Facebook, Instagram, TikTok, LinkedIn, X, YouTube, etc."
                        ></textarea>
                    </div>

                    <div class="lg:col-span-2">
                        <label for="business_hours" class="form-label">
                            Business Hours
                        </label>

                        <textarea
                            id="business_hours"
                            name="business_hours"
                            rows="4"
                            class="form-input"
                            placeholder="e.g. Monday - Friday: 8:00 AM - 5:00 PM"
                        ></textarea>
                    </div>

                </div>
            </div>


            

            <div class="requirements-card overflow-hidden rounded-3xl border">
                <div class="requirements-card-header border-b px-6 py-5 sm:px-8">
                    <h2 class="text-xl font-black text-gray-900">
                        7. Vision & Additional Instructions
                    </h2>

                    <p class="mt-1 text-sm text-gray-600">
                        Share anything else that can help us understand your vision.
                    </p>
                </div>

                <div class="grid gap-6 p-6 sm:p-8">

                    <div>
                        <label for="website_vision" class="form-label">
                            Website Vision
                        </label>

                        <textarea
                            id="website_vision"
                            name="website_vision"
                            rows="6"
                            class="form-input"
                            placeholder="Describe how you want visitors to feel and what you want them to do when they visit the website..."
                        ></textarea>
                    </div>

                    <div>
                        <label for="additional_instructions" class="form-label">
                            Additional Instructions
                        </label>

                        <textarea
                            id="additional_instructions"
                            name="additional_instructions"
                            rows="6"
                            class="form-input"
                            placeholder="Add any other information, instructions or requirements..."
                        ></textarea>
                    </div>

                </div>
            </div>


            

            <div class="requirements-card overflow-hidden rounded-3xl border">
                <div class="requirements-card-header border-b px-6 py-5 sm:px-8">
                    <h2 class="text-xl font-black text-gray-900">
                        8. Project Files
                    </h2>

                    <p class="mt-1 text-sm text-gray-600">
                        Upload logos, brand guidelines, screenshots, images, PDFs,
                        documents, videos and other project materials.
                    </p>
                </div>

                <div class="p-6 sm:p-8">

                    <div
                        id="file-upload-list"
                        class="space-y-6"
                    >

                        <div class="file-upload-item rounded-2xl border p-5">

                            <div class="mb-5 flex items-center justify-between gap-4">
                                <div>
                                    <h3 class="font-bold text-gray-900">
                                        Project File
                                    </h3>

                                    <p class="mt-1 text-sm text-gray-500">
                                        Maximum file size: 50 MB
                                    </p>
                                </div>

                                <button
                                    type="button"
                                    class="remove-file hidden rounded-lg px-3 py-2 text-sm font-semibold text-red-600 transition hover:bg-red-50"
                                >
                                    Remove
                                </button>
                            </div>

                            <div class="grid gap-5 lg:grid-cols-2">

                                <div class="lg:col-span-2">
                                    <label class="form-label">
                                        Select File
                                    </label>

                                    <input
                                        type="file"
                                        name="files[]"
                                        class="file-input block w-full rounded-xl border border-gray-300 bg-white text-sm text-gray-700 file:mr-4 file:border-0 file:bg-red-600 file:px-5 file:py-3 file:font-semibold file:text-white hover:file:bg-red-700"
                                        accept=".jpg,.jpeg,.png,.gif,.webp,.svg,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar,.mp4,.webm,.mov"
                                    >
                                </div>

                                <div>
                                    <label class="form-label">
                                        File Category
                                    </label>

                                    <select
                                        name="file_categories[]"
                                        class="form-input"
                                    >
                                        <option value="">Select category</option>
                                        <option value="Logo">Logo</option>
                                        <option value="Brand Guidelines">Brand Guidelines</option>
                                        <option value="Images">Images</option>
                                        <option value="Content">Content</option>
                                        <option value="Reference">Reference</option>
                                        <option value="Document">Document</option>
                                        <option value="Design">Design</option>
                                        <option value="Video">Video</option>
                                        <option value="Other">Other</option>
                                    </select>
                                </div>

                                <div>
                                    <label class="form-label">
                                        File Title
                                    </label>

                                    <input
                                        type="text"
                                        name="file_titles[]"
                                        class="form-input"
                                        placeholder="e.g. Company Logo"
                                    >
                                </div>

                                <div class="lg:col-span-2">
                                    <label class="form-label">
                                        File Description
                                    </label>

                                    <textarea
                                        name="file_descriptions[]"
                                        rows="3"
                                        class="form-input"
                                        placeholder="Briefly explain what this file is for..."
                                    ></textarea>
                                </div>

                            </div>
                        </div>

                    </div>

                    <div class="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">

                        <button
                            type="button"
                            id="add-file"
                            class="inline-flex items-center justify-center gap-2 rounded-xl border border-gray-300 bg-white px-5 py-3 font-bold text-gray-800 transition hover:border-red-300 hover:bg-red-50 hover:text-red-700"
                        >
                            <svg
                                class="h-5 w-5"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M12 4v16m8-8H4"
                                />
                            </svg>

                            Add Another File
                        </button>

                        <p
                            id="file-count-message"
                            class="text-sm text-gray-500"
                        >
                            1 file upload field added. You can upload up to 20 files.
                        </p>

                    </div>

                    <div class="mt-6 rounded-2xl border border-blue-200 bg-blue-50 p-5">
                        <div class="flex items-start gap-3">

                            <svg
                                class="mt-0.5 h-5 w-5 flex-shrink-0 text-blue-600"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                      
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>
        Project Requirements Form | BWeb Design Agency    </title>

    <meta
        name="description"
        content="Complete your website project requirements and provide the information needed to build your project."
    >

    <meta name="robots" content="index, follow">

    <link rel="canonical" href="https://bwebdesignagency.com/client/projects/1/requirements">


    <!-- Open Graph -->

    <meta
        property="og:title"
        content="Project Requirements Form | BWeb Design Agency"
    >

    <meta
        property="og:description"
        content="Complete your website project requirements and provide the information needed to build your project."
    >

    <meta property="og:type" content="website">

    <meta property="og:url" content="https://bwebdesignagency.com/client/projects/1/requirements">


    <!-- Twitter -->

    <meta name="twitter:card" content="summary_large_image">

    <meta
        property="twitter:title"
        content="Project Requirements Form | BWeb Design Agency"
    >

    <meta
        property="twitter:description"
        content="Complete your website project requirements and provide the information needed to build your project."
    >


    <!-- Favicon -->

    <link
        rel="icon"
        href="https://bwebdesignagency.com/static/img/website-designer-nigeria-logo9.png"
        type="image/x-icon"
    >


    <!-- Fonts -->

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link
        rel="preconnect"
        href="https://fonts.gstatic.com"
        crossorigin
    >

    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet"
    >


    <!-- CSS -->

    <link
        href="https://bwebdesignagency.com/static/css/tailwind.min.css"
        rel="stylesheet"
    >

    <link
        href="https://bwebdesignagency.com/static/lib/animate/animate.min.css"
        rel="stylesheet"
    >

    <link
        href="https://bwebdesignagency.com/static/lib/owlcarousel/assets/owl.carousel.min.css"
        rel="stylesheet"
    >

    <link
        href="https://bwebdesignagency.com/static/lib/owlcarousel/assets/owl.theme.default.min.css"
        rel="stylesheet"
    >

    <link
        href="https://bwebdesignagency.com/static/lib/lightbox/css/lightbox.min.css"
        rel="stylesheet"
    >

    <link
        href="https://bwebdesignagency.com/static/css/style.css"
        rel="stylesheet"
    >

    <link
        href="https://bwebdesignagency.com/static/css/modern-styles.css"
        rel="stylesheet"
    >


    <!-- Font Awesome -->

    <script
        src="https://kit.fontawesome.com/955d8bdaab.js"
        crossorigin="anonymous"
        defer>
    </script>


    <!-- =====================================================
         HEADER / NAVIGATION CSS
    ====================================================== -->

    <style>

        html {
            scroll-behavior: smooth;
        }


        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            background: #ffffff;
            color: #111827;
        }


        /* =====================================================
           HEADER
        ====================================================== */

        #navbar {

            position: fixed;

            top: 0;
            left: 0;
            right: 0;

            width: 100%;

            z-index: 1001;

            background: #ffffff;

        }


        .water-flow-header {

            min-height: 80px;

            background: #ffffff !important;

            border-bottom: 1px solid #f1f1f1;

            box-shadow:
                0 2px 10px rgba(0, 0, 0, 0.05);

        }


        /* =====================================================
           HEADER CONTAINER
        ====================================================== */

        .site-header-container {

            width: 100%;

            max-width: 1280px;

            margin-left: auto;
            margin-right: auto;

            padding-left: 24px;
            padding-right: 24px;

        }


        .site-header-row {

            min-height: 80px;

            display: flex;

            align-items: center;

            justify-content: space-between;

        }


        /* =====================================================
           LOGO
        ====================================================== */

        .site-logo {

            flex: 0 0 auto;

            display: flex;

            align-items: center;

        }


        .site-logo a {

            display: inline-flex;

            align-items: center;

            text-decoration: none;

        }


        .site-logo img {

            display: block;

            height: 56px;

            width: auto;

        }


        /* =====================================================
           DESKTOP NAVIGATION
        ====================================================== */

        .main-navigation {

            margin-left: auto;

            display: flex;

            align-items: center;

            justify-content: flex-end;

            flex-wrap: nowrap;

            white-space: nowrap;

        }


        .main-navigation > a,
        .main-navigation > .services-wrapper,
        .main-navigation > .header-button-wrapper {

            flex: 0 0 auto;

        }


        .main-navigation {

            column-gap: 34px;

        }


        .main-navigation a.nav-link {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            color: #000000 !important;

            font-size: 15px;

            font-weight: 600;

            line-height: 1;

            text-decoration: none;

            white-space: nowrap;

            transition:
                color 0.25s ease,
                transform 0.25s ease;

        }


        .main-navigation a.nav-link:hover {

            color: #dc2626 !important;

        }


        /* =====================================================
           SERVICES
        ====================================================== */

        .services-wrapper {

            position: relative;

        }


        .services-link {

            display: inline-flex !important;

            align-items: center;

            gap: 6px;

        }


        .services-link i {

            font-size: 9px;

            opacity: .55;

        }


        .services-dropdown {

            position: absolute;

            top: calc(100% + 18px);

            left: 50%;

            width: 365px;

            max-height: 72vh;

            overflow-y: auto;

            padding: 8px;

            background: #ffffff;

            border: 1px solid #eeeeee;

            border-radius: 13px;

            box-shadow:
                0 20px 45px rgba(0, 0, 0, 0.15);

            opacity: 0;

            visibility: hidden;

            pointer-events: none;

            transform:
                translateX(-50%)
                translateY(8px);

            transition:
                opacity .2s ease,
                visibility .2s ease,
                transform .2s ease;

        }


        .services-wrapper:hover .services-dropdown,
        .services-wrapper:focus-within .services-dropdown {

            opacity: 1;

            visibility: visible;

            pointer-events: auto;

            transform:
                translateX(-50%)
                translateY(0);

        }


        .services-dropdown a {

            display: block;

            padding: 10px 12px;

            color: #111827;

            text-decoration: none;

            border-radius: 8px;

            font-size: 13px;

            line-height: 1.35;

            transition:
                background-color .2s ease,
                color .2s ease;

        }


        .services-dropdown a:hover {

            background: #fef2f2;

            color: #dc2626;

        }


        .services-dropdown strong {

            display: block;

            font-size: 13px;

            font-weight: 700;

        }


        .services-dropdown small {

            display: block;

            margin-top: 2px;

            color: #6b7280;

            font-size: 11px;

        }


        .services-heading {

            padding: 9px 12px 5px;

            color: #9ca3af;

            font-size: 9px;

            font-weight: 800;

            letter-spacing: 1px;

        }


        .services-divider {

            height: 1px;

            margin: 6px 4px;

            background: #eeeeee;

        }


        /* =====================================================
           HEADER CTA
        ====================================================== */

        .header-button-wrapper {

            margin-left: 4px;

        }


        .header-cta {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-width: 118px;

            padding: 11px 20px;

            border-radius: 999px;

            background: #dc2626;

            color: #ffffff !important;

            font-size: 14px;

            font-weight: 700;

            line-height: 1;

            text-decoration: none;

            white-space: nowrap;

            transition:
                background .25s ease,
                transform .25s ease;

        }


        .header-cta:hover {

            background: #000000;

            color: #ffffff !important;

            transform: translateY(-1px);

        }


        /* =====================================================
           PAGE CONTENT
        ====================================================== */

        main {

            padding-top: 0 !important;

            margin-top: 0 !important;

        }


        main > *:first-child {

            margin-top: 80px !important;

        }


        /* =====================================================
           MOBILE
        ====================================================== */

        .mobile-toggle-wrapper {

            display: none;

        }


        #mobile-menu {

            max-height:
                calc(100vh - 80px);

            overflow-y: auto;

            background: #ffffff;

            border-top: 1px solid #eeeeee;

        }


        .mobile-menu-link {

            display: block;

            padding: 13px 0;

            color: #111827;

            font-size: 16px;

            font-weight: 600;

            text-decoration: none;

            border-bottom: 1px solid #eeeeee;

        }


        .mobile-menu-link:hover {

            color: #dc2626;

        }

        .mobile-resources-toggle {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            text-align: left;
            font-family: inherit;
            background: transparent;
            border-top: 0;
            border-left: 0;
            border-right: 0;
            cursor: pointer;
        }

        .mobile-resource-arrow {
            margin-right: 5px;
            transition: transform .25s ease;
        }

        .mobile-resources-menu {
            padding: 4px 0 8px 14px;
            background: #f9fafb;
            border-bottom: 1px solid #eeeeee;
        }

        .mobile-resource-link {
            display: block;
            padding: 10px 12px;
            color: #374151;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            border-bottom: 1px solid #f0f0f0;
        }

        .mobile-resource-link:last-child {
            border-bottom: 0;
        }

        .mobile-resource-link:hover {
            color: #dc2626;
        }


        .mobile-service-link {

            display: block;

            padding: 8px 0 8px 15px;

            color: #374151;

            font-size: 14px;

            text-decoration: none;

        }


        .mobile-service-link:hover {

            color: #dc2626;

        }


        .mobile-service-heading {

            padding: 12px 0 5px 15px;

            color: #dc2626;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 1px;

            text-transform: uppercase;

        }


        /* =====================================================
           MOBILE ADDITIONAL SERVICES DROPDOWN
        ====================================================== */

        .mobile-additional-toggle {

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 12px 0 8px 15px;

            background: transparent;

            border: 0;

            color: #dc2626;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 1px;

            text-transform: uppercase;

            cursor: pointer;

            text-align: left;

        }


        .mobile-additional-arrow {

            margin-right: 5px;

            transition: transform .25s ease;

        }


        .mobile-additional-menu {

            padding-left: 0;

        }


        /* =====================================================
           FOOTER
        ====================================================== */

        .footer-link {

            color: #d1d5db;

            text-decoration: none;

            transition: color .2s ease;

        }


        .footer-link:hover {

            color: #ffffff;

        }


        /* =====================================================
           FOOTER ADDITIONAL SERVICES
        ====================================================== */

        .footer-additional-toggle {

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0;

            background: transparent;

            border: 0;

            color: #d1d5db;

            font-size: inherit;

            font-family: inherit;

            cursor: pointer;

            text-align: left;

        }


        .footer-additional-toggle:hover {

            color: #ffffff;

        }


        .footer-additional-arrow {

            margin-left: 8px;

            font-size: 10px;

            transition: transform .25s ease;

        }


        .footer-additional-menu {

            margin-top: 8px;

            padding-left: 12px;

            border-left: 1px solid #4b5563;

        }


        .footer-additional-menu.hidden {

            display: none;

        }


        /* =====================================================
           LOGO ANIMATION
        ====================================================== */

        @keyframes gentle-bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }

        }


        .animate-gentle-bounce {

            animation:
                gentle-bounce 3s
                infinite
                ease-in-out;

        }


        /* =====================================================
           TABLET / SMALL DESKTOP
        ====================================================== */

        @media (max-width: 1150px) {

            .site-header-container {

                padding-left: 20px;
                padding-right: 20px;

            }


            .main-navigation {

                column-gap: 24px;

            }


            .main-navigation a.nav-link {

                font-size: 14px;

            }


            .header-cta {

                min-width: 105px;

                padding-left: 17px;
                padding-right: 17px;

            }

        }


        /* =====================================================
           MOBILE BREAKPOINT
        ====================================================== */

        @media (max-width: 950px) {

            .main-navigation {

                display: none;

            }


            .mobile-toggle-wrapper {

                display: block;

            }

        }


        /* =====================================================
           MOBILE SIZING
        ====================================================== */

        @media (max-width: 767px) {

            .site-header-container {

                padding-left: 16px;
                padding-right: 16px;

            }


            .site-logo img {

                height: 50px;

            }


            main > *:first-child {

                margin-top: 80px !important;

            }

        }

    </style>


    
</head>


<body class="bg-white antialiased text-gray-900">


<!-- =========================================================
     HEADER
========================================================= -->

<header
    id="navbar"
    class="fixed top-0 left-0 right-0 water-flow-header"
>

    <div class="site-header-container">

        <div class="site-header-row">


            <!-- LOGO -->

            <div class="site-logo">

                <a
                    href="https://bwebdesignagency.com"
                    aria-label="BWeb Design & Development Agency"
                >

                    <img
                        src="https://bwebdesignagency.com/static/img/website-designer-nigeria-logo9.png"
                        alt="BWeb Design & Development Agency"
                        class="animate-gentle-bounce"
                    >

                </a>

            </div>


            <!-- DESKTOP NAVIGATION -->

            <nav
                class="main-navigation"
                aria-label="Main navigation"
            >


                <!-- HOME -->

                <a
                    href="https://bwebdesignagency.com"
                    class="nav-link"
                >
                    Home
                </a>


                <!-- SERVICES -->

                <div class="services-wrapper">

                    <a
                        href="https://bwebdesignagency.com/services"
                        class="nav-link services-link"
                    >

                        Services

                        <i class="fas fa-chevron-down"></i>

                    </a>


                    <div class="services-dropdown">


                        <a href="https://bwebdesignagency.com/services">

                            <strong>
                                All Services
                            </strong>

                            <small>
                                Explore all BWeb services
                            </small>

                        </a>


                        <a href="https://bwebdesignagency.com/web-design-development">

                            <strong>
                                Web Design & Development
                            </strong>

                            <small>
                                Professional websites for businesses and brands
                            </small>

                        </a>


                        <a href="https://bwebdesignagency.com/wordpress-development">

                            <strong>
                                WordPress Development
                            </strong>

                            <small>
                                Flexible and scalable WordPress websites
                            </small>

                        </a>


                        <a href="https://bwebdesignagency.com/ecommerce-development">

                            <strong>
                                Ecommerce Development
                            </strong>

                            <small>
                                Online stores designed for growth
                            </small>

                        </a>


                        <a href="https://bwebdesignagency.com/shopify-development">

                            <strong>
                                Shopify Development
                            </strong>

                            <small>
                                Custom Shopify stores and ecommerce solutions
                            </small>

                        </a>


                        <a href="https://bwebdesignagency.com/custom-software-development">

                            <strong>
                                Custom Software Development
                            </strong>

                            <small>
                                Business software and web applications
                            </small>

                        </a>


                        <a href="https://bwebdesignagency.com/mobile-app-development">

                            <strong>
                                Mobile App Development
                            </strong>

                            <small>
                                Modern mobile applications for businesses
                            </small>

                        </a>


                        <a href="https://bwebdesignagency.com/seo-services">

                            <strong>
                                SEO Services
                            </strong>

                            <small>
                                Search visibility, traffic and organic growth
                            </small>

                        </a>


                        <div class="services-divider"></div>


                        <div class="services-heading">
                            ADDITIONAL SERVICES
                        </div>


                        <a href="https://bwebdesignagency.com/website-redesign-revamp">
                            Website Redesign & Revamp
                        </a>


                        <a href="https://bwebdesignagency.com/responsive-web-design">
                            Responsive Web Design
                        </a>


                        <a href="https://bwebdesignagency.com/landing-page-design">
                            Landing Page Design
                        </a>


                        <a href="https://bwebdesignagency.com/web-application-development">
                            Web Application Development
                        </a>


                        <a href="https://bwebdesignagency.com/ui-ux-design">
                            UI/UX Design
                        </a>


                        <a href="https://bwebdesignagency.com/website-maintenance-support">
                            Website Maintenance & Support
                        </a>


                        <a href="https://bwebdesignagency.com/website-speed-optimization">
                            Website Speed Optimization
                        </a>


                        <a href="https://bwebdesignagency.com/api-third-party-integrations">
                            API & Third-Party Integrations
                        </a>

                    </div>

                </div>


                <!-- PORTFOLIO -->

                <a
                    href="https://bwebdesignagency.com/portfolio"
                    class="nav-link"
                >
                    Portfolio
                </a>


                <!-- ABOUT -->

                <a
                    href="https://bwebdesignagency.com/about"
                    class="nav-link"
                >
                    About
                </a>


                <!-- RESOURCES -->

                <div class="services-wrapper">
                    <a
                        href="https://bwebdesignagency.com/blog"
                        class="nav-link services-link"
                        aria-haspopup="true"
                    >
                        Resources
                        <i class="fas fa-chevron-down"></i>
                    </a>

                    <div class="services-dropdown">
                        <a href="https://bwebdesignagency.com/blog">
                            <strong>Blog</strong>
                            <small>Insights, guides and practical advice</small>
                        </a>

                        <a href="https://bwebdesignagency.com/book-consultation">
                            <strong>Book Consultation</strong>
                            <small>Discuss your website or digital project</small>
                        </a>

                        <a href="https://bwebdesignagency.com/trade">
                            <strong>Trade</strong>
                            <small>View available digital asset trading pairs</small>
                        </a>

                        <a href="https://bwebdesignagency.com/submit-requirements">
                            <strong>Submit Requirements</strong>
                            <small>Provide the information needed for your project</small>
                        </a>
                    </div>
                </div>


                <!-- CONTACT -->

                <a
                    href="https://bwebdesignagency.com/contact"
                    class="nav-link"
                >
                    Contact
                </a>


                <!-- LOGIN -->

                <div class="header-button-wrapper">

                    <a
                        href="https://bwebdesignagency.com/login"
                        class="inline-flex items-center justify-center px-5 py-2.5 rounded-full border-2 border-red-600 text-red-600 font-semibold text-sm transition-all duration-300 hover:bg-red-600 hover:text-white"
                    >
                        Login
                    </a>

                </div>


                <!-- CTA -->

                <div class="header-button-wrapper">

                    <a
                        href="https://bwebdesignagency.com/book-consultation"
                        class="header-cta"
                    >
                        Get Started
                    </a>

                </div>


            </nav>


            <!-- MOBILE BUTTON -->

            <div class="mobile-toggle-wrapper">

                <button
                    id="mobile-toggle"
                    type="button"
                    aria-label="Open navigation menu"
                    aria-expanded="false"
                    class="text-gray-900 text-2xl p-2"
                >

                    <i
                        id="menu-icon-toggle"
                        class="fas fa-bars"
                    ></i>

                </button>

            </div>


        </div>

    </div>


    <!-- =====================================================
         MOBILE MENU
    ====================================================== -->

    <div
        id="mobile-menu"
        class="hidden"
    >

        <div class="px-6 py-6">


            <a
                href="https://bwebdesignagency.com"
                class="mobile-menu-link"
            >
                Home
            </a>


            <a
                href="https://bwebdesignagency.com/services"
                class="mobile-menu-link"
            >
                Services
            </a>


            <div class="py-2">


                <!-- MAIN SERVICES -->

                <a
                    href="https://bwebdesignagency.com/web-design-development"
                    class="mobile-service-link"
                >
                    Web Design & Development
                </a>


                <a
                    href="https://bwebdesignagency.com/wordpress-development"
                    class="mobile-service-link"
                >
                    WordPress Development
                </a>


                <a
                    href="https://bwebdesignagency.com/ecommerce-development"
                    class="mobile-service-link"
                >
                    Ecommerce Development
                </a>


                <a
                    href="https://bwebdesignagency.com/shopify-development"
                    class="mobile-service-link"
                >
                    Shopify Development
                </a>


                <a
                    href="https://bwebdesignagency.com/custom-software-development"
                    class="mobile-service-link"
                >
                    Custom Software Development
                </a>


                <a
                    href="https://bwebdesignagency.com/mobile-app-development"
                    class="mobile-service-link"
                >
                    Mobile App Development
                </a>


                <a
                    href="https://bwebdesignagency.com/seo-services"
                    class="mobile-service-link"
                >
                    SEO Services
                </a>


                <!-- ADDITIONAL SERVICES TOGGLE -->

                <button
                    id="mobile-additional-toggle"
                    type="button"
                    class="mobile-additional-toggle"
                    aria-expanded="false"
                    aria-controls="mobile-additional-menu"
                >

                    <span>
                        Additional Services
                    </span>

                    <i
                        id="mobile-additional-arrow"
                        class="fas fa-chevron-down mobile-additional-arrow"
                    ></i>

                </button>


                <!-- ADDITIONAL SERVICES MENU -->

                <div
                    id="mobile-additional-menu"
                    class="mobile-additional-menu hidden"
                >


                    <a
                        href="https://bwebdesignagency.com/website-redesign-revamp"
                        class="mobile-service-link"
                    >
                        Website Redesign & Revamp
                    </a>


                    <a
                        href="https://bwebdesignagency.com/responsive-web-design"
                        class="mobile-service-link"
                    >
                        Responsive Web Design
                    </a>


                    <a
                        href="https://bwebdesignagency.com/landing-page-design"
                        class="mobile-service-link"
                    >
                        Landing Page Design
                    </a>


                    <a
                        href="https://bwebdesignagency.com/web-application-development"
                        class="mobile-service-link"
                    >
                        Web Application Development
                    </a>


                    <a
                        href="https://bwebdesignagency.com/ui-ux-design"
                        class="mobile-service-link"
                    >
                        UI/UX Design
                    </a>


                    <a
                        href="https://bwebdesignagency.com/website-maintenance-support"
                        class="mobile-service-link"
                    >
                        Website Maintenance & Support
                    </a>


                    <a
                        href="https://bwebdesignagency.com/website-speed-optimization"
                        class="mobile-service-link"
                    >
                        Website Speed Optimization
                    </a>


                    <a
                        href="https://bwebdesignagency.com/api-third-party-integrations"
                        class="mobile-service-link"
                    >
                        API & Third-Party Integrations
                    </a>


                </div>


            </div>


            <a
                href="https://bwebdesignagency.com/portfolio"
                class="mobile-menu-link"
            >
                Portfolio
            </a>


            <a
                href="https://bwebdesignagency.com/about"
                class="mobile-menu-link"
            >
                About
            </a>


            <!-- MOBILE RESOURCES DROPDOWN -->

            <button
                id="mobile-resources-toggle"
                type="button"
                class="mobile-menu-link mobile-resources-toggle"
                aria-expanded="false"
                aria-controls="mobile-resources-menu"
            >
                <span>Resources</span>
                <i
                    id="mobile-resources-arrow"
                    class="fas fa-chevron-down mobile-resource-arrow"
                    aria-hidden="true"
                ></i>
            </button>

            <div id="mobile-resources-menu" class="mobile-resources-menu hidden">
                <a href="https://bwebdesignagency.com/blog" class="mobile-resource-link">
                    Blog
                </a>

                <a href="https://bwebdesignagency.com/book-consultation" class="mobile-resource-link">
                    Book Consultation
                </a>

                <a href="https://bwebdesignagency.com/trade" class="mobile-resource-link">
                    Trade
                </a>

                <a href="https://bwebdesignagency.com/submit-requirements" class="mobile-resource-link">
                    Submit Requirements
                </a>
            </div>


            <a
                href="https://bwebdesignagency.com/contact"
                class="mobile-menu-link"
            >
                Contact
            </a>


            <a
                href="https://bwebdesignagency.com/login"
                class="block text-center border-2 border-red-600 px-6 py-3 mt-5 rounded-full text-red-600 font-bold hover:bg-red-600 hover:text-white transition"
            >
                Login
            </a>


            <a
                href="https://bwebdesignagency.com/book-consultation"
                class="block text-center bg-red-600 px-6 py-3 mt-3 rounded-full text-white font-bold hover:bg-black transition"
            >
                Get Started
            </a>


        </div>

    </div>

</header>


<!-- =========================================================
     PAGE CONTENT
========================================================= -->



<!-- =========================================================
     FOOTER
========================================================= -->

<footer>


    <!-- WHATSAPP -->

    <div class="fixed bottom-6 right-6 z-50">

        <a
            href="https://wa.me/2349036125015"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center justify-center w-14 h-14 bg-green-500 hover:bg-green-600 text-white rounded-full shadow-lg transition-all duration-300 hover:scale-110"
            title="Chat with us on WhatsApp"
            aria-label="Chat with BWeb on WhatsApp"
        >

            <i class="fab fa-whatsapp text-2xl"></i>

        </a>

    </div>


    <!-- CTA -->

    <div class="bg-gradient-to-r from-primary-500 to-primary-600 py-16">

        <div class="container mx-auto px-4">

            <div class="flex flex-col lg:flex-row items-center justify-between">


                <div class="lg:w-2/3 mb-8 lg:mb-0 text-center lg:text-left">

                    <h2 class="text-3xl lg:text-4xl font-bold text-white mb-4">

                        Ready to Build a Better Website?

                    </h2>


                    <p class="text-xl text-white/90">

                        Let's create a professional, high-performing website designed around your business goals.

                    </p>

                </div>


                <div class="lg:w-1/3 text-center">

                    <a
                        href="https://bwebdesignagency.com/book-consultation"
                        class="inline-flex items-center px-8 py-4 bg-white text-primary-500 font-bold rounded-full hover:bg-gray-100 transition"
                    >

                        <i class="fas fa-arrow-right mr-2"></i>

                        Get Started

                    </a>

                </div>


            </div>

        </div>

    </div>


    <!-- FOOTER MAIN -->

    <div class="bg-gray-900 text-white py-12">

        <div class="container mx-auto px-4">

            <div class="flex flex-wrap">


                <!-- COMPANY -->

                <div class="w-full md:w-[25%] pr-4 mb-8 md:mb-0">

                    <img
                        src="https://bwebdesignagency.com/static/img/website-designer-nigeria-logo8.jpg"
                        alt="BWeb Design & Development Agency"
                        class="h-10 mb-3"
                    >


                    <p class="text-gray-300 mb-4 leading-relaxed text-sm">

                        BWeb is a web design and development agency creating professional,
                        high-performing websites, ecommerce stores, and custom digital
                        solutions for businesses, brands, and organizations worldwide.

                    </p>


                    <div class="flex space-x-3">


                        <a
                            href="https://x.com/bwebdesignagency"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="text-gray-400 hover:text-primary-500"
                            aria-label="BWeb on X"
                        >
                            <i class="fab fa-twitter"></i>
                        </a>


                        <a
                            href="https://www.tiktok.com/@bwebdesignagency"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="text-gray-400 hover:text-primary-500"
                            aria-label="BWeb on TikTok"
                        >
                            <i class="fab fa-tiktok"></i>
                        </a>


                        <a
                            href="https://www.instagram.com/bwebdesignagency"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="text-gray-400 hover:text-primary-500"
                            aria-label="BWeb on Instagram"
                        >
                            <i class="fab fa-instagram"></i>
                        </a>


                        <a
                            href="https://www.youtube.com/bwebdesignagency"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="text-gray-400 hover:text-primary-500"
                            aria-label="BWeb on YouTube"
                        >
                            <i class="fab fa-youtube"></i>
                        </a>


                        <a
                            href="https://www.linkedin.com/company/bwebdesignagency/"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="text-gray-400 hover:text-primary-500"
                            aria-label="BWeb on LinkedIn"
                        >
                            <i class="fab fa-linkedin-in"></i>
                        </a>


                    </div>

                </div>


                <!-- QUICK LINKS -->

                <div class="w-full md:w-[17.5%] pr-4 mb-8 md:mb-0">

                    <h3 class="text-base font-semibold mb-4 text-white border-b-2 border-primary-500 pb-1 inline-block">

                        Quick Links

                    </h3>


                    <ul class="space-y-2">

                        <li>
                            <a
                                href="https://bwebdesignagency.com"
                                class="footer-link"
                            >
                                Home
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/about"
                                class="footer-link"
                            >
                                About
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/portfolio"
                                class="footer-link"
                            >
                                Portfolio
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/blog"
                                class="footer-link"
                            >
                                Blog
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/book-consultation"
                                class="footer-link"
                            >
                                Get Started
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/contact"
                                class="footer-link"
                            >
                                Contact Us
                            </a>
                        </li>

                    
        <li>
            <a href="https://bwebdesignagency.com/submit-requirements"
               class="inline-flex items-center gap-2 text-blue-400 hover:text-blue-300 font-semibold transition-all duration-300">
                <i class="fas fa-clipboard-list text-xs"></i>
                Submit Your Requirements
            </a>
        </li>
</ul>

                </div>


                


                <!-- SERVICES -->

                <div class="w-full md:w-[17.5%] pr-4 mb-8 md:mb-0">

                    <h3 class="text-base font-semibold mb-4 text-white border-b-2 border-primary-500 pb-1 inline-block">

                        Our Services

                    </h3>


                    <ul class="space-y-2">


                        <!-- MAIN SERVICES -->

                        <li>
                            <a
                                href="https://bwebdesignagency.com/web-design-development"
                                class="footer-link"
                            >
                                Web Design & Development
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/wordpress-development"
                                class="footer-link"
                            >
                                WordPress Development
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/ecommerce-development"
                                class="footer-link"
                            >
                                Ecommerce Development
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/shopify-development"
                                class="footer-link"
                            >
                                Shopify Development
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/custom-software-development"
                                class="footer-link"
                            >
                                Custom Software Development
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/mobile-app-development"
                                class="footer-link"
                            >
                                Mobile App Development
                            </a>
                        </li>


                        <li>
                            <a
                                href="https://bwebdesignagency.com/seo-services"
                                class="footer-link"
                            >
                                SEO Services
                            </a>
                        </li>


                        <!-- ADDITIONAL SERVICES DROPDOWN -->

                        <li class="pt-2">


                            <button
                                type="button"
                                id="footer-additional-toggle"
                                class="footer-additional-toggle"
                                aria-expanded="false"
                                aria-controls="footer-additional-menu"
                            >

                                <span>
                                    Additional Services
                                </span>


                                <i
                                    id="footer-additional-arrow"
                                    class="fas fa-chevron-down footer-additional-arrow"
                                ></i>

                            </button>


                            <!-- DROPDOWN -->

                            <div
                                id="footer-additional-menu"
                                class="footer-additional-menu hidden"
                            >


                                <a
                                    href="https://bwebdesignagency.com/website-redesign-revamp"
                                    class="footer-link block py-1"
                                >
                                    Website Redesign & Revamp
                                </a>


                                <a
                                    href="https://bwebdesignagency.com/responsive-web-design"
                                    class="footer-link block py-1"
                                >
                                    Responsive Web Design
                                </a>


                                <a
                                    href="https://bwebdesignagency.com/landing-page-design"
                                    class="footer-link block py-1"
                                >
                                    Landing Page Design
                                </a>


                                <a
                                    href="https://bwebdesignagency.com/web-application-development"
                                    class="footer-link block py-1"
                                >
                                    Web Application Development
                                </a>


                                <a
                                    href="https://bwebdesignagency.com/ui-ux-design"
                                    class="footer-link block py-1"
                                >
                                    UI/UX Design
                                </a>


                                <a
                                    href="https://bwebdesignagency.com/website-maintenance-support"
                                    class="footer-link block py-1"
                                >
                                    Website Maintenance & Support
                                </a>


                                <a
                                    href="https://bwebdesignagency.com/website-speed-optimization"
                                    class="footer-link block py-1"
                                >
                                    Website Speed Optimization
                                </a>


                                <a
                                    href="https://bwebdesignagency.com/api-third-party-integrations"
                                    class="footer-link block py-1"
                                >
                                    API & Third-Party Integrations
                                </a>


                            </div>


                        </li>


                    </ul>

                </div>


                <!-- CONTACT -->

                <div class="w-full md:w-[20%] pr-4 mb-8 md:mb-0">

                    <h3 class="text-base font-semibold mb-4 text-white border-b-2 border-primary-500 pb-1 inline-block">

                        Contact Info

                    </h3>


                    <ul class="space-y-3">


                        <li class="flex items-center">

                            <i class="fas fa-phone text-primary-500 mr-2 text-sm"></i>

                            <a
                                href="tel:+2349036125015"
                                class="footer-link"
                            >
                                +234 903 612 5015
                            </a>

                        </li>


                        <li class="flex items-center">

                            <i class="fas fa-envelope text-primary-500 mr-2 text-sm"></i>

                            <a
                                href="mailto:info@bwebdesignagency.com"
                                class="footer-link"
                            >
                                info@bwebdesignagency.com
                            </a>

                        </li>


                    </ul>

                </div>


                <!-- OFFICES -->

                <div class="w-full md:w-[20%]">

                    <h3 class="text-base font-semibold mb-4 text-white border-b-2 border-primary-500 pb-1 inline-block">

                        Our Offices

                    </h3>


                    <ul class="space-y-3">


                        <li class="flex items-start">

                            <i class="fas fa-map-marker-alt text-primary-500 mt-1 mr-2 text-sm"></i>

                            <span class="text-gray-300 text-sm">

                                Gaa Akabi, Ilorin, Kwara State

                            </span>

                        </li>


                        <li class="flex items-start">

                            <i class="fas fa-map-marker-alt text-primary-500 mt-1 mr-2 text-sm"></i>

                            <span class="text-gray-300 text-sm">

                                Takete Ide, Kogi State

                            </span>

                        </li>


                    </ul>

                </div>


            </div>


            <!-- COPYRIGHT -->

            <div class="border-t border-gray-700 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">


                <p class="text-gray-400 text-xs mb-3 md:mb-0">

                    &copy; 2026

                    <span class="text-primary-500">
                        BWeb Design & Development Agency
                    </span>

                    . All rights reserved.

                </p>


                <div class="flex space-x-4">

                    <a
                        href="https://bwebdesignagency.com/privacy-policy"
                        class="text-gray-400 hover:text-white text-xs"
                    >
                        Privacy Policy
                    </a>


                    <span class="text-gray-600 text-xs">
                        |
                    </span>


                    <a
                        href="https://bwebdesignagency.com/terms-of-service"
                        class="text-gray-400 hover:text-white text-xs"
                    >
                        Terms of Service
                    </a>

                </div>


            </div>

        </div>

    </div>


    <!-- BACK TO TOP -->

    <a
        href="#"
        id="back-to-top"
        class="fixed bottom-6 left-6 z-50 hidden w-12 h-12 bg-primary-500 hover:bg-primary-600 text-white rounded-full shadow-lg transition-all duration-300 items-center justify-center"
        aria-label="Back to top"
    >

        <i class="fas fa-chevron-up"></i>

    </a>


</footer>


<!-- =========================================================
     JAVASCRIPT
========================================================= -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>


<script>

document.addEventListener('DOMContentLoaded', function () {


    /* =====================================================
       WOW
    ====================================================== */

    if (typeof WOW !== 'undefined') {

        new WOW().init();

    }


    /* =====================================================
       MOBILE MENU
    ====================================================== */

    const mobileButton =
        document.getElementById('mobile-toggle');

    const mobileMenu =
        document.getElementById('mobile-menu');

    const mobileIcon =
        document.getElementById('menu-icon-toggle');


    if (mobileButton && mobileMenu) {

        mobileButton.addEventListener(
            'click',
            function () {

                const isClosed =
                    mobileMenu.classList.contains('hidden');


                if (isClosed) {

                    mobileMenu.classList.remove('hidden');

                    mobileButton.setAttribute(
                        'aria-expanded',
                        'true'
                    );


                    if (mobileIcon) {

                        mobileIcon.classList.remove(
                            'fa-bars'
                        );

                        mobileIcon.classList.add(
                            'fa-times'
                        );

                    }


                } else {

                    mobileMenu.classList.add(
                        'hidden'
                    );

                    mobileButton.setAttribute(
                        'aria-expanded',
                        'false'
                    );


                    if (mobileIcon) {

                        mobileIcon.classList.remove(
                            'fa-times'
                        );

                        mobileIcon.classList.add(
                            'fa-bars'
                        );

                    }

                }

            }
        );

    }


    /* =====================================================
       MOBILE ADDITIONAL SERVICES DROPDOWN
    ====================================================== */

    const mobileAdditionalToggle =
        document.getElementById(
            'mobile-additional-toggle'
        );

    const mobileAdditionalMenu =
        document.getElementById(
            'mobile-additional-menu'
        );

    const mobileAdditionalArrow =
        document.getElementById(
            'mobile-additional-arrow'
        );


    if (
        mobileAdditionalToggle &&
        mobileAdditionalMenu
    ) {

        mobileAdditionalToggle.addEventListener(
            'click',
            function () {

                const isOpen =
                    mobileAdditionalToggle.getAttribute(
                        'aria-expanded'
                    ) === 'true';


                mobileAdditionalToggle.setAttribute(
                    'aria-expanded',
                    String(!isOpen)
                );


                mobileAdditionalMenu.classList.toggle(
                    'hidden'
                );


                if (mobileAdditionalArrow) {

                    mobileAdditionalArrow.classList.toggle(
                        'rotate-180'
                    );

                }

            }
        );

    }


    /* =====================================================
       MOBILE RESOURCES DROPDOWN
    ====================================================== */

    const mobileResourcesToggle =
        document.getElementById('mobile-resources-toggle');

    const mobileResourcesMenu =
        document.getElementById('mobile-resources-menu');

    const mobileResourcesArrow =
        document.getElementById('mobile-resources-arrow');

    if (mobileResourcesToggle && mobileResourcesMenu) {
        mobileResourcesToggle.addEventListener('click', function () {
            const isOpen =
                mobileResourcesToggle.getAttribute('aria-expanded') === 'true';

            mobileResourcesToggle.setAttribute('aria-expanded', String(!isOpen));
            mobileResourcesMenu.classList.toggle('hidden');

            if (mobileResourcesArrow) {
                mobileResourcesArrow.classList.toggle('rotate-180');
            }
        });
    }


    /* =====================================================
       FOOTER ADDITIONAL SERVICES DROPDOWN
    ====================================================== */

    const footerAdditionalToggle =
        document.getElementById(
            'footer-additional-toggle'
        );

    const footerAdditionalMenu =
        document.getElementById(
            'footer-additional-menu'
        );

    const footerAdditionalArrow =
        document.getElementById(
            'footer-additional-arrow'
        );


    if (
        footerAdditionalToggle &&
        footerAdditionalMenu
    ) {

        footerAdditionalToggle.addEventListener(
            'click',
            function () {

                const isOpen =
                    footerAdditionalToggle.getAttribute(
                        'aria-expanded'
                    ) === 'true';


                footerAdditionalToggle.setAttribute(
                    'aria-expanded',
                    String(!isOpen)
                );


                footerAdditionalMenu.classList.toggle(
                    'hidden'
                );


                if (footerAdditionalArrow) {

                    footerAdditionalArrow.classList.toggle(
                        'rotate-180'
                    );

                }

            }
        );

    }


    /* =====================================================
       CLOSE MOBILE MENU AFTER LINK CLICK
    ====================================================== */

    const mobileLinks =
        document.querySelectorAll(
            '#mobile-menu a'
        );


    mobileLinks.forEach(
        function (link) {

            link.addEventListener(
                'click',
                function () {

                    if (mobileMenu) {

                        mobileMenu.classList.add(
                            'hidden'
                        );

                    }


                    if (mobileButton) {

                        mobileButton.setAttribute(
                            'aria-expanded',
                            'false'
                        );

                    }


                    if (mobileIcon) {

                        mobileIcon.classList.remove(
                            'fa-times'
                        );

                        mobileIcon.classList.add(
                            'fa-bars'
                        );

                    }

                }
            );

        }
    );


    /* =====================================================
       BACK TO TOP
    ====================================================== */

    const backTop =
        document.getElementById(
            'back-to-top'
        );


    if (backTop) {

        window.addEventListener(
            'scroll',
            function () {

                if (window.scrollY > 400) {

                    backTop.classList.remove(
                        'hidden'
                    );

                    backTop.classList.add(
                        'flex'
                    );


                } else {

                    backTop.classList.add(
                        'hidden'
                    );

                    backTop.classList.remove(
                        'flex'
                    );

                }

            }
        );


        backTop.addEventListener(
            'click',
            function (event) {

                event.preventDefault();


                window.scrollTo({

                    top: 0,

                    behavior: 'smooth'

                });

            }
        );

    }


});

</script>




</body>

</html>