Hugging Face's logo

Spaces:
abdorbeh
/
snapgenius-ad-creator
Running

App Files Community
abdorbeh commited on
Commit
41fb75a
·
verified ·
1 Parent(s): f8bab4e

📝 الوصف (كامل)

Browse files

SmartAd Snap هو تطبيق موبايل ذكي مخصص لمصممي السوشيال ميديا وأصحاب المشاريع الصغيرة.
يسهّل عليك إنشاء إعلانات احترافية بسرعة كبيرة ومن غير تعقيد.

✨ المميزات الرئيسية:

ارفع صورة مرجعية واحدة وحوّلها إلى تصميمات جاهزة لكل منصات التواصل.

إزالة الخلفية أو تغييرها تلقائياً بنقرة واحدة.

تحسين جودة الصور والألوان مع استخراج ألوان العلامة التجارية.

قوالب جاهزة ومتنوعة تناسب جميع المجالات (متاجر – مطاعم – منتجات – خدمات).

توليد نصوص إعلانية (كابتشن) مع هاشتاجات مقترحة تلقائياً.

تصدير بأحجام متعددة (Instagram Post, Story, Facebook, TikTok).

مجلدات لحفظ مشاريعك وتنظيمها بسهولة.


🚀 مع SmartAd Snap، وفر وقتك وجهدك، وركّز على الإبداع بدل الأعمال الروتينية المتكررة.


---

🏷️ الكلمات المفتاحية (Keywords)

تصميم، سوشيال ميديا، إعلانات، صور، فوتوشوب، كانفا، تصميم إعلاني، منشورات، تسويق، محتوى.

Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +239 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Snapgenius Ad Creator
3
- emoji: 🚀
4
- colorFrom: green
5
  colorTo: purple
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: SnapGenius Ad Creator 🚀
3
+ colorFrom: yellow
 
4
  colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,240 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SnapGenius - Create Stunning Social Media Ads</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#6366f1',
17
+ secondary: '#8b5cf6',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
25
+ body {
26
+ font-family: 'Poppins', sans-serif;
27
+ }
28
+ .hero-gradient {
29
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
30
+ }
31
+ .feature-card:hover {
32
+ transform: translateY(-5px);
33
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50">
38
+ <!-- Vanta.js Background -->
39
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
40
+
41
+ <!-- Navigation -->
42
+ <nav class="bg-white/80 backdrop-blur-md sticky top-0 z-50 shadow-sm">
43
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
44
+ <div class="flex justify-between h-16 items-center">
45
+ <div class="flex items-center">
46
+ <div class="flex-shrink-0 flex items-center">
47
+ <i data-feather="zap" class="text-primary h-8 w-8"></i>
48
+ <span class="ml-2 text-xl font-bold text-gray-900">SnapGenius</span>
49
+ </div>
50
+ </div>
51
+ <div class="hidden md:block">
52
+ <div class="ml-10 flex items-center space-x-4">
53
+ <a href="#" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:text-primary transition">Features</a>
54
+ <a href="#" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:text-primary transition">Templates</a>
55
+ <a href="#" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:text-primary transition">Pricing</a>
56
+ <a href="#" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium hover:text-primary transition">About</a>
57
+ </div>
58
+ </div>
59
+ <div class="flex items-center">
60
+ <a href="#" class="bg-primary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary/90 transition">Try for Free</a>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </nav>
65
+
66
+ <!-- Hero Section -->
67
+ <section class="hero-gradient text-white pt-20 pb-32">
68
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
69
+ <div class="grid md:grid-cols-2 gap-12 items-center">
70
+ <div>
71
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Create Stunning Social Media Ads in Seconds</h1>
72
+ <p class="text-xl mb-8 text-white/90">Transform your ideas into professional designs with AI-powered tools. No design skills needed!</p>
73
+ <div class="flex flex-col sm:flex-row gap-4">
74
+ <a href="#" class="bg-white text-primary px-6 py-3 rounded-lg font-medium text-center hover:bg-gray-100 transition">Start Designing Now</a>
75
+ <a href="#" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium text-center hover:bg-white/10 transition">Watch Demo</a>
76
+ </div>
77
+ </div>
78
+ <div class="relative">
79
+ <img src="http://static.photos/technology/640x360/42" alt="App Preview" class="rounded-xl shadow-2xl border-8 border-white/20">
80
+ <div class="absolute -bottom-6 -right-6 bg-white p-3 rounded-lg shadow-lg">
81
+ <i data-feather="award" class="text-yellow-500 h-8 w-8"></i>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Features Section -->
89
+ <section class="py-20 bg-white">
90
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
91
+ <div class="text-center mb-16">
92
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Powerful Features</h2>
93
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Everything you need to create professional social media content in one place</p>
94
+ </div>
95
+
96
+ <div class="grid md:grid-cols-3 gap-8">
97
+ <!-- Feature 1 -->
98
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
99
+ <div class="bg-primary/10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
100
+ <i data-feather="image" class="text-primary h-5 w-5"></i>
101
+ </div>
102
+ <h3 class="text-xl font-semibold mb-3">Smart Image Enhancement</h3>
103
+ <p class="text-gray-600">Automatically improve image quality and adjust colors to match your brand identity.</p>
104
+ </div>
105
+
106
+ <!-- Feature 2 -->
107
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
108
+ <div class="bg-primary/10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
109
+ <i data-feather="layers" class="text-primary h-5 w-5"></i>
110
+ </div>
111
+ <h3 class="text-xl font-semibold mb-3">Background Magic</h3>
112
+ <p class="text-gray-600">Remove or replace backgrounds with a single click. No complex editing required.</p>
113
+ </div>
114
+
115
+ <!-- Feature 3 -->
116
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
117
+ <div class="bg-primary/10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
118
+ <i data-feather="edit-3" class="text-primary h-5 w-5"></i>
119
+ </div>
120
+ <h3 class="text-xl font-semibold mb-3">AI Caption Generator</h3>
121
+ <p class="text-gray-600">Get engaging captions and hashtag suggestions tailored to your content.</p>
122
+ </div>
123
+
124
+ <!-- Feature 4 -->
125
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
126
+ <div class="bg-primary/10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
127
+ <i data-feather="smartphone" class="text-primary h-5 w-5"></i>
128
+ </div>
129
+ <h3 class="text-xl font-semibold mb-3">Multi-Platform Export</h3>
130
+ <p class="text-gray-600">Export designs in perfect sizes for Instagram, Facebook, TikTok and more.</p>
131
+ </div>
132
+
133
+ <!-- Feature 5 -->
134
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
135
+ <div class="bg-primary/10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
136
+ <i data-feather="folder" class="text-primary h-5 w-5"></i>
137
+ </div>
138
+ <h3 class="text-xl font-semibold mb-3">Project Organization</h3>
139
+ <p class="text-gray-600">Smart folder system to keep all your designs organized and accessible.</p>
140
+ </div>
141
+
142
+ <!-- Feature 6 -->
143
+ <div class="feature-card bg-gray-50 p-8 rounded-xl transition duration-300">
144
+ <div class="bg-primary/10 p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
145
+ <i data-feather="clock" class="text-primary h-5 w-5"></i>
146
+ </div>
147
+ <h3 class="text-xl font-semibold mb-3">Time-Saving Templates</h3>
148
+ <p class="text-gray-600">Hundreds of professionally designed templates for every business niche.</p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </section>
153
+
154
+ <!-- CTA Section -->
155
+ <section class="py-20 bg-gradient-to-r from-primary to-secondary">
156
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
157
+ <h2 class="text-3xl font-bold text-white mb-6">Ready to Transform Your Social Media?</h2>
158
+ <p class="text-xl text-white/90 mb-8 max-w-3xl mx-auto">Join thousands of creators and businesses who are saving hours of work with SnapGenius.</p>
159
+ <a href="#" class="inline-block bg-white text-primary px-8 py-4 rounded-lg font-bold text-lg hover:bg-gray-100 transition shadow-lg">Start Your Free Trial Now</a>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- Footer -->
164
+ <footer class="bg-gray-900 text-white py-12">
165
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
166
+ <div class="grid md:grid-cols-4 gap-8">
167
+ <div>
168
+ <div class="flex items-center mb-4">
169
+ <i data-feather="zap" class="text-primary h-6 w-6"></i>
170
+ <span class="ml-2 text-xl font-bold">SnapGenius</span>
171
+ </div>
172
+ <p class="text-gray-400">The smartest way to create professional social media ads without design skills.</p>
173
+ </div>
174
+ <div>
175
+ <h3 class="text-lg font-semibold mb-4">Product</h3>
176
+ <ul class="space-y-2">
177
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li>
178
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
179
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Templates</a></li>
180
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li>
181
+ </ul>
182
+ </div>
183
+ <div>
184
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
185
+ <ul class="space-y-2">
186
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
187
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
188
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
189
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li>
190
+ </ul>
191
+ </div>
192
+ <div>
193
+ <h3 class="text-lg font-semibold mb-4">Connect</h3>
194
+ <div class="flex space-x-4 mb-4">
195
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
196
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
197
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
198
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
199
+ </div>
200
+ <p class="text-gray-400">Subscribe to our newsletter</p>
201
+ <div class="mt-2 flex">
202
+ <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-800 text-white rounded-l focus:outline-none focus:ring-2 focus:ring-primary w-full">
203
+ <button class="bg-primary px-4 py-2 rounded-r hover:bg-primary/90 transition"><i data-feather="send"></i></button>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
208
+ <p class="text-gray-400 text-sm">© 2023 SnapGenius. All rights reserved.</p>
209
+ <div class="flex space-x-6 mt-4 md:mt-0">
210
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a>
211
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a>
212
+ <a href="#" class="text-gray-400 hover:text-white text-sm transition">Cookies</a>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </footer>
217
+
218
+ <script>
219
+ // Initialize Vanta.js
220
+ VANTA.NET({
221
+ el: "#vanta-bg",
222
+ mouseControls: true,
223
+ touchControls: true,
224
+ gyroControls: false,
225
+ minHeight: 200.00,
226
+ minWidth: 200.00,
227
+ scale: 1.00,
228
+ scaleMobile: 1.00,
229
+ color: 0x6366f1,
230
+ backgroundColor: 0xf8fafc,
231
+ points: 10.00,
232
+ maxDistance: 20.00,
233
+ spacing: 15.00
234
+ });
235
+
236
+ // Initialize Feather Icons
237
+ feather.replace();
238
+ </script>
239
+ </body>
240
  </html>