Spaces:

Twinory
/

undefined

Running

App Files Files Community

Twinory commited on Oct 10, 2025

Commit

50fb7b5

verified ·

1 Parent(s): 540bb76

Use the just uploaded image as the logo of the company Twinory. Use that same font in the website. I need the logo to be used as the background removed and blended correctly with the website background. I need animation effects when opening website that the homepage opens in with some professional effects, along with the tagline

Browse files

Files changed (3) hide show

about.html +10 -6
index.html +87 -131
services.html +10 -6

about.html CHANGED Viewed

@@ -37,9 +37,9 @@
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0 flex items-center">
-                        <span class="text-white font-bold text-2xl">TWINORY</span>
                     </div>
-                </div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                     <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                     <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:text-orange-400">About</a>
@@ -56,10 +56,9 @@
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
-    <div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                 WHO WE ARE
             </h1>
@@ -223,9 +222,14 @@
 </div>
         </div>
     </footer>
     <script>
         feather.replace();
     </script>
 </body>
 </html>

             <div class="flex justify-between h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0 flex items-center">
+                        <img src="/static/logo.png" alt="Twinory Logo" class="h-10">
                     </div>
+</div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                     <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                     <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:text-orange-400">About</a>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
+    <div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32" data-aos="fade">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                 WHO WE ARE
             </h1>
 </div>
         </div>
     </footer>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script>
         feather.replace();
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
     </script>
 </body>
 </html>

index.html CHANGED Viewed

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Twinory | Amazon Seller Consulting</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Poppins', sans-serif;
@@ -23,16 +23,20 @@
         .hero-bg {
             background: linear-gradient(135deg, #1A1A1A 0%, #0D0D0D 100%);
         }
-        .cta-button {
             transition: all 0.3s ease;
         }
-        .cta-button:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 20px rgba(255, 153, 0, 0.3);
-        }
-        .service-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
         }
     </style>
 </head>
@@ -40,20 +44,20 @@
     <!-- Navigation -->
     <nav class="fixed w-full z-50 bg-black bg-opacity-90 border-b border-gray-800">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-20">
                 <div class="flex items-center">
                     <div class="flex-shrink-0 flex items-center">
-                        <span class="text-white font-bold text-3xl tracking-tighter">TWINORY</span>
                     </div>
                 </div>
-                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-10">
-                    <a href="#" class="text-white px-4 py-3 rounded-md text-lg font-bold tracking-wide hover:text-[#FF9900] transition-all duration-300 transform hover:scale-105">HOME</a>
-                    <a href="about.html" class="text-gray-300 px-4 py-3 rounded-md text-lg font-bold tracking-wide hover:text-white hover:bg-black hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">ABOUT</a>
-                    <a href="services.html" class="text-gray-300 px-4 py-3 rounded-md text-lg font-bold tracking-wide hover:text-white hover:bg-black hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">SERVICES</a>
-                    <a href="contact.html" class="text-gray-300 px-4 py-3 rounded-md text-lg font-bold tracking-wide hover:text-white hover:bg-black hover:bg-opacity-20 transition-all duration-300 transform hover:scale-105">CONTACT</a>
-                    <a href="contact.html" class="ml-6 bg-[#FF9900] text-black px-8 py-3 rounded-md font-bold text-lg tracking-wide hover:bg-[#FF5100] transition-all duration-300 transform hover:scale-105 shadow-lg shadow-[#FF9900]/30">GET STARTED</a>
-</div>
-<div class="-mr-2 flex items-center md:hidden">
                     <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
                         <span class="sr-only">Open main menu</span>
                         <i data-feather="menu"></i>
@@ -64,109 +68,67 @@
     </nav>
     <!-- Hero Section -->
-    <div id="hero" class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
-                <div class="mb-12 lg:mb-0">
-    <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold leading-tight mb-6 bg-clip-text text-transparent bg-gradient-to-r from-[#FF9900] to-[#FF5100]">
-        JUST LIST IT!
-    </h1>
-    <p class="text-2xl md:text-3xl text-gray-300 mb-8 font-light">
-        Elevate your Amazon presence with our cutting-edge seller solutions.
-    </p>
-<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                        <a href="services.html" class="cta-button bg-[#FF9900] text-black px-8 py-4 rounded-md font-bold text-lg hover:bg-orange-600">Start Your Listing Journey</a>
-                    </div>
-                </div>
-                <div class="relative">
-                    <img src="http://static.photos/technology/1200x630/42" alt="Amazon Analytics Dashboard" class="rounded-xl shadow-2xl border border-gray-700">
-                </div>
             </div>
         </div>
     </div>
-    <!-- Highlights Section -->
-    <div class="bg-black py-16">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-gray-900 rounded-xl p-8 text-center transition duration-300 hover:border-b-4 hover:border-[#FF9900]">
-                    <div class="flex justify-center mb-4">
-                        <div class="bg-[#FF9900] bg-opacity-10 p-4 rounded-full">
-                            <i data-feather="user" class="text-[#FF9900] w-8 h-8"></i>
-                        </div>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Amazon Seller Account Setup</h3>
-                    <p class="text-gray-400">Made easy with our expert guidance</p>
-                </div>
-                <div class="bg-gray-900 rounded-xl p-8 text-center transition duration-300 hover:border-b-4 hover:border-[#FF9900]">
-                    <div class="flex justify-center mb-4">
-                        <div class="bg-[#FF9900] bg-opacity-10 p-4 rounded-full">
-                            <i data-feather="search" class="text-[#FF9900] w-8 h-8"></i>
-                        </div>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Strategic Product Research</h3>
-                    <p class="text-gray-400">Find winning products effortlessly</p>
-                </div>
-                <div class="bg-gray-900 rounded-xl p-8 text-center transition duration-300 hover:border-b-4 hover:border-[#FF9900]">
-                    <div class="flex justify-center mb-4">
-                        <div class="bg-[#FF9900] bg-opacity-10 p-4 rounded-full">
-                            <i data-feather="trending-up" class="text-[#FF9900] w-8 h-8"></i>
-                        </div>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Performance Optimization</h3>
-                    <p class="text-gray-400">Boost your rankings and sales</p>
                 </div>
             </div>
-        </div>
-    </div>
-    <!-- Why Choose Us Section -->
-    <div class="bg-gray-900 py-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
-                <div class="mb-12 lg:mb-0">
-                    <img src="http://static.photos/office/1024x576/123" alt="Amazon Analytics" class="rounded-xl shadow-2xl border border-gray-700">
                 </div>
-                <div>
-                    <h2 class="text-3xl md:text-4xl font-bold mb-8">Why Choose Twinory?</h2>
-                    <ul class="space-y-6">
-                        <li class="flex items-start">
-                            <div class="flex-shrink-0 bg-[#FF9900] bg-opacity-10 p-2 rounded-full">
-                                <i data-feather="check-circle" class="text-[#FF9900] w-5 h-5"></i>
-                            </div>
-                            <p class="ml-3 text-lg text-gray-300">
-                                <span class="font-bold">Deep marketplace insight</span> from professional compliance experts
-                            </p>
-                        </li>
-                        <li class="flex items-start">
-                            <div class="flex-shrink-0 bg-[#FF9900] bg-opacity-10 p-2 rounded-full">
-                                <i data-feather="check-circle" class="text-[#FF9900] w-5 h-5"></i>
-                            </div>
-                            <p class="ml-3 text-lg text-gray-300">
-                                <span class="font-bold">100% policy-aligned strategies</span> for sustainable growth
-                            </p>
-                        </li>
-                        <li class="flex items-start">
-                            <div class="flex-shrink-0 bg-[#FF9900] bg-opacity-10 p-2 rounded-full">
-                                <i data-feather="check-circle" class="text-[#FF9900] w-5 h-5"></i>
-                            </div>
-                            <p class="ml-3 text-lg text-gray-300">
-                                <span class="font-bold">Custom guidance</span> tuned for every seller's goals
-                            </p>
-                        </li>
-                    </ul>
                 </div>
             </div>
         </div>
     </div>
-    <!-- Call to Action -->
-    <div class="bg-[#FF9900] py-16">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">Ready to take your Amazon store to the next level?</h2>
-            <p class="text-xl text-black mb-8">Let's build your success—ethically and effectively.</p>
-            <a href="contact.html" class="bg-black text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-gray-900 transition duration-300">Contact Us</a>
-        </div>
     </div>
     <!-- Footer -->
@@ -174,7 +136,9 @@
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div class="md:col-span-2">
-                    <h3 class="text-2xl font-bold mb-4">TWINORY</h3>
                     <p class="text-gray-400">Amazon Seller Growth & Compliance Solutions.</p>
                     <div class="flex space-x-4 mt-4">
                         <a href="#" class="text-gray-400 hover:text-white">
@@ -210,27 +174,19 @@
                 </div>
             </div>
             <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-                <p>&copy; 2023 TWINORY LLC. All rights reserved.</p>
             </div>
         </div>
     </footer>
-        <script>
-            feather.replace();
-            VANTA.NET({
-                el: "#hero",
-                mouseControls: true,
-                touchControls: true,
-                gyroControls: false,
-                minHeight: 200.00,
-                minWidth: 200.00,
-                scale: 1.00,
-                scaleMobile: 1.00,
-                color: 0xff9900,
-                backgroundColor: 0x0d0d0d,
-                points: 16.00,
-                maxDistance: 26.00,
-                spacing: 20.00
-            })
-        </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Twinory | Amazon Seller Experts</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <style>
         body {
             font-family: 'Poppins', sans-serif;
         .hero-bg {
             background: linear-gradient(135deg, #1A1A1A 0%, #0D0D0D 100%);
         }
+        .feature-card {
             transition: all 0.3s ease;
+            background: rgba(255,255,255,0.02);
         }
+        .feature-card:hover {
             transform: translateY(-5px);
+            background: rgba(255,255,255,0.05);
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .animate-fade {
+            animation: fadeIn 1s ease-out forwards;
         }
     </style>
 </head>
     <!-- Navigation -->
     <nav class="fixed w-full z-50 bg-black bg-opacity-90 border-b border-gray-800">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0 flex items-center">
+                        <img src="/static/logo.png" alt="Twinory Logo" class="h-10">
                     </div>
                 </div>
+                <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
+                    <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium hover:text-orange-400">Home</a>
+                    <a href="about.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
+                    <a href="services.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
+                    <a href="contact.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
+                    <a href="#" class="ml-4 bg-[#FF9900] text-black px-6 py-2 rounded-md font-medium hover:bg-orange-600 transition duration-300">Get Started</a>
+                </div>
+                <div class="-mr-2 flex items-center md:hidden">
                     <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
                         <span class="sr-only">Open main menu</span>
                         <i data-feather="menu"></i>
     </nav>
     <!-- Hero Section -->
+    <div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center" data-aos="fade">
+            <div class="animate-fade mb-8">
+                <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6">
+                    ELEVATE YOUR <span class="text-[#FF9900]">AMAZON</span> GAME
+                </h1>
+                <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto">
+                    Data-driven Amazon consulting for ethical sellers who want to win the right way
+                </p>
+            </div>
+            <div class="mt-12" data-aos="fade-up" data-aos-delay="300">
+                <a href="services.html" class="inline-block bg-[#FF9900] text-black px-8 py-3 rounded-md font-bold text-lg hover:bg-orange-600 transition duration-300 mr-4">Our Services</a>
+                <a href="contact.html" class="inline-block bg-transparent border-2 border-[#FF9900] text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-[#FF9900] hover:text-black transition duration-300">Free Consultation</a>
             </div>
         </div>
     </div>
+    <!-- Features Section -->
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div class="text-center mb-16" data-aos="fade">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Why Choose Twinory</h2>
+            <p class="text-xl text-gray-400 max-w-3xl mx-auto">
+                We combine technical expertise with ethical strategies to help you grow sustainably on Amazon
+            </p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div class="feature-card p-8 rounded-lg" data-aos="fade-up" data-aos-delay="100">
+                <div class="bg-[#FF9900] bg-opacity-10 p-4 rounded-full w-14 h-14 flex items-center justify-center mb-6">
+                    <i data-feather="shield" class="text-[#FF9900] w-6 h-6"></i>
                 </div>
+                <h3 class="text-xl font-bold mb-3">Policy-Compliant Growth</h3>
+                <p class="text-gray-400">
+                    We only implement strategies that align with Amazon's terms of service, protecting your account long-term.
+                </p>
             </div>
+            <div class="feature-card p-8 rounded-lg" data-aos="fade-up" data-aos-delay="200">
+                <div class="bg-[#FF9900] bg-opacity-10 p-4 rounded-full w-14 h-14 flex items-center justify-center mb-6">
+                    <i data-feather="bar-chart-2" class="text-[#FF9900] w-6 h-6"></i>
                 </div>
+                <h3 class="text-xl font-bold mb-3">Data-Driven Decisions</h3>
+                <p class="text-gray-400">
+                    Our recommendations are based on comprehensive market analysis and performance metrics.
+                </p>
+            </div>
+            <div class="feature-card p-8 rounded-lg" data-aos="fade-up" data-aos-delay="300">
+                <div class="bg-[#FF9900] bg-opacity-10 p-4 rounded-full w-14 h-14 flex items-center justify-center mb-6">
+                    <i data-feather="zap" class="text-[#FF9900] w-6 h-6"></i>
                 </div>
+                <h3 class="text-xl font-bold mb-3">Proven Results</h3>
+                <p class="text-gray-400">
+                    We've helped sellers achieve 2-5x growth while maintaining excellent account health metrics.
+                </p>
             </div>
         </div>
     </div>
+    <!-- CTA Section -->
+    <div class="bg-[#FF9900] rounded-xl p-12 text-center mx-4 sm:mx-8 lg:mx-16 mb-16" data-aos="fade">
+        <h3 class="text-2xl md:text-3xl font-bold mb-4 text-black">Ready to scale your Amazon business the right way?</h3>
+        <p class="text-xl text-black mb-6">Our team is standing by to help you achieve sustainable growth.</p>
+        <a href="contact.html" class="inline-block bg-black text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-gray-900 transition duration-300">Get Started Today</a>
     </div>
     <!-- Footer -->
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div class="md:col-span-2">
+                    <div class="flex items-center mb-4">
+                        <img src="/static/logo.png" alt="Twinory Logo" class="h-8 mr-2">
+                    </div>
                     <p class="text-gray-400">Amazon Seller Growth & Compliance Solutions.</p>
                     <div class="flex space-x-4 mt-4">
                         <a href="#" class="text-gray-400 hover:text-white">
                 </div>
             </div>
             <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
+                <p>&copy; 2025 TWINORY LLC. All rights reserved.</p>
             </div>
         </div>
     </footer>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script>
+        feather.replace();
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+    </script>
 </body>
+</html>

services.html CHANGED Viewed

@@ -42,9 +42,9 @@
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0 flex items-center">
-                        <span class="text-white font-bold text-2xl">TWINORY</span>
                     </div>
-                </div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                     <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                     <a href="about.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
@@ -61,10 +61,9 @@
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
-    <div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                 OUR SERVICES
             </h1>
@@ -317,9 +316,14 @@
 </div>
         </div>
     </footer>
     <script>
         feather.replace();
     </script>
 </body>
 </html>

             <div class="flex justify-between h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0 flex items-center">
+                        <img src="/static/logo.png" alt="Twinory Logo" class="h-10">
                     </div>
+</div>
                 <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
                     <a href="index.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
                     <a href="about.html" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
+    <div class="hero-bg pt-32 pb-20 md:pt-40 md:pb-32" data-aos="fade">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
             <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                 OUR SERVICES
             </h1>
 </div>
         </div>
     </footer>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script>
         feather.replace();
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
     </script>
 </body>
 </html>