Merge version_9 into main
Merge version_9 into main
This commit was merged in pull request #11.
This commit is contained in:
183
src/app/page.tsx
183
src/app/page.tsx
@@ -3,11 +3,10 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
||||
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
|
||||
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
|
||||
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
||||
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Award, Zap, Sparkles, TrendingUp, MessageCircle, Briefcase, CheckCircle, Shield, Target, Linkedin, Twitter, Instagram, Github } from "lucide-react";
|
||||
@@ -32,8 +31,9 @@ export default function LandingPage() {
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "About", id: "about" }
|
||||
{ name: "Process", id: "process" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
animateOnLoad={true}
|
||||
@@ -73,88 +73,6 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="bg-[var(--background-accent)] rounded-[16px] p-[30px] shadow-md hover:shadow-lg transition-shadow duration-300 group relative overflow-hidden cursor-pointer" style={{
|
||||
perspective: '1000px'
|
||||
}}>
|
||||
<div className="absolute inset-0 pointer-events-none" style={{
|
||||
background: 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 80%)'
|
||||
}} />
|
||||
<div className="relative z-10">
|
||||
<div className="text-4xl font-bold text-[var(--primary-cta)] mb-2">200+</div>
|
||||
<div className="text-sm text-gray-400">Happy Clients</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[var(--background-accent)] rounded-[16px] p-[30px] shadow-md hover:shadow-lg transition-shadow duration-300 group relative overflow-hidden cursor-pointer" style={{
|
||||
perspective: '1000px'
|
||||
}}>
|
||||
<div className="absolute inset-0 pointer-events-none" style={{
|
||||
background: 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 80%)'
|
||||
}} />
|
||||
<div className="relative z-10">
|
||||
<div className="text-4xl font-bold text-[var(--primary-cta)] mb-2">500+</div>
|
||||
<div className="text-sm text-gray-400">Projects Completed</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[var(--background-accent)] rounded-[16px] p-[30px] shadow-md hover:shadow-lg transition-shadow duration-300 group relative overflow-hidden cursor-pointer" style={{
|
||||
perspective: '1000px'
|
||||
}}>
|
||||
<div className="absolute inset-0 pointer-events-none" style={{
|
||||
background: 'radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 80%)'
|
||||
}} />
|
||||
<div className="relative z-10">
|
||||
<div className="text-4xl font-bold text-[var(--primary-cta)] mb-2">99%</div>
|
||||
<div className="text-sm text-gray-400">Uptime</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>{`
|
||||
@media (max-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
<script>{`
|
||||
(function() {
|
||||
const cards = document.querySelectorAll('[data-section="metrics"] .bg-\\[var\\(--background-accent\\)\\]');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('mousemove', (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
const xPercent = (x / rect.width) * 100;
|
||||
const yPercent = (y / rect.height) * 100;
|
||||
|
||||
card.style.setProperty('--mouse-x', xPercent + '%');
|
||||
card.style.setProperty('--mouse-y', yPercent + '%');
|
||||
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
const angleX = (y - centerY) * 0.03;
|
||||
const angleY = (centerX - x) * 0.03;
|
||||
|
||||
card.style.transform = \`perspective(1000px) rotateX(\${angleX}deg) rotateY(\${angleY}deg) translateZ(10px)\`;
|
||||
card.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
|
||||
card.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
|
||||
});
|
||||
});
|
||||
})();
|
||||
`}</script>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="We blend creativity with strategy to deliver results that matter."
|
||||
@@ -171,7 +89,7 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardNineteen
|
||||
title="Our Core Services"
|
||||
description="Comprehensive solutions designed to elevate your digital presence and drive measurable business growth."
|
||||
@@ -201,6 +119,58 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cards" data-section="cards">
|
||||
<FeatureCardMedia
|
||||
title="Why Choose Our Services"
|
||||
description="We combine cutting-edge technology with strategic thinking to deliver measurable results for your business."
|
||||
tag="Our Advantages"
|
||||
tagIcon={Award}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="scale-rotate"
|
||||
features={[
|
||||
{
|
||||
id: "advantage-1", title: "Performance First", description: "Lightning-fast websites optimized for speed and user experience that drive conversions.", tag: "Speed", imageSrc: "http://img.b2bpic.net/free-vector/business-analytics-concept_52683-43849.jpg", imageAlt: "performance metrics dashboard"
|
||||
},
|
||||
{
|
||||
id: "advantage-2", title: "Scalable Solutions", description: "Built to grow with your business, from startups to enterprise-level applications.", tag: "Scalability", imageSrc: "http://img.b2bpic.net/free-vector/growing-chart_74855-6681.jpg", imageAlt: "growth chart visualization"
|
||||
},
|
||||
{
|
||||
id: "advantage-3", title: "24/7 Support", description: "Dedicated support team ready to assist you whenever you need help or updates.", tag: "Support", imageSrc: "http://img.b2bpic.net/free-photo/customer-support-service-team_23-2148903343.jpg", imageAlt: "support team collaboration"
|
||||
}
|
||||
]}
|
||||
className="w-full"
|
||||
containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<FeatureCardMedia
|
||||
title="Our Process"
|
||||
description="A streamlined approach to bringing your vision to life with clarity and collaboration at every step."
|
||||
tag="How We Work"
|
||||
tagIcon={CheckCircle}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="opacity"
|
||||
features={[
|
||||
{
|
||||
id: "process-1", title: "Discovery & Strategy", description: "We start by understanding your vision, goals, and target audience. Through in-depth consultation and research, we develop a strategic roadmap for success.", tag: "Phase 1", imageSrc: "http://img.b2bpic.net/free-photo/business-team-brainstorming-office_1157-31968.jpg", imageAlt: "discovery meeting collaboration"
|
||||
},
|
||||
{
|
||||
id: "process-2", title: "Design & Development", description: "Our creative team designs stunning interfaces while developers build robust, scalable code. We ensure every pixel serves a purpose.", tag: "Phase 2", imageSrc: "http://img.b2bpic.net/free-photo/designer-working-digital-tablet_23-2148427239.jpg", imageAlt: "design development work"
|
||||
},
|
||||
{
|
||||
id: "process-3", title: "Testing & Launch", description: "Rigorous testing ensures quality and performance. We launch with confidence and provide ongoing support for your success.", tag: "Phase 3", imageSrc: "http://img.b2bpic.net/free-photo/team-testing-website-design_23-2148603324.jpg", imageAlt: "testing and quality assurance"
|
||||
}
|
||||
]}
|
||||
className="w-full"
|
||||
containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
title="Client Stories That Inspire"
|
||||
@@ -235,45 +205,6 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<FeatureCardTen
|
||||
title="Featured Work & Case Studies"
|
||||
description="Explore our portfolio of successful projects that showcase our expertise across diverse industries and creative challenges."
|
||||
tag="Portfolio"
|
||||
tagIcon={Briefcase}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="scale-rotate"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "portfolio-1", title: "E-Commerce Platform Redesign", description: "Complete redesign and development of a major e-commerce platform, resulting in improved UX and 300% increase in conversions.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/weekend-sale-banner-template_23-2148680582.jpg", imageAlt: "e-commerce website design portfolio"
|
||||
},
|
||||
items: [
|
||||
{ icon: Zap, text: "Performance Optimization" },
|
||||
{ icon: Shield, text: "Security Enhancement" },
|
||||
{ icon: Target, text: "Conversion Focused" }
|
||||
],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
id: "portfolio-2", title: "Corporate Website & Brand Launch", description: "Strategic branding and website launch for a B2B services company, establishing market leadership and thought authority.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-template-with-photo_52683-19805.jpg", imageAlt: "corporate business website design"
|
||||
},
|
||||
items: [
|
||||
{ icon: Award, text: "Industry Recognition" },
|
||||
{ icon: TrendingUp, text: "Lead Generation Growth" },
|
||||
{ icon: CheckCircle, text: "Brand Consistency" }
|
||||
],
|
||||
reverse: true
|
||||
}
|
||||
]}
|
||||
className="w-full"
|
||||
containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to transform your digital presence? Let's collaborate on your next project."
|
||||
|
||||
Reference in New Issue
Block a user