diff --git a/src/features/home/home.view.tsx b/src/features/home/home.view.tsx new file mode 100644 index 000000000..bee5c7a3c --- /dev/null +++ b/src/features/home/home.view.tsx @@ -0,0 +1,1146 @@ +import { AppNavigation } from 'components/app-navigation'; +import { AppFooterContainer } from 'containers/app-footer.container'; +import { Link } from 'gatsby'; +import React from 'react'; + +const HomeView = () => { + const [openFAQs, setOpenFAQs] = React.useState([]); + + const toggleFAQ = (index: number) => { + setOpenFAQs((prev) => + prev.includes(index) + ? prev.filter((item) => item !== index) + : [...prev, index], + ); + }; + + // FAQ contents with random text + const faqItems = [ + { + question: `What services do you offer?`, + answer: `4Markdown offers a complete suite of document creation and organization tools. Our primary services include an AI-powered markdown editor with live preview, interactive mindmaps that integrate with your documents, automated document formatting, collaborative editing features, and AI writing assistance. We also provide educational resources and templates to help you get the most out of markdown formatting.`, + }, + { + question: `How long does a typical project take?`, + answer: `The time to complete a project in 4Markdown varies depending on complexity and size. Most users can create basic documents in minutes, while complex documents with extensive mindmaps might take a few hours. Our AI assistance can significantly reduce your writing time by up to 40%. The platform is designed for efficiency, with features like templates and keyboard shortcuts that help streamline your workflow.`, + }, + { + question: `Do you offer ongoing support after project completion?`, + answer: `Yes, we offer comprehensive ongoing support for all 4Markdown users. Our support includes access to our knowledge base, video tutorials, community forums, and direct customer support via email. Premium users receive priority support with faster response times. We also regularly update our platform with new features and improvements based on user feedback, ensuring that your 4Markdown experience continues to evolve and improve over time.`, + }, + { + question: `What is your pricing structure?`, + answer: `4Markdown operates on a token-based pricing model. We offer three main pricing tiers: Starter (100 tokens for $2.50), Popular (1,000 tokens for $15), and Professional (10,000 tokens for $99). Basic document creation is free, while tokens are consumed when using premium features like AI writing assistance, advanced mindmap creation, and collaborative tools. This flexible approach allows you to pay only for the features you actually use, making it cost-effective for both occasional and power users.`, + }, + { + question: `How do we get started working together?`, + answer: `Getting started with 4Markdown is simple. Just create a free account on our platform, which gives you immediate access to the basic document editor and mindmap tools. You can start creating documents right away without any token purchases. To access premium features, purchase a token package that suits your needs. We also offer a comprehensive onboarding guide and tutorial videos to help new users become familiar with all the features. For teams and organizations, we provide customized onboarding sessions upon request.`, + }, + ]; + + return ( + <> + + + Document Creator + + + Mindmap Creator + + + Education Zone + + + +
+
+

+ Your AI-Powered Markdown & Mindmap Workspace +

+

+ Create beautiful documents, visualize ideas with mindmaps, and + accelerate your writing with AI assistance—all in one seamless + workspace. +

+ + Start Writing for Free + +
+
+ +
+
+

+ How It Works +

+

+ Get started with 4Markdown in just a few simple steps +

+ +
+ {/* Step connector lines (hidden on mobile) */} +
+ + {/* Step 1 */} +
+
+ + 1 + +
+
+

+ Create +

+
+
+
+
+
+
+
+
+ + # + + + My Document + +
+
+ Start writing your content with our intuitive editor... +
+
+
+

+ Begin writing in our intuitive markdown editor with live + preview +

+
+
+ + {/* Step 2 */} +
+
+ + 2 + +
+
+

+ Organize +

+
+
+
+ Main Idea +
+
+
+
+ Topic 1 +
+
+
+ Topic 2 +
+
+
+
+
+

+ Transform text into interactive mindmaps with a single click +

+
+
+ + {/* Step 3 */} +
+
+ + 3 + +
+
+

+ Enhance +

+
+
+
+
+
+
+
+
+
+
+ AI Suggestion: +
+
+ Consider rephrasing this sentence for clarity... +
+
+
+
+

+ Let our AI tools polish your writing and suggest improvements +

+
+
+ + {/* Step 4 */} +
+
+ + 4 + +
+
+

+ Share +

+
+
+
+
+ PDF +
+
+ HTML +
+
+ Word +
+
+ Image +
+
+
+ Export & Share +
+
+
+

+ Export to multiple formats or share directly with colleagues +

+
+
+
+ +
+ + Try 4Markdown Now + +
+
+
+ + {/* Features Section */} +
+
+

+ Powerful Features +

+

+ Everything you need to create, organize, and enhance your thoughts +

+ +
+ {/* Feature 1 */} +
+
+ 📝 +
+

+ Markdown Documents +

+

+ Create beautiful documents with our intuitive markdown editor + featuring live preview and formatting tools. +

+
+ + {/* Feature 2 */} +
+
+ 🔄 +
+

+ Mindmap Generator +

+

+ Visualize your ideas with interactive mindmaps that integrate + seamlessly with your documents. +

+
+ + {/* Feature 3 */} +
+
+ 🤖 +
+

+ AI Assistance +

+

+ Let AI help you write better with grammar checks, style + suggestions, and idea expansion capabilities. +

+
+
+
+
+ + {/* Feature Comparison Section */} +
+
+

+ Why Choose 4Markdown? +

+

+ See how we compare to other solutions +

+ + {/* Comparison table - desktop version */} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Features + +
+ 4Markdown + + Recommended + +
+ 		+ Traditional Markdown Editors + + Note-taking Apps +
+ Markdown Support + +
+ + Full syntax + extensions + + + + +
+ 		+ Basic/Standard + + Limited/None +
+ Visual Mindmapping + +
+ + Built-in, bidirectional + + + + +
+ 		+ None/Plugin required + + Limited +
+ AI Assistance + +
+ + Grammar, style, expansion + + + + +
+ 		+ None + + Basic/None +
+ Export Options + +
+ + 10+ formats + + + + +
+ 		+ 2-5 formats + + Limited +
+ Pricing Model + +
+ + Freemium + token-based + + + + +
+ 		+ Subscription/One-time + + Subscription +
+
+ + {/* Comparison cards - mobile version */} +
+ {/* 4Markdown Card */} +
+
+

+ 4Markdown +

+

Recommended

+
+
+
+ + + +
+

+ Markdown Support +

+

+ Full syntax + extensions +

+
+
+
+ + + +
+

+ Visual Mindmapping +

+

+ Built-in, bidirectional +

+
+
+
+ + + +
+

AI Assistance

+

+ Grammar, style, expansion +

+
+
+
+ + + +
+

+ Export Options +

+

+ 10+ formats +

+
+
+
+ + + +
+

Pricing Model

+

+ Freemium + token-based +

+
+
+
+
+ + {/* Other Editors Brief Comparison */} +
+

+ Other Solutions +

+ +
+
+

+ Traditional Markdown Editors +

+
    +
  • + + + + No built-in mindmapping +
    • +
  • + + + + Limited or no AI assistance +
    • +
+
+ +
+

+ Note-taking Apps +

+
    +
  • + + + + Limited markdown support +
    • +
  • + + + + Higher monthly subscription costs +
    • +
+
+
+
+
+ +
+ + Get Started + +
+
+
+ + {/* Getting Started Guide Section */} +
+
+

+ Get Started in Minutes +

+

+ Follow these simple steps to begin your markdown journey +

+ +
+
+
+ + + +
+

+ 1. Create an Account +

+

+ Sign up for free and get access to basic features immediately. + No credit card required. +

+ + Sign up free + + + + +
+ +
+
+ + + +
+

+ 2. Customize Your Workspace +

+

+ Set up your preferences, choose themes, and configure keyboard + shortcuts to match your workflow. +

+ + Explore settings + + + + +
+ +
+
+ + + +
+

+ 3. Create Your First Document +

+

+ Start writing in Markdown or import existing files. Our editor + supports all standard Markdown syntax. +

+ + View tutorial + + + + +
+
+ +
+
+
+

+ Need Help Getting Started? +

+

+ Check out our comprehensive documentation and video tutorials + to master 4Markdown and boost your productivity. +

+
+ + + + + Documentation + + + + + + Video Tutorials + + + + + + Community Forum + +
+
+
+
+
+
+
+
+
+
+ + # Welcome to 4Markdown + +
+
+ + Start typing here... + +
+ | +
+
+
+
+
+
+
+ + {/* Pricing Section */} +
+
+

+ Token Pricing +

+

+ Purchase tokens for premium features like AI-powered writing and + mindmap expansion +

+ +
+ {/* Pricing Option 1 */} +
+

+ Starter +

+

+ 100 +

+

+ $2.50 +

+ +
+ + {/* Pricing Option 2 */} +
+

+ Popular +

+

+ 1,000 +

+

+ $15 +

+ +
+ + {/* Pricing Option 3 */} +
+

+ Professional +

+

+ 10,000 +

+

+ $99 +

+ +
+
+
+
+ + {/* Testimonials Section */} +
+
+

+ What Our Users Say +

+

+ Join thousands of writers and thinkers who love 4Markdown +

+ +
+ {/* Testimonial 1 */} +
+

+ “The combination of markdown editing and mindmapping has + completely transformed my workflow. I use 4Markdown for + everything from blog posts to project planning.” +

+
+
+ JD +
+
+

Jane Doe

+

+ Content Creator +

+
+
+
+ + {/* Testimonial 2 */} +
+

+ “The AI writing suggestions are incredibly accurate. + It’s like having a writing coach watching over my + shoulder, but without the pressure!” +

+
+
+ MS +
+
+

Mark Smith

+

+ Technical Writer +

+
+
+
+
+
+
+ + {/* FAQ Section */} +
+
+

+ Frequently Asked Questions +

+

+ Find answers to common questions about our services and products. +

+ +
+ {faqItems.map((faq, index) => ( +
+ + +
+

+ {faq.answer} +

+
+
+ ))} +
+
+
+ +
+
+

+ See 4Markdown in Action +

+

+ Watch how our editor, mindmap, and AI tools work together +

+ + Start Writing for Free + +
+
+ + + + ); +}; + +export { HomeView }; diff --git a/src/pages/home.tsx b/src/pages/home.tsx new file mode 100644 index 000000000..9f5de5c86 --- /dev/null +++ b/src/pages/home.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import type { HeadFC } from 'gatsby'; +import Meta from 'components/meta'; +import { meta } from '../../meta'; +import LogoThumbnail from 'images/logo-thumbnail.png'; +import { HomeView } from 'features/home/home.view'; + +const HomePage = () => { + return ( +
+ +
+ ); +}; + +export default HomePage; + +export const Head: HeadFC = () => { + return ( + + ); +};