diff --git a/src/app/page.tsx b/src/app/page.tsx index 1500a2d..8f49603 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -80,16 +80,16 @@ export default function LandingPage() { features={[ { id: 1, - title: "Basic Question Tag Structure", description: "The fundamental structure of a question tag includes the opening tag, attributes, content, and closing tag. Understanding this basic structure is essential for implementing questions correctly in your HTML documents.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg?_wi=1"}, + title: "Basic Question Tag Structure", description: "The fundamental structure of a question tag includes the opening tag, attributes, content, and closing tag. Understanding this basic structure is essential for implementing questions correctly in your HTML documents.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg"}, { id: 2, - title: "Attributes and Parameters", description: "Question tags support various attributes such as 'type', 'required', 'name', and 'id'. These attributes control the behavior, validation, and identification of your question elements within forms.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg?_wi=2"}, + title: "Attributes and Parameters", description: "Question tags support various attributes such as 'type', 'required', 'name', and 'id'. These attributes control the behavior, validation, and identification of your question elements within forms.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg"}, { id: 3, - title: "Common Attributes Explained", description: "Dive deeper into commonly used attributes like 'placeholder', 'disabled', 'autofocus', and 'data' attributes. Learn how these enhance user interaction and improve form functionality.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg?_wi=3"}, + title: "Common Attributes Explained", description: "Dive deeper into commonly used attributes like 'placeholder', 'disabled', 'autofocus', and 'data' attributes. Learn how these enhance user interaction and improve form functionality.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg"}, { id: 4, - title: "Validation Rules", description: "Implement proper validation using HTML5 attributes. Learn about client-side validation patterns and how question tags handle data validation before submission.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg?_wi=4"}, + title: "Validation Rules", description: "Implement proper validation using HTML5 attributes. Learn about client-side validation patterns and how question tags handle data validation before submission.", imageSrc: "http://img.b2bpic.net/free-photo/electronic-circuit-board-shallow-dof_1398-119.jpg"}, ]} textboxLayout="default" useInvertedBackground={true} @@ -104,16 +104,16 @@ export default function LandingPage() { features={[ { id: 1, - title: "Survey and Feedback Forms", description: "Use question tags to create professional surveys and feedback forms. Capture user opinions, preferences, and suggestions with well-structured questions.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg?_wi=1"}, + title: "Survey and Feedback Forms", description: "Use question tags to create professional surveys and feedback forms. Capture user opinions, preferences, and suggestions with well-structured questions.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg"}, { id: 2, - title: "Quiz and Assessment Systems", description: "Build interactive quizzes and assessment tools using question tags. Present multiple-choice questions, true/false questions, and text-based questions with proper validation.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg?_wi=2"}, + title: "Quiz and Assessment Systems", description: "Build interactive quizzes and assessment tools using question tags. Present multiple-choice questions, true/false questions, and text-based questions with proper validation.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg"}, { id: 3, - title: "Registration and Signup Forms", description: "Enhance user registration by asking relevant questions during signup. Collect necessary information while providing a smooth user experience.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg?_wi=3"}, + title: "Registration and Signup Forms", description: "Enhance user registration by asking relevant questions during signup. Collect necessary information while providing a smooth user experience.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg"}, { id: 4, - title: "Customer Support Tickets", description: "Create structured support request forms where users answer specific questions about their issues. Streamline support processes and improve ticket routing.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg?_wi=4"}, + title: "Customer Support Tickets", description: "Create structured support request forms where users answer specific questions about their issues. Streamline support processes and improve ticket routing.", imageSrc: "http://img.b2bpic.net/free-vector/colorful-butoons-web-elements-set_23-2147542678.jpg"}, ]} textboxLayout="default" useInvertedBackground={false} @@ -128,16 +128,16 @@ export default function LandingPage() { features={[ { id: 1, - title: "Accessibility Considerations", description: "Always use proper labels with question tags for screen readers. Implement ARIA attributes when needed and ensure keyboard navigation support for all users.", imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg?_wi=1"}, + title: "Accessibility Considerations", description: "Always use proper labels with question tags for screen readers. Implement ARIA attributes when needed and ensure keyboard navigation support for all users.", imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg"}, { id: 2, - title: "Clear and Concise Wording", description: "Write questions that are easy to understand. Avoid ambiguous language, technical jargon, and double negatives. Keep questions focused and specific.", imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg?_wi=2"}, + title: "Clear and Concise Wording", description: "Write questions that are easy to understand. Avoid ambiguous language, technical jargon, and double negatives. Keep questions focused and specific.", imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg"}, { id: 3, - title: "Mobile-First Design", description: "Ensure question tags are properly styled for mobile devices. Test on various screen sizes and ensure touch-friendly input areas.", imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg?_wi=3"}, + title: "Mobile-First Design", description: "Ensure question tags are properly styled for mobile devices. Test on various screen sizes and ensure touch-friendly input areas.", imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg"}, { id: 4, - title: "Validation and Error Handling", description: "Implement proper error messages when questions are unanswered or invalid. Provide clear guidance to users on how to fix validation errors.", imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg?_wi=4"}, + title: "Validation and Error Handling", description: "Implement proper error messages when questions are unanswered or invalid. Provide clear guidance to users on how to fix validation errors.", imageSrc: "http://img.b2bpic.net/free-photo/foreman-using-desktop-pc-writing-notes-while-working-auto-repair-office_637285-9304.jpg"}, ]} textboxLayout="default" useInvertedBackground={true} @@ -151,11 +151,11 @@ export default function LandingPage() { tag="Examples" blogs={[ { - id: "1", category: "Basic Example", title: "Simple Question Tag Implementation", excerpt: "Learn how to create a basic question tag with text input. This example demonstrates the fundamental syntax and attributes needed to get started.", imageSrc: "http://img.b2bpic.net/free-vector/programming-code-set-two_78370-10346.jpg?_wi=1", imageAlt: "Simple question tag code example", authorName: "Web Dev Team", authorAvatar: "/placeholders/placeholder1.webp", date: "Jan 15, 2025"}, + id: "1", category: "Basic Example", title: "Simple Question Tag Implementation", excerpt: "Learn how to create a basic question tag with text input. This example demonstrates the fundamental syntax and attributes needed to get started.", imageSrc: "http://img.b2bpic.net/free-vector/programming-code-set-two_78370-10346.jpg", imageAlt: "Simple question tag code example", authorName: "Web Dev Team", authorAvatar: "/placeholders/placeholder1.webp", date: "Jan 15, 2025"}, { - id: "2", category: "Advanced Example", title: "Multiple Choice Question Implementation", excerpt: "Explore how to create multiple-choice questions using question tags with radio buttons or dropdowns for better user interaction.", imageSrc: "http://img.b2bpic.net/free-vector/programming-code-set-two_78370-10346.jpg?_wi=2", imageAlt: "Multiple choice question code example", authorName: "Web Dev Team", authorAvatar: "/placeholders/placeholder1.webp", date: "Jan 16, 2025"}, + id: "2", category: "Advanced Example", title: "Multiple Choice Question Implementation", excerpt: "Explore how to create multiple-choice questions using question tags with radio buttons or dropdowns for better user interaction.", imageSrc: "http://img.b2bpic.net/free-vector/programming-code-set-two_78370-10346.jpg", imageAlt: "Multiple choice question code example", authorName: "Web Dev Team", authorAvatar: "/placeholders/placeholder1.webp", date: "Jan 16, 2025"}, { - id: "3", category: "Validation Example", title: "Question Tag with Validation Rules", excerpt: "Discover how to add HTML5 validation to question tags, ensuring data quality and providing user feedback on form submission.", imageSrc: "http://img.b2bpic.net/free-vector/programming-code-set-two_78370-10346.jpg?_wi=3", imageAlt: "Validation code example", authorName: "Web Dev Team", authorAvatar: "/placeholders/placeholder1.webp", date: "Jan 17, 2025"}, + id: "3", category: "Validation Example", title: "Question Tag with Validation Rules", excerpt: "Discover how to add HTML5 validation to question tags, ensuring data quality and providing user feedback on form submission.", imageSrc: "http://img.b2bpic.net/free-vector/programming-code-set-two_78370-10346.jpg", imageAlt: "Validation code example", authorName: "Web Dev Team", authorAvatar: "/placeholders/placeholder1.webp", date: "Jan 17, 2025"}, ]} textboxLayout="default" useInvertedBackground={false} @@ -188,6 +188,7 @@ export default function LandingPage() { useInvertedBackground={true} mediaPosition="left" faqsAnimation="slide-up" + mediaAnimation="slide-up" />