creativepulse-studio / index.html
roxydeerman's picture
more clean, solagn: your safe space for dangerous ideas. colors should be a mixture of indigo , gold and bourdeaux but make it astehtic and simple
3348798 verified
Raw History Blame Contribute Delete
26.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>solagn | your safe space for dangerous ideas</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
indigo: {
50: '#EEF2FF',
100: '#E0E7FF',
200: '#C7D2FE',
300: '#A5B4FC',
400: '#818CF8',
500: '#6366F1',
600: '#4F46E5',
700: '#4338CA',
800: '#3730A3',
900: '#312E81',
},
gold: {
50: '#FFFBEB',
100: '#FEF3C7',
200: '#FDE68A',
300: '#FCD34D',
400: '#FBBF24',
500: '#F59E0B',
600: '#D97706',
700: '#B45309',
800: '#92400E',
900: '#78350F',
},
bordeaux: {
50: '#FDF2F2',
100: '#FCE7E7',
200: '#FBCBCB',
300: '#F9A8A8',
400: '#F47272',
500: '#EC4899',
600: '#DC2626',
700: '#B91C1C',
800: '#991B1B',
900: '#7F1D1D',
}
}
}
}
}
</script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
.hero-gradient {
background: linear-gradient(135deg, #1A103D 0%, #4C1D95 100%);
}
.text-gradient {
background: linear-gradient(90deg, #8B5FBF 0%, #D4A017 50%, #7F1D1D 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- Navigation -->
<nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-sm z-50 border-b border-gray-100">
<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">
<div class="flex-shrink-0 flex items-center">
<span class="text-xl font-bold text-gray-900">solagn</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Work</a>
<a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">About</a>
<a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Services</a>
<a href="#" class="text-gray-900 hover:text-blue-600 px-3 py-2 text-sm font-medium">Contact</a>
</div>
<div class="flex items-center">
<button class="bg-black text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-800 transition">
Get in Touch
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<div id="hero" class="hero-gradient min-h-screen flex items-center justify-center pt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
<div class="text-center">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
<span class="text-gradient">solagn</span> <br>your safe space for dangerous ideas
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-10">
A curated platform for radical thinking and unconventional creativity. Where boundaries are pushed and ideas are set free.
</p>
<div class="flex justify-center space-x-4">
<button class="bg-white text-gray-900 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition">
View Portfolio
</button>
<button class="border border-white text-white px-8 py-3 rounded-full text-lg font-medium hover:bg-white hover:text-gray-900 transition">
My Process
</button>
</div>
</div>
</div>
</div>
<!-- Featured Work -->
<div class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Featured Projects</h2>
<p class="text-gray-600 max-w-2xl mx-auto">Selected works that represent my creative vision and technical expertise</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Project 1 -->
<div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
<div class="h-64 bg-gradient-to-r from-indigo-700 to-bordeaux-800 flex items-center justify-center">
<span class="text-white text-xl font-bold">Digital Campaign</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Brand Transformation</h3>
<p class="text-gray-600 mb-4">Complete visual identity redesign for a tech startup</p>
<div class="flex items-center">
<span class="text-sm text-gray-500">Creative Direction</span>
<span class="mx-2 text-gray-300">•</span>
<span class="text-sm text-gray-500">Content Strategy</span>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
<div class="h-64 bg-gradient-to-r from-gold-500 to-amber-600 flex items-center justify-center">
<span class="text-white text-xl font-bold">Social Media</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Influencer Campaign</h3>
<p class="text-gray-600 mb-4">360° content creation for luxury fashion brand</p>
<div class="flex items-center">
<span class="text-sm text-gray-500">Content Creation</span>
<span class="mx-2 text-gray-300">•</span>
<span class="text-sm text-gray-500">Art Direction</span>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="card-hover bg-white rounded-xl overflow-hidden shadow-lg">
<div class="h-64 bg-gradient-to-r from-bordeaux-700 to-purple-800 flex items-center justify-center">
<span class="text-white text-xl font-bold">Interactive</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 mb-2">Augmented Reality</h3>
<p class="text-gray-600 mb-4">Immersive brand experience for art exhibition</p>
<div class="flex items-center">
<span class="text-sm text-gray-500">Digital Art</span>
<span class="mx-2 text-gray-300">•</span>
<span class="text-sm text-gray-500">Tech Integration</span>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="border-2 border-gray-900 text-gray-900 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-900 hover:text-white transition">
View All Projects
</button>
</div>
</div>
</div>
<!-- About Section -->
<div class="py-20 bg-indigo-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:flex lg:items-center lg:justify-between">
<div class="lg:w-1/2 mb-12 lg:mb-0">
<h2 class="text-3xl font-bold text-gray-900 mb-6">About Me</h2>
<p class="text-gray-600 mb-6">
With over 8 years in the creative industry, I've developed a unique approach that combines artistic sensibility with business acumen. My work has been featured in major publications and has helped brands connect with their audiences in meaningful ways.
</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 text-blue-500 mt-1">
<i data-feather="award"></i>
</div>
<p class="ml-3 text-gray-600">
<span class="font-medium text-gray-900">Award-winning</span> creative director with international recognition
</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 text-blue-500 mt-1">
<i data-feather="users"></i>
</div>
<p class="ml-3 text-gray-600">
<span class="font-medium text-gray-900">300K+</span> engaged audience across social platforms
</p>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 h-6 w-6 text-blue-500 mt-1">
<i data-feather="globe"></i>
</div>
<p class="ml-3 text-gray-600">
Worked with <span class="font-medium text-gray-900">50+ brands</span> worldwide across industries
</p>
</div>
</div>
</div>
<div class="lg:w-1/2 lg:pl-12">
<div class="bg-gray-100 rounded-2xl overflow-hidden">
<img src="http://static.photos/creative/1200x630/42" alt="Creative Director at work" class="w-full h-auto">
</div>
</div>
</div>
</div>
</div>
<!-- Services -->
<div class="py-20 bg-bordeaux-900 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Creative Services</h2>
<p class="text-gray-300 max-w-2xl mx-auto">Comprehensive solutions tailored to your brand's needs</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="bg-gray-800 p-8 rounded-xl card-hover">
<div class="w-12 h-12 bg-indigo-600 rounded-lg flex items-center justify-center mb-6">
<i data-feather="pen-tool" class="text-white"></i>
</div>
<h3 class="text-xl font-bold mb-3">Creative Direction</h3>
<p class="text-gray-300 mb-4">
Developing compelling visual narratives that align with your brand strategy and resonate with your audience.
</p>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 mr-2 text-blue-400"></i>
Brand Identity
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 mr-2 text-blue-400"></i>
Campaign Concepting
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 mr-2 text-blue-400"></i>
Visual Strategy
</li>
</ul>
</div>
<!-- Service 2 -->
<div class="bg-gray-800 p-8 rounded-xl card-hover">
<div class="w-12 h-12 bg-gold-500 rounded-lg flex items-center justify-center mb-6">
<i data-feather="camera" class="text-white"></i>
</div>
<h3 class="text-xl font-bold mb-3">Content Creation</h3>
<p class="text-gray-300 mb-4">
High-quality, platform-specific content designed to engage and grow your audience across digital channels.
</p>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 mr-2 text-pink-400"></i>
Photo & Video Production
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 mr-2 text-pink-400"></i>
Social Media Content
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 mr-2 text-pink-400"></i>
Influencer Campaigns
</li>
</ul>
</div>
<!-- Service 3 -->
<div class="bg-gray-800 p-8 rounded-xl card-hover">
<div class="w-12 h-12 bg-bordeaux-600 rounded-lg flex items-center justify-center mb-6">
<i data-feather="trending-up" class="text-white"></i>
</div>
<h3 class="text-xl font-bold mb-3">Digital Strategy</h3>
<p class="text-gray-300 mb-4">
Data-driven approaches to maximize your digital presence and connect with your target audience effectively.
</p>
<ul class="space-y-2 text-gray-400">
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 mr-2 text-purple-400"></i>
Content Strategy
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 mr-2 text-purple-400"></i>
Platform Optimization
</li>
<li class="flex items-center">
<i data-feather="check" class="w-4 h-4 mr-2 text-purple-400"></i>
Performance Analytics
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-900 mb-4">Client Testimonials</h2>
<p class="text-gray-600 max-w-2xl mx-auto">What brands and collaborators say about working with me</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/1" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-gray-900">Sarah Johnson</h4>
<p class="text-sm text-gray-500">CMO, Luxe Brands</p>
</div>
</div>
<p class="text-gray-600 italic mb-6">
"Working with CreativePulse transformed our brand's digital presence. Their strategic vision combined with stunning visuals helped us connect with a younger demographic."
</p>
<div class="flex">
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/2" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-gray-900">Michael Chen</h4>
<p class="text-sm text-gray-500">Founder, TechNova</p>
</div>
</div>
<p class="text-gray-600 italic mb-6">
"The creative direction provided was exactly what our startup needed to stand out in a crowded market. The visual identity they created has become our strongest asset."
</p>
<div class="flex">
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-gray-50 p-8 rounded-xl">
<div class="flex items-center mb-6">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="http://static.photos/people/200x200/3" alt="Client" class="w-full h-full object-cover">
</div>
<div>
<h4 class="font-bold text-gray-900">Emma Rodriguez</h4>
<p class="text-sm text-gray-500">Marketing Director, UrbanStyle</p>
</div>
</div>
<p class="text-gray-600 italic mb-6">
"Our influencer campaign exceeded all expectations. The content was not just beautiful but strategically crafted to drive engagement and conversions."
</p>
<div class="flex">
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
<i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Contact CTA -->
<div class="py-20 bg-gradient-to-r from-indigo-700 to-bordeaux-800 text-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-3xl font-bold mb-6">Ready to elevate your brand?</h2>
<p class="text-xl text-blue-100 max-w-2xl mx-auto mb-10">
Let's collaborate to create something extraordinary. I'm currently accepting select new projects.
</p>
<button class="bg-white text-blue-600 px-8 py-3 rounded-full text-lg font-medium hover:bg-gray-100 transition">
Get in Touch
</button>
</div>
</div>
<!-- Footer -->
<footer class="bg-bordeaux-900 text-white py-12">
<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-xl font-bold mb-4">CreativePulse</h3>
<p class="text-gray-400 mb-6">
your safe space for dangerous ideas. cultivating radical thinking and unconventional creativity.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i data-feather="dribbble"></i>
</a>
</div>
</div>
<div>
<h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Navigation</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white">Work</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-sm font-semibold uppercase tracking-wider mb-4">Get in Touch</h4>
<ul class="space-y-3">
<li class="flex items-start">
<i data-feather="mail" class="w-4 h-4 mt-1 mr-2"></i>
<a href="mailto:hello@creativepulse.studio" class="text-gray-400 hover:text-white">hello@creativepulse.studio</a>
</li>
<li class="flex items-start">
<i data-feather="phone" class="w-4 h-4 mt-1 mr-2"></i>
<span class="text-gray-400">+1 (555) 123-4567</span>
</li>
<li class="flex items-start">
<i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2"></i>
<span class="text-gray-400">Los Angeles, CA</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">
© 2023 solagn. All rights reserved.
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script>
feather.replace();
VANTA.GLOBE({
el: "#hero",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0x111827,
size: 0.8
});
</script>
</body>
</html>