primadona/reactnativerocketboost
0
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>Reactify: Pixel Perfect Playground</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">10 <style>11 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');12 :root {13 --primary: #6366f1;14 --secondary: #10b981;15 }16 body {17 font-family: 'Inter', sans-serif;18 background-color: #f8fafc;19 }20 .gradient-bg {21 background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(16,185,129,0.1) 100%);22 }23 </style>24</head>25<body class="min-h-screen">26 <div id="root" class="flex flex-col min-h-screen">27 <!-- Navigation -->28 <nav class="bg-white shadow-sm">29 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">30 <div class="flex justify-between h-16">31 <div class="flex items-center">32 <i data-feather="code" class="text-indigo-500"></i>33 <span class="ml-2 text-xl font-semibold text-gray-900">Reactify</span>34 </div>35 <div class="hidden md:flex items-center space-x-8">36 <a href="index.html" class="text-indigo-600 font-medium">Home</a>37 <a href="react-native.html" class="text-gray-500 hover:text-gray-700">React Native</a>38 <a href="dream-diary.html" class="text-gray-500 hover:text-gray-700">Dream Diary</a>39<button class="bg-indigo-500 text-white px-4 py-2 rounded-md hover:bg-indigo-600 transition">40 Get Started41 </button>42 </div>43 <button class="md:hidden">44 <i data-feather="menu"></i>45 </button>46 </div>47 </div>48 </nav>49 50 <!-- Hero Section -->51 <main class="flex-grow gradient-bg">52 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-24">53 <div class="text-center">54 <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">55 Build <span class="text-indigo-600">React</span> Apps Faster56 </h1>57 <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">58 A production-ready React starter with TypeScript, Tailwind CSS, and all the modern tools you need.59 </p>60 <div class="flex justify-center space-x-4">61 <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg hover:bg-indigo-700 transition shadow-md">62 Explore Components63 </button>64 <button class="bg-emerald-500 text-white px-6 py-3 rounded-lg hover:bg-emerald-600 transition shadow-md">65 View Documentation66 </button>67 </div>68 </div>69 70 <!-- Sample Component -->71 <div class="mt-16 max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">72 <div class="flex items-center mb-4">73 <div class="h-3 w-3 rounded-full bg-red-500 mr-2"></div>74 <div class="h-3 w-3 rounded-full bg-yellow-500 mr-2"></div>75 <div class="h-3 w-3 rounded-full bg-green-500"></div>76 </div>77 <div class="space-y-4">78 <div class="flex items-center">79 <span class="text-gray-400 mr-4">1</span>80 <span class="text-purple-700">import</span> <span class="text-gray-900">React</span> <span class="text-purple-700">from</span> <span class="text-green-600">'react'</span>;81 </div>82 <div class="flex items-center">83 <span class="text-gray-400 mr-4">2</span>84 <span class="text-purple-700">import</span> <span class="text-gray-900">{ Button }</span> <span class="text-purple-700">from</span> <span class="text-green-600">'./components'</span>;85 </div>86 <div class="flex items-center">87 <span class="text-gray-400 mr-4">3</span>88 <span class="text-gray-500">// Your beautiful component</span>89 </div>90 <div class="flex items-center">91 <span class="text-gray-400 mr-4">4</span>92 <span class="text-purple-700">const</span> <span class="text-blue-500">App</span> <span class="text-purple-700">=</span> () <span class="text-purple-700">=></span> <span class="text-gray-900">{</span>93 </div>94 <div class="flex items-center">95 <span class="text-gray-400 mr-4">5</span>96 <span class="text-gray-900 ml-4">return</span> <span class="text-gray-900">(</span>97 </div>98 <div class="flex items-center">99 <span class="text-gray-400 mr-4">6</span>100 <span class="text-gray-900101</body>102</html>