Home
QQ-VVN
about us simple

about us simple

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is about me

About us

Author QQ-VVN

694

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
 <section class="min-h-screen px-4 py-14 text-white font-sans">
    <div class="max-w-6xl mx-auto">
        <div class="max-w-3xl mx-auto text-center mb-12 relative">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-purple-600/20 to-indigo-600/20 blur-3xl opacity-30 rounded-full"></div>
            <h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-500 mb-4">Hakkımızda</h1>
            <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-indigo-500 mx-auto mb-6 rounded-full"></div>
            <p class="text-lg text-gray-300 relative z-10">
                Mütevazı başlangıçlardan oyun dünyasında bir oyun değiştirici olmaya — 2015'ten beri en son teknoloji araçlar, eklentiler ve çözümler üretiyoruz. Sadece ürün geliştirmiyoruz; oyunun geleceğini şekillendiren deneyimler yaratıyoruz.
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-rocket text-blue-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Yolculuğumuz</h3>
                <p class="text-gray-300">
                    2015'te büyük bir vizyona sahip küçük bir ekip olarak başlayan serüvenimiz, şimdi yaratıcılık, teknoloji ve yeniliğin merkezi haline geldi. Misyonumuz her zaman netti: oyun dünyasında mümkün olanın sınırlarını zorlayan araçlar yaratmak.
                </p>
                <p class="text-gray-300 mt-4">
                    Üstlendiğimiz her projede, hem geliştiriciler hem de oyuncular için deneyimi yükseltmeyi hedefliyoruz. Çözümlerimiz sadece araç değil; yaratıcılığın katalizörleridir.
                </p>
            </div>
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-purple-400/20 to-purple-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-lightbulb text-purple-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Özünde Yenilik</h3>
                <p class="text-gray-300">
                    Yenilik bizim için sadece bir sözcük değil — şirketimizin kalp atışıdır. Geliştirdiğimiz her ürün ilham vermek, meydan okumak ve dönüştürmek için tasarlanmıştır. Vizyoner ve uzman ekibimiz sürekli olarak sınırları zorluyor.
                </p>
                <p class="text-gray-300 mt-4">
                    En küçük detayı mükemmelleştirirken veya tamamen yeni bir şey yaratırken, odak noktamız her zaman kalite, performans ve kullanıcı deneyimidir. Sadece trendi takip etmiyoruz; trendi yaratıyoruz.
                </p>
            </div>
        </div>
        <div class="glass-effect shimmer rounded-xl p-8 mb-16">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">8+</div>
                    <div class="text-gray-400">Yıllık Deneyim</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">50k+</div>
                    <div class="text-gray-400">Mutlu Kullanıcı</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">99.9%</div>
                    <div class="text-gray-400">Çalışma Süresi</div>
                </div>
                <div class="p-4">
                    <div class="text-4xl font-bold text-blue-400 mb-2">7/24</div>
                    <div class="text-gray-400">Destek</div>
                </div>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-indigo-400/20 to-indigo-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-clock text-indigo-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Gelecek Şimdi</h3>
                <p class="text-gray-300">
                    Oyunun geleceği sınırsız ve vizyonumuz da öyle. Büyümeye ve gelişmeye devam ederken, gelecekte olacakları şekillendirmeye her zamankinden daha kararlıyız. Ekibimiz sürekli yenilik yapıyor, araştırıyor ve işbirliği yapıyor.
                </p>
                <p class="text-gray-300 mt-4">
                    Sadece yazılım geliştirmiyoruz; deneyimler şekillendiriyoruz. Odak noktamız, geliştiricileri güçlendiren, oyun deneyimini geliştiren ve interaktif eğlencenin geleceğini sunan yeni nesil oyun araçları yaratmak.
                </p>
            </div>
            <div class="glass-effect shimmer rounded-xl p-8 feature-card">
                <div class="w-16 h-16 bg-gradient-to-br from-green-400/20 to-green-600/20 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-check-circle text-green-400 text-2xl"></i>
                </div>
                <h3 class="text-2xl font-bold text-white mb-4">Neden Biz?</h3>
                <p class="text-gray-300">
                    Oyun dünyasının sürekli değiştiği bir ortamda, sadece ürün değil — bir ortaklık sunuyoruz. Oyun dünyasının rekabetçi, hızlı tempolu ve sürekli gelişen bir yapıya sahip olduğunu anlıyoruz.
                </p>
                <p class="text-gray-300 mt-4">
                    İş akışınızı düzene sokmak isteyen bir geliştirici veya deneyiminizi üst seviyeye çıkarmak isteyen bir oyuncu olun, yanınızdayız. Ürünlerimiz tek bir hedefle tasarlandı: en iyi işinizi yapmanızı, en iyi oyununuzu oynamanızı ve en iyi deneyiminizi yaratmanızı sağlamak.
                </p>
            </div>
        </div>
        <div class="glass-effect shimmer rounded-xl p-8 mt-16">
            <h3 class="text-2xl font-bold text-white mb-8 text-center">Değerlerimiz</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-blue-400/20 to-blue-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-shield-alt text-blue-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Güvenlik</h4>
                    <p class="text-gray-400 text-sm">En son güvenlik önlemleriyle güvenliğinizi ve gizliliğinizi önceliklendiriyoruz</p>
                </div>
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-purple-400/20 to-purple-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-tachometer-alt text-purple-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Performans</h4>
                    <p class="text-gray-400 text-sm">Araçlarımız minimum sistem etkisiyle maksimum performans için optimize edilmiştir</p>
                </div>
                <div class="text-center p-4">
                    <div class="w-14 h-14 mx-auto bg-gradient-to-br from-green-400/20 to-green-600/20 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-headset text-green-400 text-xl"></i>
                    </div>
                    <h4 class="text-lg font-semibold text-white mb-2">Destek</h4>
                    <p class="text-gray-400 text-sm">Özel ekibimiz her türlü sorunuzda size yardımcı olmaya hazır</p>
                </div>
            </div>
        </div>
    </div>
</section>
</div>

Related Examples

Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

9 months ago

1.1k
basichtml
this is basic html

Author:
Anonymous

7 months ago

473
Testimonial that What Client Says

Author:
Abdul Baset Bappy

7 months ago

792
About Company Section – Animated & Responsive
A modern "About Us" section built with Tailwind CSS and Alpine.js, designed to highlight your company’s story, achievements, and values through a clean and animated layout. This component features smooth scroll animations, responsive design, and a balanced two-column layout — one for text content and one for an image with company stats. It’s perfect for corporate websites, SaaS platforms, or startup landing pages that want to showcase professionalism and credibility. ✨ Key Features Elegant fade-in and slide-up animations using Alpine.js Responsive grid layout optimized for all screen sizes Dark mode support built-in Dynamic stats display (years, team size, countries served) Clean Tailwind CSS design with easy customization

Author:
wavy kits

3 months ago

418
Heading Style

Author:
KULDEEP

7 months ago

504
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

17k
About Us

Author:
ariaw

3 months ago

388
portfolio
Complete Portfolio UI Kit with hero, about, skills, projects, testimonials, contact form, and footer. Fully responsive and dark mode supported using Tailwind CSS.

Author:
Lekhraj Ghimire

7 months ago

726
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

9 months ago

1.5k
About us card

Author:
Sienna

3 years ago

11.8k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

3.9k
Coming Soon Countdown Section – Animated & Responsive
A beautifully designed "Coming Soon" landing section built with Tailwind CSS and Alpine.js, perfect for startups, SaaS platforms, and product launches. This component features a live countdown timer, smooth fade-in animations, and floating gradient effects for a futuristic, engaging look. The layout adapts seamlessly to all screen sizes and supports dark mode, creating a professional pre-launch experience that builds anticipation and excitement. ✨ Key Features ⏳ Dynamic countdown timer (days, hours, minutes, seconds) 🎨 Animated gradient orbs for a vibrant background effect 🌙 Dark mode support included 💨 Smooth entrance animations using Alpine.js 📱 Fully responsive design for all devices 🔗 Social media icons to keep your audience connected 💡 Perfect for: Coming Soon or Under Construction pages Product and SaaS pre-launch sites Portfolio or agency landing pages Event or app launch countdowns

Author:
Anonymous

2 months ago

150

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components