Spaces:

mahen23
/

new-recruit

Running

App Files Files Community

mahen23 commited on Apr 11

Commit

f73fd0f

verified ·

1 Parent(s): eac179a

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +360 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: New Recruit
-emoji: 📚
-colorFrom: indigo
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: new-recruit
+emoji: 🐳
+colorFrom: gray
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,360 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Global Pathways - Work Opportunities in America & London</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .bg-slideshow {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            background-size: cover;
+            background-position: center;
+            opacity: 0;
+            transition: opacity 2s ease-in-out;
+        }
+        .bg-slideshow.active {
+            opacity: 1;
+        }
+        .form-container {
+            backdrop-filter: blur(10px);
+            background-color: rgba(255, 255, 255, 0.85);
+        }
+        .flag-icon {
+            width: 30px;
+            height: 20px;
+            display: inline-block;
+            margin-right: 10px;
+            border: 1px solid #ddd;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Background Slideshow -->
+    <div class="bg-slideshow" id="slide1" style="background-image: url('https://images.unsplash.com/photo-1499092346589-b9b6be3e94b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80');"></div>
+    <div class="bg-slideshow" id="slide2" style="background-image: url('https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2076&q=80');"></div>
+    <div class="bg-slideshow" id="slide3" style="background-image: url('https://images.unsplash.com/photo-1501594907352-04cda38ebc29?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80');"></div>
+    <div class="bg-slideshow" id="slide4" style="background-image: url('https://images.unsplash.com/photo-1533929736458-ca588d08c8be?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');"></div>
+    <!-- Navigation -->
+    <nav class="bg-blue-900 text-white p-4 shadow-lg">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-globe text-2xl"></i>
+                <h1 class="text-xl font-bold">Global Pathways</h1>
+            </div>
+            <div class="hidden md:flex space-x-6">
+                <a href="#" class="hover:text-blue-200">Home</a>
+                <a href="#" class="hover:text-blue-200">Opportunities</a>
+                <a href="#" class="hover:text-blue-200">Success Stories</a>
+                <a href="#" class="hover:text-blue-200">About Us</a>
+                <a href="#" class="hover:text-blue-200">Contact</a>
+            </div>
+            <button class="md:hidden">
+                <i class="fas fa-bars text-xl"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="flex-grow flex items-center py-12 px-4">
+        <div class="container mx-auto flex flex-col md:flex-row items-center">
+            <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
+                <h2 class="text-4xl md:text-5xl font-bold text-blue-900 mb-4">Your Pathway to <span class="text-blue-600">International</span> Success</h2>
+                <p class="text-lg text-gray-700 mb-6">We connect talented professionals from Africa with life-changing career opportunities in the USA and UK. Start your journey today!</p>
+                <div class="flex flex-wrap gap-4 mb-8">
+                    <div class="flex items-center bg-white p-3 rounded-lg shadow">
+                        <span class="flag-icon" style="background: linear-gradient(to bottom, #00247d, #00247d 33%, #fff 33%, #fff 66%, #cf142b 66%);"></span>
+                        <span>United Kingdom</span>
+                    </div>
+                    <div class="flex items-center bg-white p-3 rounded-lg shadow">
+                        <span class="flag-icon" style="background: linear-gradient(to right, #b22234, #b22234 30%, #fff 30%, #fff 38%, #3c3b6e 38%, #3c3b6e 62%, #fff 62%, #fff 70%, #b22234 70%);"></span>
+                        <span>United States</span>
+                    </div>
+                </div>
+                <div class="bg-green-100 border-l-4 border-green-500 p-4 mb-6">
+                    <div class="flex">
+                        <div class="flex-shrink-0">
+                            <i class="fas fa-check-circle text-green-500 text-xl"></i>
+                        </div>
+                        <div class="ml-3">
+                            <p class="text-sm text-green-700">
+                                Over 5,000 successful placements since 2010. Let us help you achieve your dreams!
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Signup Form -->
+            <div class="md:w-1/2">
+                <div class="form-container p-8 rounded-xl shadow-2xl max-w-md mx-auto">
+                    <h3 class="text-2xl font-bold text-center text-blue-900 mb-6">Start Your Application</h3>
+                    <form id="signupForm" class="space-y-4">
+                        <div>
+                            <label for="fullname" class="block text-sm font-medium text-gray-700">Full Name</label>
+                            <input type="text" id="fullname" name="fullname" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div>
+                            <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
+                            <input type="email" id="email" name="email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div>
+                            <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
+                            <input type="tel" id="phone" name="phone" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div>
+                            <label for="country" class="block text-sm font-medium text-gray-700">Country of Origin</label>
+                            <select id="country" name="country" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                                <option value="">Select your country</option>
+                                <option value="Nigeria">Nigeria</option>
+                                <option value="Ghana">Ghana</option>
+                                <option value="Kenya">Kenya</option>
+                                <option value="South Africa">South Africa</option>
+                                <option value="Ethiopia">Ethiopia</option>
+                                <option value="Other">Other African Country</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="destination" class="block text-sm font-medium text-gray-700">Preferred Destination</label>
+                            <select id="destination" name="destination" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                                <option value="">Select destination</option>
+                                <option value="USA">United States</option>
+                                <option value="UK">United Kingdom</option>
+                                <option value="Both">Both</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="profession" class="block text-sm font-medium text-gray-700">Profession</label>
+                            <input type="text" id="profession" name="profession" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                        </div>
+                        <div>
+                            <label for="experience" class="block text-sm font-medium text-gray-700">Years of Experience</label>
+                            <select id="experience" name="experience" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                                <option value="">Select experience</option>
+                                <option value="0-2">0-2 years</option>
+                                <option value="3-5">3-5 years</option>
+                                <option value="6-10">6-10 years</option>
+                                <option value="10+">10+ years</option>
+                            </select>
+                        </div>
+                        <div class="flex items-center">
+                            <input id="terms" name="terms" type="checkbox" required class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                            <label for="terms" class="ml-2 block text-sm text-gray-700">
+                                I agree to the <a href="#" class="text-blue-600 hover:text-blue-500">terms and conditions</a>
+                            </label>
+                        </div>
+                        <div>
+                            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                                Submit Application
+                                <i class="fas fa-arrow-right ml-2"></i>
+                            </button>
+                        </div>
+                    </form>
+                    <div class="mt-4 text-center text-sm text-gray-600">
+                        Already registered? <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Check your status</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="bg-white py-12 px-4">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center text-blue-900 mb-12">Why Choose Global Pathways?</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="text-center p-6 rounded-lg bg-blue-50">
+                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white mb-4">
+                        <i class="fas fa-passport text-xl"></i>
+                    </div>
+                    <h3 class="text-lg font-medium text-blue-900 mb-2">Visa Assistance</h3>
+                    <p class="text-gray-600">Our experts guide you through the entire visa application process to maximize your chances of approval.</p>
+                </div>
+                <div class="text-center p-6 rounded-lg bg-blue-50">
+                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white mb-4">
+                        <i class="fas fa-briefcase text-xl"></i>
+                    </div>
+                    <h3 class="text-lg font-medium text-blue-900 mb-2">Job Matching</h3>
+                    <p class="text-gray-600">We connect you with employers that match your skills and career aspirations in your preferred destination.</p>
+                </div>
+                <div class="text-center p-6 rounded-lg bg-blue-50">
+                    <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-md bg-blue-600 text-white mb-4">
+                        <i class="fas fa-home text-xl"></i>
+                    </div>
+                    <h3 class="text-lg font-medium text-blue-900 mb-2">Relocation Support</h3>
+                    <p class="text-gray-600">From housing to cultural orientation, we provide comprehensive support to help you settle in your new country.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section class="bg-gray-100 py-12 px-4">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center text-blue-900 mb-12">Success Stories</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div class="bg-white p-6 rounded-lg shadow">
+                    <div class="flex items-center mb-4">
+                        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Testimonial">
+                        <div>
+                            <h4 class="font-bold text-blue-900">Amina K.</h4>
+                            <p class="text-gray-600">Nurse in London</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700">"Global Pathways made my dream of working in the UK a reality. Their guidance through the entire process was invaluable. I've been working in a London hospital for 2 years now!"</p>
+                    <div class="mt-4 text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <div class="bg-white p-6 rounded-lg shadow">
+                    <div class="flex items-center mb-4">
+                        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Testimonial">
+                        <div>
+                            <h4 class="font-bold text-blue-900">Kwame A.</h4>
+                            <p class="text-gray-600">Software Engineer in California</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700">"I never thought I'd get a work visa for the US, but Global Pathways helped me secure a position at a top tech company. Their network of employers is truly impressive."</p>
+                    <div class="mt-4 text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-8">
+                <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
+                    View More Success Stories
+                    <i class="fas fa-book-open ml-2"></i>
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-blue-900 text-white py-8 px-4">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Global Pathways</h3>
+                    <p class="text-blue-200">Connecting African talent with global opportunities since 2010.</p>
+                    <div class="flex space-x-4 mt-4">
+                        <a href="#" class="text-blue-200 hover:text-white"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-blue-200 hover:text-white"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-blue-200 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
+                        <a href="#" class="text-blue-200 hover:text-white"><i class="fab fa-instagram"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Quick Links</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-blue-200 hover:text-white">Home</a></li>
+                        <li><a href="#" class="text-blue-200 hover:text-white">Job Opportunities</a></li>
+                        <li><a href="#" class="text-blue-200 hover:text-white">Application Process</a></li>
+                        <li><a href="#" class="text-blue-200 hover:text-white">FAQ</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Contact Us</h3>
+                    <ul class="space-y-2">
+                        <li class="flex items-center">
+                            <i class="fas fa-map-marker-alt mr-2 text-blue-200"></i>
+                            <span class="text-blue-200">123 Global Ave, Lagos, Nigeria</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone-alt mr-2 text-blue-200"></i>
+                            <span class="text-blue-200">+234 123 456 7890</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope mr-2 text-blue-200"></i>
+                            <span class="text-blue-200">[email protected]</span>
+                        </li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Newsletter</h3>
+                    <p class="text-blue-200 mb-2">Subscribe for updates on new opportunities</p>
+                    <form class="flex">
+                        <input type="email" placeholder="Your email" class="px-3 py-2 rounded-l text-gray-800 w-full">
+                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </form>
+                </div>
+            </div>
+            <div class="border-t border-blue-800 mt-8 pt-6 text-center text-blue-200">
+                <p>&copy; 2023 Global Pathways. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Background Slideshow
+        document.addEventListener('DOMContentLoaded', function() {
+            const slides = document.querySelectorAll('.bg-slideshow');
+            let currentSlide = 0;
+            // Show first slide
+            slides[currentSlide].classList.add('active');
+            // Rotate slides every 5 seconds
+            setInterval(() => {
+                slides[currentSlide].classList.remove('active');
+                currentSlide = (currentSlide + 1) % slides.length;
+                slides[currentSlide].classList.add('active');
+            }, 5000);
+            // Form submission
+            const signupForm = document.getElementById('signupForm');
+            signupForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                // Show success message
+                alert('Thank you for your application! We will contact you within 3 business days.');
+                signupForm.reset();
+                // Scroll to top
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mahen23/new-recruit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>