|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Digital Frontiers | Creative Tech Solutions</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.tech-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.portfolio-item { |
|
|
transition: all 0.3s ease; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.portfolio-item:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.portfolio-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(0,0,0,0.7); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.portfolio-item:hover .portfolio-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.contact-input:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 2px #8b5cf6; |
|
|
} |
|
|
|
|
|
.marquee { |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
.marquee span { |
|
|
display: inline-block; |
|
|
padding-left: 100%; |
|
|
animation: marquee 15s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes marquee { |
|
|
0% { transform: translate(0, 0); } |
|
|
100% { transform: translate(-100%, 0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<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"> |
|
|
<i class="fas fa-cube text-blue-500 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">Digital Frontiers</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
|
|
<a href="#services" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Services</a> |
|
|
<a href="#portfolio" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Portfolio</a> |
|
|
<a href="#approach" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Approach</a> |
|
|
<a href="#contact" class="text-gray-500 hover:text-gray-900 px-3 py-2 text-sm font-medium">Contact</a> |
|
|
<a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors">Start Project</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-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<a href="#services" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Services</a> |
|
|
<a href="#portfolio" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Portfolio</a> |
|
|
<a href="#approach" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Approach</a> |
|
|
<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-gray-900 hover:bg-gray-50">Contact</a> |
|
|
<a href="#contact" class="block w-full text-left px-3 py-2 text-base font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50">Start Project</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> |
|
|
Bridging Tech & Education Through Creativity |
|
|
</h1> |
|
|
<p class="mt-6 max-w-2xl mx-auto text-xl"> |
|
|
Transforming complex digital concepts into accessible experiences through 3D, sound, video, game development, VR, photography, and immersive exhibitions. |
|
|
</p> |
|
|
<div class="mt-10 flex justify-center space-x-4"> |
|
|
<a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-100 transition-colors"> |
|
|
Get in Touch |
|
|
</a> |
|
|
<a href="#portfolio" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 bg-opacity-60 hover:bg-opacity-70 transition-colors"> |
|
|
View Work |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-100 py-4 overflow-hidden"> |
|
|
<div class="marquee"> |
|
|
<span class="text-lg font-medium text-gray-700"> |
|
|
<i class="fas fa-cube mx-4"></i> 3D Modeling & Animation • |
|
|
<i class="fas fa-headphones mx-4"></i> Sound Design • |
|
|
<i class="fas fa-video mx-4"></i> Video Production • |
|
|
<i class="fas fa-gamepad mx-4"></i> Game Development • |
|
|
<i class="fas fa-vr-cardboard mx-4"></i> Virtual Reality • |
|
|
<i class="fas fa-camera mx-4"></i> Photography • |
|
|
<i class="fas fa-images mx-4"></i> Exhibition Design • |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="services" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Services</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Digital Creative Solutions |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Specialized services tailored to make technology accessible and engaging |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-20 tech-grid"> |
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-blue-100 p-3 rounded-full"> |
|
|
<i class="fas fa-cube text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-5"> |
|
|
<h3 class="text-lg font-medium text-gray-900">3D Modeling & Animation</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-base text-gray-500"> |
|
|
Creating immersive 3D environments and animations that simplify complex concepts for educational purposes. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-purple-100 p-3 rounded-full"> |
|
|
<i class="fas fa-headphones text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-5"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Sound Design</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-base text-gray-500"> |
|
|
Crafting auditory experiences that enhance learning through spatial audio, soundscapes, and interactive sound design. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-pink-100 p-3 rounded-full"> |
|
|
<i class="fas fa-video text-pink-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-5"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Video Production</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-base text-gray-500"> |
|
|
Producing engaging video content that combines live action with digital elements to tell compelling educational stories. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-gamepad text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-5"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Game Development</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-base text-gray-500"> |
|
|
Designing educational games that make learning interactive, rewarding, and accessible to diverse audiences. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-indigo-100 p-3 rounded-full"> |
|
|
<i class="fas fa-vr-cardboard text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-5"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Virtual Reality</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-base text-gray-500"> |
|
|
Developing VR experiences that transport learners into immersive environments for hands-on education. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300"> |
|
|
<div class="p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-yellow-100 p-3 rounded-full"> |
|
|
<i class="fas fa-camera text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-5"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Photography & Exhibitions</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-base text-gray-500"> |
|
|
Creating visual narratives and exhibition designs that blend physical and digital elements for impactful learning spaces. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="portfolio" class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Work</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Recent Projects |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Examples of how we've made technology accessible through creative solutions |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="portfolio-item relative rounded-lg overflow-hidden shadow-md transition-transform duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1639762681057-408e52192e55?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="VR Education Project" class="w-full h-64 object-cover"> |
|
|
<div class="portfolio-overlay"> |
|
|
<h3 class="text-white text-xl font-bold">VR Science Lab</h3> |
|
|
<p class="text-gray-300 mt-2 text-center px-4">Interactive virtual reality environment for chemistry education</p> |
|
|
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"> |
|
|
View Case Study |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="portfolio-item relative rounded-lg overflow-hidden shadow-md transition-transform duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="3D Animation Project" class="w-full h-64 object-cover"> |
|
|
<div class="portfolio-overlay"> |
|
|
<h3 class="text-white text-xl font-bold">Anatomy Explorer</h3> |
|
|
<p class="text-gray-300 mt-2 text-center px-4">3D interactive model of human anatomy for medical students</p> |
|
|
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"> |
|
|
View Case Study |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="portfolio-item relative rounded-lg overflow-hidden shadow-md transition-transform duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Exhibition Design" class="w-full h-64 object-cover"> |
|
|
<div class="portfolio-overlay"> |
|
|
<h3 class="text-white text-xl font-bold">Digital Heritage</h3> |
|
|
<p class="text-gray-300 mt-2 text-center px-4">Mixed media exhibition blending photography and AR for cultural education</p> |
|
|
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"> |
|
|
View Case Study |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 text-center"> |
|
|
<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 transition-colors"> |
|
|
<i class="fas fa-images mr-2"></i> View Full Portfolio |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="approach" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Methodology</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Our Creative Process |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
How we transform complex tech into accessible learning experiences |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-20"> |
|
|
<div class="space-y-10 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8 lg:gap-y-10"> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<span class="text-xl font-bold">1</span> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Understanding Barriers</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
We begin by identifying the specific challenges your audience faces with technology and education. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<span class="text-xl font-bold">2</span> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Creative Ideation</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Our team brainstorms innovative solutions that leverage the right mix of digital mediums. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<span class="text-xl font-bold">3</span> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Prototype & Test</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
We create interactive prototypes and test them with real users to ensure accessibility. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<span class="text-xl font-bold">4</span> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Production</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Our specialists craft the final product with attention to both technical excellence and educational value. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<span class="text-xl font-bold">5</span> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Implementation Support</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
We provide training and resources to ensure successful deployment and adoption. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<span class="text-xl font-bold">6</span> |
|
|
</div> |
|
|
<div class="ml-16"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Iterative Improvement</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
We gather feedback and continuously refine the experience based on real-world usage. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
What Our Clients Say |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-semibold text-gray-900">Sarah Johnson</h4> |
|
|
<p class="text-sm text-gray-500">Education Director, Science Museum</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-gray-600"> |
|
|
"The VR learning modules completely transformed how our visitors engage with complex scientific concepts. Attendance for our educational programs has increased by 40% since implementation." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-sm font-semibold text-gray-900">Michael Chen</h4> |
|
|
<p class="text-sm text-gray-500">CEO, EdTech Startup</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-gray-600"> |
|
|
"Working with Digital Frontiers allowed us to create an accessible learning game that actually engages our neurodiverse students. Their understanding of both technology and education is unparalleled." |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="contact" class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Get in Touch</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Let's Create Something Meaningful |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Ready to make technology accessible through creative solutions? Reach out to discuss your project. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 flex flex-col lg:flex-row"> |
|
|
<div class="lg:w-1/2"> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Your Name</label> |
|
|
<div class="mt-1"> |
|
|
<input id="name" name="name" type="text" required class="contact-input py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> |
|
|
<div class="mt-1"> |
|
|
<input id="email" name="email" type="email" required class="contact-input py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="project" class="block text-sm font-medium text-gray-700">Project Type</label> |
|
|
<div class="mt-1"> |
|
|
<select id="project" name="project" class="contact-input py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"> |
|
|
<option>3D Modeling & Animation</option> |
|
|
<option>Sound Design</option> |
|
|
<option>Video Production</option> |
|
|
<option>Game Development</option> |
|
|
<option>Virtual Reality</option> |
|
|
<option>Photography & Exhibition</option> |
|
|
<option>Other</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700">Project Details</label> |
|
|
<div class="mt-1"> |
|
|
<textarea id="message" name="message" rows="4" class="contact-input py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<button type="submit" class="w-full flex justify-center py-3 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 transition-colors"> |
|
|
Send Message |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2 lg:pl-12 mt-10 lg:mt-0"> |
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Contact Information</h3> |
|
|
<div class="mt-4 space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-envelope text-blue-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-500">Email</p> |
|
|
<p class="text-sm text-gray-900">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-phone-alt text-blue-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-500">Phone</p> |
|
|
<p class="text-sm text-gray-900">+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-map-marker-alt text-blue-500"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-500">Based in</p> |
|
|
<p class="text-sm text-gray-900">Portland, OR (Working remotely worldwide)</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Connect With Us</h3> |
|
|
<div class="mt-4 flex space-x-4"> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-linkedin text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fab fa-behance text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Services</h3> |
|
|
<div class="mt-4 space-y-4"> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">3D & Animation</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Sound Design</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Video Production</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Game Development</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Portfolio</h3> |
|
|
<div class="mt-4 space-y-4"> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">VR Experiences</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Educational Games</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Exhibition Design</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">All Projects</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> |
|
|
<div class="mt-4 space-y-4"> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">About</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Approach</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Testimonials</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> |
|
|
<div class="mt-4 space-y-4"> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Privacy</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Terms</a> |
|
|
<a href="#" class="text-base text-gray-300 hover:text-white block">Cookie Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-cube text-blue-500 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold">Digital Frontiers</span> |
|
|
</div> |
|
|
<p class="mt-4 md:mt-0 text-base text-gray-400"> |
|
|
© 2023 Digital Frontiers. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
if (menu.classList.contains('hidden')) { |
|
|
menu.classList.remove('hidden'); |
|
|
} else { |
|
|
menu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=aworkimmersive/digital-frontiers" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
