monsefyoussef/react-native-web-wizard

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>React Native Web Wizard</title>7    <link rel="stylesheet" href="style.css">8    <script src="https://cdn.tailwindcss.com"></script>9    <script src="https://unpkg.com/feather-icons"></script>10    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11</head>12<body class="bg-gray-50">13    <custom-navbar></custom-navbar>14    15    <main class="container mx-auto px-4 py-8">16        <section class="text-center mb-12">17            <h1 class="text-4xl font-bold text-indigo-700 mb-4">React Native Web Wizard</h1>18            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Build beautiful mobile apps that run everywhere with React Native for Web</p>19        </section>20 21        <section class="grid md:grid-cols-3 gap-8 mb-12">22            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">23                <i data-feather="smartphone" class="w-12 h-12 text-indigo-500 mb-4"></i>24                <h2 class="text-xl font-semibold mb-2">Mobile First</h2>25                <p class="text-gray-600">Build apps that look and feel native on iOS and Android.</p>26            </div>27            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">28                <i data-feather="globe" class="w-12 h-12 text-indigo-500 mb-4"></i>29                <h2 class="text-xl font-semibold mb-2">Web Ready</h2>30                <p class="text-gray-600">Same codebase runs seamlessly in web browsers.</p>31            </div>32            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">33                <i data-feather="zap" class="w-12 h-12 text-indigo-500 mb-4"></i>34                <h2 class="text-xl font-semibold mb-2">High Performance</h2>35                <p class="text-gray-600">Optimized for 60fps animations and smooth interactions.</p>36            </div>37        </section>38 39        <section class="bg-indigo-50 p-8 rounded-xl mb-12">40            <h2 class="text-2xl font-bold text-indigo-700 mb-4">Get Started</h2>41            <div class="bg-white p-6 rounded-lg shadow-md">42                <pre class="bg-gray-800 text-gray-100 p-4 rounded overflow-x-auto">43                    <code>44npx create-react-app my-app --template react-native-web45cd my-app46npm install react-native-web47                    </code>48                </pre>49            </div>50        </section>51 52        <section class="mb-12">53            <h2 class="text-2xl font-bold text-indigo-700 mb-6 text-center">Featured Components</h2>54            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">55                <div class="bg-white p-4 rounded-lg shadow">56                    <div class="h-32 bg-indigo-100 rounded flex items-center justify-center mb-3">57                        <i data-feather="box" class="w-8 h-8 text-indigo-500"></i>58                    </div>59                    <h3 class="font-semibold">View</h3>60                </div>61                <div class="bg-white p-4 rounded-lg shadow">62                    <div class="h-32 bg-indigo-100 rounded flex items-center justify-center mb-3">63                        <i data-feather="type" class="w-8 h-8 text-indigo-500"></i>64                    </div>65                    <h3 class="font-semibold">Text</h3>66                </div>67                <div class="bg-white p-4 rounded-lg shadow">68                    <div class="h-32 bg-indigo-100 rounded flex items-center justify-center mb-3">69                        <i data-feather="image" class="w-8 h-8 text-indigo-500"></i>70                    </div>71                    <h3 class="font-semibold">Image</h3>72                </div>73                <div class="bg-white p-4 rounded-lg shadow">74                    <div class="h-32 bg-indigo-100 rounded flex items-center justify-center mb-3">75                        <i data-feather="navigation" class="w-8 h-8 text-indigo-500"></i>76                    </div>77                    <h3 class="font-semibold">ScrollView</h3>78                </div>79            </div>80        </section>81    </main>82 83    <custom-footer></custom-footer>84 85    <script src="components/navbar.js"></script>86    <script src="components/footer.js"></script>87    <script src="script.js"></script>88    <script>feather.replace();</script>89<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>90</body>91</html>