Deepseek ArtifactsDeepseek Artifacts
返回代码库

社交媒体营销工具

4.0
zh数字营销社交媒体营销工具数字营销

提示语

a social media marketing tools landing page

生成结果

import React from 'react';

const App = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
      <header className="bg-white shadow-lg">
        <div className="container mx-auto px-6 py-4 flex justify-between items-center">
          <div className="text-2xl font-bold text-gray-800">SocialMediaPro</div>
          <nav className="space-x-6">
            <a href="#features" className="text-gray-700 hover:text-purple-600">Features</a>
            <a href="#pricing" className="text-gray-700 hover:text-purple-600">Pricing</a>
            <a href="#testimonials" className="text-gray-700 hover:text-purple-600">Testimonials</a>
            <a href="#contact" className="text-gray-700 hover:text-purple-600">Contact</a>
          </nav>
        </div>
      </header>

      <section className="container mx-auto px-6 py-16 text-center">
        <h1 className="text-5xl font-bold text-gray-800 mb-6">Empower Your Social Media Strategy</h1>
        <p className="text-xl text-gray-600 mb-8">Unlock the full potential of your social media with our advanced marketing tools.</p>
        <button className="bg-purple-600 text-white px-8 py-3 rounded-full hover:bg-purple-700 transition duration-300">Get Started</button>
      </section>

      <section id="features" className="bg-white py-16">
        <div className="container mx-auto px-6">
          <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">Features</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-50 p-6 rounded-lg shadow-sm">
              <img src="https://placehold.co/300x200" alt="Analytics" className="mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold text-gray-800 mb-2">Advanced Analytics</h3>
              <p className="text-gray-600">Track and analyze your social media performance with precision.</p>
            </div>
            <div className="bg-gray-50 p-6 rounded-lg shadow-sm">
              <img src="https://placehold.co/300x200" alt="Scheduling" className="mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold text-gray-800 mb-2">Content Scheduling</h3>
              <p className="text-gray-600">Plan and schedule your posts for optimal engagement.</p>
            </div>
            <div className="bg-gray-50 p-6 rounded-lg shadow-sm">
              <img src="https://placehold.co/300x200" alt="Engagement" className="mb-4 rounded-lg"/>
              <h3 className="text-xl font-semibold text-gray-800 mb-2">Engagement Tools</h3>
              <p className="text-gray-600">Interact with your audience effectively and grow your community.</p>
            </div>
          </div>
        </div>
      </section>

      <section id="pricing" className="bg-gradient-to-br from-purple-50 to-blue-50 py-16">
        <div className="container mx-auto px-6">
          <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">Pricing</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-xl font-semibold text-gray-800 mb-4">Basic</h3>
              <p className="text-gray-600 mb-4">Perfect for small businesses and startups.</p>
              <p className="text-2xl font-bold text-purple-600 mb-4">$29/mo</p>
              <button className="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition duration-300">Choose Plan</button>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-xl font-semibold text-gray-800 mb-4">Pro</h3>
              <p className="text-gray-600 mb-4">Ideal for growing businesses and influencers.</p>
              <p className="text-2xl font-bold text-purple-600 mb-4">$59/mo</p>
              <button className="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition duration-300">Choose Plan</button>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-xl font-semibold text-gray-800 mb-4">Enterprise</h3>
              <p className="text-gray-600 mb-4">Tailored solutions for large organizations.</p>
              <p className="text-2xl font-bold text-purple-600 mb-4">$99/mo</p>
              <button className="bg-purple-600 text-white px-6 py-2 rounded-full hover:bg-purple-700 transition duration-300">Choose Plan</button>
            </div>
          </div>
        </div>
      </section>

      <section id="testimonials" className="bg-white py-16">
        <div className="container mx-auto px-6">
          <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">Testimonials</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-gray-50 p-6 rounded-lg shadow-sm">
              <p className="text-gray-600 mb-4">"SocialMediaPro has transformed the way we manage our social media. The analytics are incredibly detailed and the scheduling tools are a lifesaver."</p>
              <p className="text-gray-800 font-semibold">- Jane Doe, Marketing Manager</p>
            </div>
            <div className="bg-gray-50 p-6 rounded-lg shadow-sm">
              <p className="text-gray-600 mb-4">"The engagement tools have helped us connect with our audience on a whole new level. Highly recommend!"</p>
              <p className="text-gray-800 font-semibold">- John Smith, CEO</p>
            </div>
          </div>
        </div>
      </section>

      <section id="contact" className="bg-gradient-to-br from-blue-50 to-purple-50 py-16">
        <div className="container mx-auto px-6">
          <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">Contact Us</h2>
          <form className="max-w-lg mx-auto">
            <div className="mb-4">
              <input type="text" placeholder="Your Name" className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-purple-600"/>
            </div>
            <div className="mb-4">
              <input type="email" placeholder="Your Email" className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-purple-600"/>
            </div>
            <div className="mb-4">
              <textarea placeholder="Your Message" className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-purple-600" rows="4"></textarea>
            </div>
            <button type="submit" className="bg-purple-600 text-white px-8 py-3 rounded-full hover:bg-purple-700 transition duration-300">Send Message</button>
          </form>
        </div>
      </section>

      <footer className="bg-white py-6">
        <div className="container mx-auto px-6 text-center">
          <p className="text-gray-600">© 2025 SocialMediaPro. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default App;
Open on CodeSandboxOpen Sandbox

更多推荐

查看全部

YouTube频道优化指南

数字营销zh
4.0

YouTube channel

YouTube频道优化SEO2025/6/14

AI营销策划工具

数字营销zh
4.0

import React from 'react'; class App extends React.Component { render() { return ( <div className="App bg-gray-100 min-h-screen"> <header className="bg-blue-600 text-white p-6"> <h1 className="text-3xl font-bold">AI-Powered Marketing Planner</h1> <p className="text-xl">Your all-in-one tool for effective marketing strategies</p> </header> <section className="p-6"> <h2 className="text-2xl font-semibold mb-4">Generate Your Marketing Plan</h2> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Content Suggestions</h3> <p className="text-gray-700">Get tailored content ideas that resonate with your audience.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Social Media Scheduling</h3> <p className="text-gray-700">Plan and schedule your posts for maximum engagement.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Ad Strategies</h3> <p className="text-gray-700">Create effective ad campaigns that drive results.</p> </div> </div> </section> <section className="bg-blue-50 p-6"> <h2 className="text-2xl font-semibold mb-4">Analyze Competitors</h2> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Competitor Insights</h3> <p className="text-gray-700">Understand what your competitors are doing and find opportunities to outperform them.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Strategy Recommendations</h3> <p className="text-gray-700">Get actionable recommendations to enhance your marketing efforts.</p> </div> </div> </section> <section className="p-6"> <h2 className="text-2xl font-semibold mb-4">Why Choose Us?</h2> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">AI-Driven Insights</h3> <p className="text-gray-700">Leverage the power of AI to make data-driven decisions.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">User-Friendly Interface</h3> <p className="text-gray-700">Easy to use, even for those new to marketing tools.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Comprehensive Solutions</h3> <p className="text-gray-700">From content creation to ad strategies, we've got you covered.</p> </div> </div> </section> <section className="bg-blue-50 p-6"> <h2 className="text-2xl font-semibold mb-4">Testimonials</h2> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <p className="text-gray-700 italic">"This tool has transformed the way we approach marketing. Highly recommended!"</p> <p className="text-gray-700 font-semibold mt-2">- Jane Doe, CEO of Example Inc.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <p className="text-gray-700 italic">"The AI insights are incredibly accurate and have helped us outperform our competitors."</p> <p className="text-gray-700 font-semibold mt-2">- John Smith, Marketing Director</p> </div> </div> </section> <section className="p-6"> <h2 className="text-2xl font-semibold mb-4">Pricing</h2> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Basic Plan</h3> <p className="text-gray-700">$29/month</p> <ul className="list-disc list-inside text-gray-700 mt-2"> <li>Content Suggestions</li> <li>Social Media Scheduling</li> </ul> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Pro Plan</h3> <p className="text-gray-700">$59/month</p> <ul className="list-disc list-inside text-gray-700 mt-2"> <li>All Basic Features</li> <li>Ad Strategies</li> <li>Competitor Analysis</li> </ul> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Enterprise Plan</h3> <p className="text-gray-700">$99/month</p> <ul className="list-disc list-inside text-gray-700 mt-2"> <li>All Pro Features</li> <li>Priority Support</li> <li>Custom Solutions</li> </ul> </div> </div> </section> <footer className="bg-blue-600 text-white p-6 mt-6"> <p className="text-center">© 2025 AI-Powered Marketing Planner. All rights reserved.</p> </footer> </div> ); } } export default App;

AI营销营销策划社交媒体管理2025/3/27

AI营销策划工具

数字营销zh
4.0

import React from 'react'; class App extends React.Component { render() { return ( <div className="App bg-gray-100 min-h-screen"> <header className="bg-blue-600 text-white p-6"> <h1 className="text-3xl font-bold">AI-Powered Marketing Planner</h1> <p className="text-xl">Your all-in-one tool for effective marketing strategies</p> </header> <section className="p-6"> <h2 className="text-2xl font-semibold mb-4">Generate Your Marketing Plan</h2> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Content Suggestions</h3> <p className="text-gray-700">Get tailored content ideas that resonate with your audience.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Social Media Scheduling</h3> <p className="text-gray-700">Plan and schedule your posts for maximum engagement.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Ad Strategies</h3> <p className="text-gray-700">Create effective ad campaigns that drive results.</p> </div> </div> </section> <section className="bg-blue-50 p-6"> <h2 className="text-2xl font-semibold mb-4">Analyze Competitors</h2> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Competitor Insights</h3> <p className="text-gray-700">Understand what your competitors are doing and find opportunities to outperform them.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Strategy Recommendations</h3> <p className="text-gray-700">Get actionable recommendations to enhance your marketing efforts.</p> </div> </div> </section> <section className="p-6"> <h2 className="text-2xl font-semibold mb-4">Why Choose Us?</h2> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">AI-Driven Insights</h3> <p className="text-gray-700">Leverage the power of AI to make data-driven decisions.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">User-Friendly Interface</h3> <p className="text-gray-700">Easy to use, even for those new to marketing tools.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Comprehensive Solutions</h3> <p className="text-gray-700">From content creation to ad strategies, we've got you covered.</p> </div> </div> </section> <section className="bg-blue-50 p-6"> <h2 className="text-2xl font-semibold mb-4">Testimonials</h2> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <p className="text-gray-700 italic">"This tool has transformed the way we approach marketing. Highly recommended!"</p> <p className="text-gray-700 font-semibold mt-2">- Jane Doe, CEO of Example Inc.</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <p className="text-gray-700 italic">"The AI insights are incredibly accurate and have helped us outperform our competitors."</p> <p className="text-gray-700 font-semibold mt-2">- John Smith, Marketing Director</p> </div> </div> </section> <section className="p-6"> <h2 className="text-2xl font-semibold mb-4">Pricing</h2> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Basic Plan</h3> <p className="text-gray-700">$29/month</p> <ul className="list-disc list-inside text-gray-700 mt-2"> <li>Content Suggestions</li> <li>Social Media Scheduling</li> </ul> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Pro Plan</h3> <p className="text-gray-700">$59/month</p> <ul className="list-disc list-inside text-gray-700 mt-2"> <li>All Basic Features</li> <li>Ad Strategies</li> <li>Competitor Analysis</li> </ul> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h3 className="text-xl font-semibold mb-2">Enterprise Plan</h3> <p className="text-gray-700">$99/month</p> <ul className="list-disc list-inside text-gray-700 mt-2"> <li>All Pro Features</li> <li>Priority Support</li> <li>Custom Solutions</li> </ul> </div> </div> </section> <footer className="bg-blue-600 text-white p-6 mt-6"> <p className="text-center">© 2025 AI-Powered Marketing Planner. All rights reserved.</p> </footer> </div> ); } } export default App;

AI营销营销策划社交媒体管理2025/3/27

AI营销策划工具

数字营销zh
4.0

create the best web app for: AI-Powered Marketing Planner A tool for small businesses that generates complete marketing plans with content suggestions, social media scheduling, and ad strategies. It analyzes competitors' strategies and suggests ways to outperform them. give me tabs and label to intre data to be working with plans of price

AI营销营销策划小型企业工具2025/3/27

AI营销策划工具

数字营销zh
4.0

create the best web app for: AI-Powered Marketing Planner A tool for small businesses that generates complete marketing plans with content suggestions, social media scheduling, and ad strategies. It analyzes competitors' strategies and suggests ways to outperform them. give me tabs and label to intre data to be working

AI营销营销策划小型企业2025/3/27

AI营销策划工具

数字营销zh
4.0

create the best web app for: AI-Powered Marketing Planner A tool for small businesses that generates complete marketing plans with content suggestions, social media scheduling, and ad strategies. It analyzes competitors' strategies and suggests ways to outperform them. give me tabs and label to intre data

AI营销营销策划小企业工具2025/3/27