diff --git a/assets/css/custom.css b/assets/css/custom.css index 65a1626..547229e 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,346 +1,1018 @@ :root { - --color-bg: #ffffff; - --color-text: #1a1a1a; - --color-primary: #2563EB; /* Vibrant Blue */ - --color-secondary: #000000; - --color-accent: #A3E635; /* Lime Green */ - --color-surface: #f8f9fa; - --font-heading: 'Space Grotesk', sans-serif; - --font-body: 'Inter', sans-serif; - --border-width: 2px; - --shadow-hard: 5px 5px 0px #000; - --shadow-hover: 8px 8px 0px #000; - --radius-pill: 50rem; - --radius-card: 1rem; + --primary: #0062ff; + --primary-dark: #004dc7; + --secondary: #10b981; + --dark: #111827; + --gray-dark: #374151; + --gray: #6b7280; + --gray-light: #f3f4f6; + --white: #ffffff; + --font-heading: 'Montserrat', sans-serif; + --font-body: 'Noto Sans SC', sans-serif; + --shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15); + --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + --radius: 12px; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; } body { - font-family: var(--font-body); - background-color: var(--color-bg); - color: var(--color-text); - overflow-x: hidden; + font-family: var(--font-body); + background-color: var(--white); + color: var(--gray-dark); + line-height: 1.6; + overflow-x: hidden; } -h1, h2, h3, h4, h5, h6, .navbar-brand { - font-family: var(--font-heading); - letter-spacing: -0.03em; +h1, h2, h3, h4 { + font-family: var(--font-heading); + color: var(--dark); + font-weight: 700; } -/* Utilities */ -.text-primary { color: var(--color-primary) !important; } -.bg-black { background-color: #000 !important; } -.text-white { color: #fff !important; } -.shadow-hard { box-shadow: var(--shadow-hard); } -.border-2-black { border: var(--border-width) solid #000; } -.py-section { padding-top: 5rem; padding-bottom: 5rem; } - -/* Navbar */ -.navbar { - background: rgba(255, 255, 255, 0.9); - backdrop-filter: blur(10px); - border-bottom: var(--border-width) solid transparent; - transition: all 0.3s; - padding-top: 1rem; - padding-bottom: 1rem; +a { + text-decoration: none; + transition: var(--transition); } -.navbar.scrolled { - border-bottom-color: #000; - padding-top: 0.5rem; - padding-bottom: 0.5rem; +ul { + list-style: none; } -.brand-text { - font-size: 1.5rem; - font-weight: 800; +img { + max-width: 100%; + display: block; } -.nav-link { - font-weight: 500; - color: var(--color-text); - margin-left: 1rem; - position: relative; +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 24px; } -.nav-link:hover, .nav-link.active { - color: var(--color-primary); +section { + padding: 100px 0; +} + +.section-header { + text-align: center; + margin-bottom: 60px; +} + +.section-header h2 { + font-size: 2.8rem; + margin-bottom: 15px; + position: relative; +} + +.section-header .line { + width: 80px; + height: 5px; + background: var(--primary); + margin: 0 auto 20px; + border-radius: 5px; +} + +.section-header p { + color: var(--gray); + font-size: 1.15rem; + max-width: 700px; + margin: 0 auto; } /* Buttons */ .btn { - font-weight: 700; - font-family: var(--font-heading); - padding: 0.8rem 2rem; - border-radius: var(--radius-pill); - border: var(--border-width) solid #000; - transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1); - box-shadow: var(--shadow-hard); -} - -.btn:hover { - transform: translate(-2px, -2px); - box-shadow: var(--shadow-hover); -} - -.btn:active { - transform: translate(2px, 2px); - box-shadow: 0 0 0 #000; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 14px 35px; + border-radius: var(--radius); + font-weight: 600; + font-size: 1rem; + gap: 10px; + cursor: pointer; + border: none; + transition: var(--transition); } .btn-primary { - background-color: var(--color-primary); - border-color: #000; - color: #fff; + background: var(--primary); + color: var(--white); } .btn-primary:hover { - background-color: #1d4ed8; - border-color: #000; - color: #fff; + background: var(--primary-dark); + transform: translateY(-3px); + box-shadow: 0 12px 25px rgba(0, 98, 255, 0.4); } -.btn-outline-dark { - background-color: #fff; - color: #000; +.btn-glass { + background: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(12px); + color: var(--white); + border: 1px solid rgba(255, 255, 255, 0.3); } -.btn-cta { - background-color: var(--color-accent); - color: #000; +.btn-glass:hover { + background: rgba(255, 255, 255, 0.25); + transform: translateY(-3px); } -.btn-cta:hover { - background-color: #8cc629; - color: #000; +.btn-outline { + border: 2px solid var(--primary); + color: var(--primary); + background: transparent; +} + +.btn-outline:hover { + background: var(--primary); + color: white; + transform: translateY(-3px); +} + +.btn-block { + width: 100%; +} + +/* Navbar */ +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000; + padding: 25px 0; + transition: var(--transition); +} + +.navbar.scrolled { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(15px); + padding: 15px 0; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.6rem; + font-weight: 800; + color: var(--primary); + display: flex; + align-items: center; + gap: 12px; +} + +.logo img { + border-radius: 8px; +} + +.nav-links { + display: flex; + align-items: center; + gap: 35px; +} + +.nav-links a { + color: var(--dark); + font-weight: 600; + font-size: 1rem; +} + +.nav-links a:hover { + color: var(--primary); +} + +.nav-cta { + background: var(--primary); + color: white !important; + padding: 10px 24px; + border-radius: 50px; +} + +.mobile-menu-toggle { + display: none; + font-size: 1.8rem; + cursor: pointer; + color: var(--dark); + z-index: 1001; } /* Hero Section */ .hero-section { - min-height: 100vh; - padding-top: 80px; + padding: 0; + height: 100vh; + min-height: 800px; } -.background-blob { - position: absolute; - border-radius: 50%; - filter: blur(80px); - opacity: 0.6; - z-index: 1; +.hero-swiper { + width: 100%; + height: 100%; } -.blob-1 { - top: -10%; - right: -10%; - width: 600px; - height: 600px; - background: radial-gradient(circle, var(--color-accent), transparent); +.swiper-slide { + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; } -.blob-2 { - bottom: 10%; - left: -10%; - width: 500px; - height: 500px; - background: radial-gradient(circle, var(--color-primary), transparent); +.hero-content { + text-align: center; + color: var(--white); + max-width: 1000px; + padding: 0 24px; } -.highlight-text { - background: linear-gradient(120deg, transparent 0%, transparent 40%, var(--color-accent) 40%, var(--color-accent) 100%); - background-repeat: no-repeat; - background-size: 100% 40%; - background-position: 0 88%; - padding: 0 5px; +.hero-content h1 { + font-size: 4.5rem; + color: white; + margin-bottom: 25px; + text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); + line-height: 1.2; } -.dot { color: var(--color-primary); } - -.badge-pill { - display: inline-block; - padding: 0.5rem 1rem; - border: 2px solid #000; - border-radius: 50px; - font-weight: 700; - background: #fff; - box-shadow: 4px 4px 0 #000; - font-family: var(--font-heading); - font-size: 0.9rem; +.hero-content p { + font-size: 1.4rem; + margin-bottom: 45px; + opacity: 0.95; + max-width: 800px; + margin-left: auto; + margin-right: auto; } -/* Marquee */ -.marquee-container { - overflow: hidden; - white-space: nowrap; - border-top: 2px solid #000; - border-bottom: 2px solid #000; +.hero-btns { + display: flex; + justify-content: center; + gap: 25px; } -.rotate-divider { - transform: rotate(-2deg) scale(1.05); - z-index: 10; - position: relative; - margin-top: -50px; - margin-bottom: 30px; +.badge { + display: inline-block; + padding: 6px 18px; + background: var(--primary); + border-radius: 50px; + font-size: 0.9rem; + font-weight: 800; + text-transform: uppercase; + margin-bottom: 25px; + letter-spacing: 1.5px; } -.marquee-content { - display: inline-block; - animation: marquee 20s linear infinite; - font-family: var(--font-heading); - font-weight: 700; - font-size: 1.5rem; - letter-spacing: 2px; +/* Stats */ +.stats-section { + background: var(--dark); + padding: 80px 0; + margin-top: -80px; + position: relative; + z-index: 10; + border-radius: var(--radius); + width: 95%; + max-width: 1200px; + margin-left: auto; + margin-right: auto; + box-shadow: var(--shadow-lg); } -@keyframes marquee { - 0% { transform: translateX(0); } - 100% { transform: translateX(-50%); } +.stats-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + text-align: center; } -/* Portfolio Cards */ -.project-card { - border: 2px solid #000; - border-radius: var(--radius-card); - overflow: hidden; - background: #fff; - transition: transform 0.3s ease; - box-shadow: var(--shadow-hard); - height: 100%; - display: flex; - flex-direction: column; +.stat-item h3 { + color: var(--primary); + font-size: 3rem; + margin-bottom: 8px; } -.project-card:hover { - transform: translateY(-10px); - box-shadow: 8px 8px 0 #000; +.stat-item p { + color: rgba(255, 255, 255, 0.8); + font-size: 1rem; + font-weight: 500; + letter-spacing: 0.5px; } -.card-img-holder { - height: 250px; - display: flex; - align-items: center; - justify-content: center; - border-bottom: 2px solid #000; - position: relative; - font-size: 4rem; +/* Services */ +.services-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 30px; } -.placeholder-art { - transition: transform 0.3s ease; +.service-card { + background: var(--white); + padding: 50px 40px; + border-radius: var(--radius); + box-shadow: var(--shadow); + transition: var(--transition); + border: 1px solid var(--gray-light); + display: flex; + flex-direction: column; } -.project-card:hover .placeholder-art { - transform: scale(1.2) rotate(10deg); +.service-card:hover { + transform: translateY(-12px); + box-shadow: var(--shadow-lg); + border-color: var(--primary); } -.bg-soft-blue { background-color: #e0f2fe; } -.bg-soft-green { background-color: #dcfce7; } -.bg-soft-purple { background-color: #f3e8ff; } -.bg-soft-yellow { background-color: #fef9c3; } - -.category-tag { - position: absolute; - top: 15px; - right: 15px; - background: #000; - color: #fff; - padding: 5px 12px; - border-radius: 20px; - font-size: 0.75rem; - font-weight: 700; +.icon-box { + width: 80px; + height: 80px; + background: rgba(0, 98, 255, 0.08); + color: var(--primary); + display: flex; + align-items: center; + justify-content: center; + font-size: 2.2rem; + border-radius: 20px; + margin-bottom: 30px; + transition: var(--transition); } -.card-body { padding: 1.5rem; } - -.link-arrow { - text-decoration: none; - color: #000; - font-weight: 700; - display: inline-flex; - align-items: center; - margin-top: auto; +.service-card:hover .icon-box { + background: var(--primary); + color: white; } -.link-arrow i { transition: transform 0.2s; margin-left: 5px; } -.link-arrow:hover i { transform: translateX(5px); } +.service-card h3 { + font-size: 1.5rem; + margin-bottom: 20px; +} + +.service-card p { + color: var(--gray); + margin-bottom: 25px; +} + +.service-list { + margin-top: auto; + padding-top: 20px; + border-top: 1px solid var(--gray-light); +} + +.service-list li { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 12px; + font-size: 0.95rem; + font-weight: 500; +} + +.service-list li i { + color: var(--secondary); + font-size: 0.8rem; +} + +/* Portfolio */ +.portfolio-filters { + display: flex; + justify-content: center; + gap: 15px; + margin-bottom: 50px; + flex-wrap: wrap; +} + +.filter-btn { + padding: 10px 28px; + background: var(--gray-light); + border: none; + border-radius: 50px; + cursor: pointer; + font-weight: 700; + transition: var(--transition); + color: var(--gray-dark); +} + +.filter-btn.active, .filter-btn:hover { + background: var(--primary); + color: white; +} + +.portfolio-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + gap: 35px; +} + +.portfolio-item { + border-radius: var(--radius); + overflow: hidden; + box-shadow: var(--shadow); + background: white; + transition: var(--transition); +} + +.portfolio-img-wrapper { + position: relative; + aspect-ratio: 16/10; + overflow: hidden; +} + +.portfolio-img-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; + transition: var(--transition); +} + +.portfolio-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 98, 255, 0.92); + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 40px; + opacity: 0; + transition: var(--transition); + color: white; +} + +.portfolio-item:hover .portfolio-overlay { + opacity: 1; +} + +.portfolio-item:hover .portfolio-img-wrapper img { + transform: scale(1.15); +} + +.overlay-content h3 { + color: white; + font-size: 1.6rem; + margin-bottom: 15px; +} + +.overlay-content p { + font-size: 1rem; + opacity: 0.9; +} + +.view-details { + display: inline-flex; + align-items: center; + gap: 10px; + margin-top: 25px; + color: white; + border: 1px solid white; + padding: 8px 20px; + border-radius: 50px; + font-weight: 600; +} + +.view-details:hover { + background: white; + color: var(--primary); +} + +.portfolio-info { + padding: 25px; +} + +.portfolio-info h4 { + font-size: 1.25rem; + margin-bottom: 8px; +} + +.portfolio-info span { + color: var(--primary); + font-weight: 700; + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 1px; +} /* About */ -.about-image-stack { - position: relative; - height: 400px; - width: 100%; +.about-flex { + display: flex; + align-items: flex-start; + gap: 80px; } -.stack-card { - position: absolute; +.about-image { + flex: 1; + position: relative; +} + +.about-image img { + border-radius: var(--radius); + box-shadow: var(--shadow-lg); + width: 100%; +} + +.experience-tag { + position: absolute; + bottom: -40px; + right: -40px; + background: var(--primary); + color: white; + padding: 30px; + border-radius: var(--radius); + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 0 15px 35px rgba(0, 98, 255, 0.4); +} + +.experience-tag strong { + font-size: 3rem; + line-height: 1; +} + +.experience-tag span { + font-weight: 700; + font-size: 1rem; + margin-top: 5px; +} + +.about-text { + flex: 1.4; +} + +.subtitle { + color: var(--primary); + font-weight: 800; + text-transform: uppercase; + letter-spacing: 3px; + display: block; + margin-bottom: 15px; + font-size: 0.9rem; +} + +.about-text h2 { + font-size: 3rem; + margin-bottom: 30px; + line-height: 1.2; +} + +.about-text p { + font-size: 1.1rem; + margin-bottom: 20px; + color: var(--gray-dark); +} + +.milestones { + margin-top: 45px; + border-top: 2px solid var(--gray-light); + padding-top: 35px; +} + +.milestones h3 { + margin-bottom: 25px; + font-size: 1.5rem; +} + +.milestone-item { + display: flex; + gap: 25px; + margin-bottom: 20px; +} + +.milestone-item .year { + background: var(--gray-light); + padding: 5px 15px; + border-radius: 50px; + font-weight: 800; + color: var(--primary); + white-space: nowrap; + height: fit-content; +} + +.milestone-item p { + margin: 0; + font-size: 1rem; + font-weight: 500; +} + +.about-btns { + display: flex; + gap: 20px; + margin-top: 40px; +} + +/* Process Section */ +.process-section { + background: var(--white); +} + +.process-steps { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 20px; +} + +.step-card { + text-align: center; + position: relative; + padding: 30px 20px; +} + +.step-num { + width: 60px; + height: 60px; + background: var(--gray-light); + color: var(--primary); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: 800; + margin: 0 auto 25px; + transition: var(--transition); +} + +.step-card:hover .step-num { + background: var(--primary); + color: white; + transform: scale(1.1); +} + +.step-card h3 { + font-size: 1.25rem; + margin-bottom: 15px; +} + +.step-card p { + font-size: 0.95rem; + color: var(--gray); +} + +/* Testimonials */ +.testimonials-section { + background: #f8fafc; +} + +.testimonial-card { + background: white; + padding: 50px 40px; + border-radius: var(--radius); + box-shadow: var(--shadow); + margin: 25px; +} + +.quote-icon { + font-size: 2.5rem; + color: rgba(0, 98, 255, 0.08); + margin-bottom: 25px; +} + +.testimonial-card p { + font-size: 1.1rem; + font-style: italic; + margin-bottom: 30px; +} + +.client-info { + display: flex; + align-items: center; + gap: 15px; + margin-top: 30px; +} + +.client-info img { + width: 60px; + height: 60px; + border-radius: 50%; + object-fit: cover; + border: 3px solid var(--gray-light); +} + +.client-info h4 { + margin: 0; + font-size: 1.1rem; +} + +.client-info span { + color: var(--gray); + font-size: 0.9rem; +} + +/* Contact Revamp */ +.contact-section { + background: #f0f4f8; + position: relative; + overflow: hidden; +} + +.contact-section::before { + content: ''; + position: absolute; + top: -10%; + right: -5%; + width: 400px; + height: 400px; + background: rgba(0, 98, 255, 0.03); + border-radius: 50%; + z-index: 0; +} + +.contact-wrapper { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 60px; + position: relative; + z-index: 1; +} + +.contact-visual { + display: flex; + flex-direction: column; + justify-content: center; +} + +.contact-header h2 { + font-size: 3.5rem; + line-height: 1.1; + margin-bottom: 25px; +} + +.contact-header p { + font-size: 1.2rem; + color: var(--gray); + margin-bottom: 50px; +} + +.contact-methods { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 25px; +} + +.method-card { + background: white; + padding: 30px; + border-radius: 20px; + box-shadow: var(--shadow); + transition: var(--transition); +} + +.method-card:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-lg); +} + +.method-card i { + font-size: 2rem; + color: var(--primary); + margin-bottom: 20px; +} + +.method-card h3 { + font-size: 1.2rem; + margin-bottom: 10px; +} + +.method-card p { + font-size: 0.9rem; + color: var(--gray); + margin-bottom: 15px; +} + +.method-card a, .method-card span { + font-weight: 700; + color: var(--dark); + font-size: 1rem; +} + +.contact-form-container { + background: white; + padding: 60px; + border-radius: 30px; + box-shadow: var(--shadow-lg); + border: 1px solid rgba(0, 98, 255, 0.05); +} + +.modern-form .form-title { + margin-bottom: 40px; +} + +.modern-form .form-title h3 { + font-size: 1.8rem; + margin-bottom: 8px; +} + +.modern-form .form-title p { + color: var(--gray); +} + +.input-group { + position: relative; + margin-bottom: 35px; +} + +.input-group input, +.input-group textarea, +.input-group select { + width: 100%; + padding: 15px 0; + font-size: 1.1rem; + border: none; + border-bottom: 2px solid var(--gray-light); + background: transparent; + outline: none; + transition: var(--transition); + color: var(--dark); +} + +.input-group label { + position: absolute; + top: 15px; + left: 0; + font-size: 1.1rem; + color: var(--gray); + pointer-events: none; + transition: var(--transition); +} + +.input-group input:focus ~ label, +.input-group input:valid ~ label, +.input-group textarea:focus ~ label, +.input-group textarea:valid ~ label, +.input-group select:focus ~ label, +.input-group select:not([value=""]):valid ~ label { + top: -15px; + font-size: 0.85rem; + color: var(--primary); + font-weight: 700; +} + +.input-group input:focus, +.input-group textarea:focus, +.input-group select:focus { + border-bottom-color: var(--primary); +} + +.btn-submit { + width: 100%; + padding: 18px; + background: var(--primary); + color: white; + border: none; + border-radius: 15px; + font-size: 1.1rem; + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; + gap: 15px; + cursor: pointer; + transition: var(--transition); + margin-top: 20px; +} + +.btn-submit:hover { + background: var(--primary-dark); + transform: scale(1.02); + box-shadow: 0 15px 30px rgba(0, 98, 255, 0.3); +} + +/* Footer */ +footer { + background: #050810; + color: white; + padding: 100px 0 50px; +} + +.footer-top { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 50px; + padding-bottom: 60px; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.footer-brand .logo { + font-size: 2rem; + margin-bottom: 25px; +} + +.footer-brand p { + opacity: 0.7; + max-width: 400px; + font-size: 1.1rem; +} + +.footer-nav h4, .footer-social h4 { + color: white; + margin-bottom: 30px; + font-size: 1.25rem; +} + +.footer-nav a { + display: block; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 15px; + font-weight: 500; +} + +.footer-nav a:hover { + color: var(--primary); + padding-left: 10px; +} + +.social-icons { + display: flex; + gap: 20px; +} + +.social-icons a { + width: 50px; + height: 50px; + background: rgba(255, 255, 255, 0.05); + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: 1.3rem; + transition: var(--transition); +} + +.social-icons a:hover { + background: var(--primary); + transform: translateY(-5px); +} + +.footer-bottom { + padding-top: 50px; + display: flex; + justify-content: space-between; + align-items: center; + opacity: 0.5; + font-size: 0.95rem; +} + +/* Mobile Responsive */ +@media (max-width: 1200px) { + .hero-content h1 { font-size: 3.5rem; } + .about-flex { gap: 40px; } + .process-steps { grid-template-columns: repeat(3, 1fr); } + .contact-header h2 { font-size: 2.8rem; } +} + +@media (max-width: 992px) { + .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } + .about-flex { flex-direction: column; } + .about-image { width: 100%; max-width: 600px; margin: 0 auto 60px; } + .experience-tag { right: 0; bottom: -20px; } + .contact-wrapper { grid-template-columns: 1fr; } + .footer-top { grid-template-columns: 1fr; gap: 40px; text-align: center; } + .footer-brand p { margin: 25px auto; } + .social-icons { justify-content: center; } + .footer-bottom { flex-direction: column; gap: 20px; text-align: center; } + + .nav-links { + position: fixed; + top: 0; + right: -100%; width: 80%; - height: 100%; - border-radius: var(--radius-card); - border: 2px solid #000; - box-shadow: var(--shadow-hard); - left: 10%; - transform: rotate(-3deg); - background-size: cover; + height: 100vh; + background: white; + flex-direction: column; + justify-content: center; + transition: var(--transition); + box-shadow: -10px 0 30px rgba(0,0,0,0.1); + } + + .nav-links.active { + right: 0; + } + + .mobile-menu-toggle { + display: block; + } } -/* Forms */ -.form-control { - border: 2px solid #000; - border-radius: 0.5rem; - padding: 1rem; - font-weight: 500; - background: #f8f9fa; -} - -.form-control:focus { - box-shadow: 4px 4px 0 var(--color-primary); - border-color: #000; - background: #fff; -} - -/* Animations */ -.animate-up { - opacity: 0; - transform: translateY(30px); - animation: fadeUp 0.8s ease forwards; -} - -.delay-100 { animation-delay: 0.1s; } -.delay-200 { animation-delay: 0.2s; } - -@keyframes fadeUp { - to { - opacity: 1; - transform: translateY(0); - } -} - -/* Social */ -.social-links a { - transition: transform 0.2s; - display: inline-block; -} -.social-links a:hover { - transform: scale(1.2) rotate(10deg); - color: var(--color-accent) !important; -} - -/* Responsive */ -@media (max-width: 991px) { - .rotate-divider { - transform: rotate(0); - margin-top: 0; - margin-bottom: 2rem; - } - - .hero-section { - padding-top: 120px; - text-align: center; - min-height: auto; - padding-bottom: 100px; - } - - .display-1 { font-size: 3.5rem; } - - .blob-1 { width: 300px; height: 300px; right: -20%; } - .blob-2 { width: 300px; height: 300px; left: -20%; } -} +@media (max-width: 768px) { + .hero-content h1 { font-size: 2.8rem; } + .hero-content p { font-size: 1.1rem; } + .hero-btns { flex-direction: column; } + .section-header h2 { font-size: 2.2rem; } + .process-steps { grid-template-columns: 1fr; } + .about-text h2 { font-size: 2.2rem; } + .skills-grid { grid-template-columns: 1fr; } + .portfolio-grid { grid-template-columns: 1fr; } + .contact-methods { grid-template-columns: 1fr; } + .contact-form-container { padding: 40px 25px; } +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index fdf2cfd..c01a20a 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,73 +1,191 @@ document.addEventListener('DOMContentLoaded', () => { + // Navbar Scroll Effect + const navbar = document.querySelector('.navbar'); + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + }); + + // Mobile Menu Toggle + const mobileMenuToggle = document.querySelector('.mobile-menu-toggle'); + const navLinks = document.querySelector('.nav-links'); - // Smooth scrolling for navigation links + if (mobileMenuToggle) { + mobileMenuToggle.addEventListener('click', () => { + navLinks.classList.toggle('active'); + const icon = mobileMenuToggle.querySelector('i'); + if (navLinks.classList.contains('active')) { + icon.classList.replace('fa-bars', 'fa-times'); + } else { + icon.classList.replace('fa-times', 'fa-bars'); + } + }); + } + + // Hero Swiper + const heroSwiper = new Swiper('.hero-swiper', { + loop: true, + effect: 'fade', + fadeEffect: { + crossFade: true + }, + autoplay: { + delay: 6000, + disableOnInteraction: false, + }, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + }); + + // Testimonials Swiper + const testimonialsSwiper = new Swiper('.testimonials-swiper', { + slidesPerView: 1, + spaceBetween: 30, + loop: true, + autoplay: { + delay: 5000, + disableOnInteraction: false, + }, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + breakpoints: { + 768: { + slidesPerView: 2, + }, + 1024: { + slidesPerView: 3, + }, + }, + }); + + // Portfolio Filtering + const filterBtns = document.querySelectorAll('.filter-btn'); + const portfolioItems = document.querySelectorAll('.portfolio-item'); + + filterBtns.forEach(btn => { + btn.addEventListener('click', () => { + // Update active button + filterBtns.forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + + const filterValue = btn.getAttribute('data-filter'); + + portfolioItems.forEach(item => { + if (filterValue === 'all' || item.classList.contains(filterValue)) { + item.style.display = 'block'; + item.style.animation = 'fadeIn 0.5s ease forwards'; + } else { + item.style.display = 'none'; + } + }); + }); + }); + + // Contact Form Submission + const contactForm = document.getElementById('contactForm'); + const toast = document.getElementById('toast'); + + if (contactForm) { + contactForm.addEventListener('submit', async (e) => { + e.preventDefault(); + + const formData = new FormData(contactForm); + const submitBtn = contactForm.querySelector('button[type="submit"]'); + const originalBtnText = submitBtn.innerHTML; + + submitBtn.disabled = true; + submitBtn.innerHTML = ' 发送中...'; + + try { + const response = await fetch('contact.php', { + method: 'POST', + body: formData + }); + + const result = await response.json(); + + if (result.success) { + showToast('消息已成功发送！我会尽快给您回复。'); + contactForm.reset(); + } else { + showToast('发送失败: ' + (result.error || '请稍后再试')); + } + } catch (error) { + showToast('无法连接到服务器，请检查网络。'); + } finally { + submitBtn.disabled = false; + submitBtn.innerHTML = originalBtnText; + } + }); + } + + function showToast(message) { + toast.innerText = message; + toast.style.display = 'block'; + toast.style.animation = 'slideInUp 0.5s ease forwards'; + + setTimeout(() => { + toast.style.animation = 'slideOutDown 0.5s ease forwards'; + setTimeout(() => { + toast.style.display = 'none'; + }, 500); + }, 5000); + } + + // Smooth scroll for nav links 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) { - // Close mobile menu if open - const navbarToggler = document.querySelector('.navbar-toggler'); - const navbarCollapse = document.querySelector('.navbar-collapse'); - if (navbarCollapse.classList.contains('show')) { - navbarToggler.click(); - } + // Close mobile menu if open + if (navLinks.classList.contains('active')) { + navLinks.classList.remove('active'); + const icon = mobileMenuToggle.querySelector('i'); + icon.classList.replace('fa-times', 'fa-bars'); + } - // Scroll with offset + const target = document.querySelector(this.getAttribute('href')); + if (target) { const offset = 80; - const elementPosition = targetElement.getBoundingClientRect().top; - const offsetPosition = elementPosition + window.pageYOffset - offset; + const bodyRect = document.body.getBoundingClientRect().top; + const elementRect = target.getBoundingClientRect().top; + const elementPosition = elementRect - bodyRect; + const offsetPosition = elementPosition - offset; window.scrollTo({ top: offsetPosition, - behavior: "smooth" + behavior: 'smooth' }); } }); }); +}); - // Navbar scroll effect - const navbar = document.querySelector('.navbar'); - window.addEventListener('scroll', () => { - if (window.scrollY > 50) { - navbar.classList.add('scrolled', 'shadow-sm', 'bg-white'); - navbar.classList.remove('bg-transparent'); - } else { - navbar.classList.remove('scrolled', 'shadow-sm', 'bg-white'); - navbar.classList.add('bg-transparent'); - } - }); - - // Intersection Observer for fade-up animations - const observerOptions = { - threshold: 0.1, - rootMargin: "0px 0px -50px 0px" - }; - - const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - entry.target.classList.add('animate-up'); - entry.target.style.opacity = "1"; - observer.unobserve(entry.target); // Only animate once - } - }); - }, observerOptions); - - // Select elements to animate (add a class 'reveal' to them in HTML if not already handled by CSS animation) - // For now, let's just make sure the hero animations run. - // If we want scroll animations, we'd add opacity: 0 to elements in CSS and reveal them here. - // Given the request, the CSS animation I added runs on load for Hero. - // Let's make the project cards animate in. - - const projectCards = document.querySelectorAll('.project-card'); - projectCards.forEach((card, index) => { - card.style.opacity = "0"; - card.style.animationDelay = `${index * 0.1}s`; - observer.observe(card); - }); - -}); \ No newline at end of file +// Animation styles +const style = document.createElement('style'); +style.textContent = ` + @keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } + } + @keyframes slideInUp { + from { transform: translateY(100%); opacity: 0; } + to { transform: translateY(0); opacity: 1; } + } + @keyframes slideOutDown { + from { transform: translateY(0); opacity: 1; } + to { transform: translateY(100%); opacity: 0; } + } +`; +document.head.appendChild(style); diff --git a/assets/logo.svg b/assets/logo.svg new file mode 100644 index 0000000..06ebd82 --- /dev/null +++ b/assets/logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/pasted-20260205-120005-772c39f1.jpg b/assets/pasted-20260205-120005-772c39f1.jpg new file mode 100644 index 0000000..f870959 Binary files /dev/null and b/assets/pasted-20260205-120005-772c39f1.jpg differ diff --git a/contact.php b/contact.php new file mode 100644 index 0000000..2191738 --- /dev/null +++ b/contact.php @@ -0,0 +1,35 @@ + false, 'error' => 'Invalid request method.']); + exit; +} + +$name = trim($_POST['name'] ?? ''); +$email = trim($_POST['email'] ?? ''); +$type = trim($_POST['type'] ?? ''); +$message = trim($_POST['message'] ?? ''); + +if (empty($name) || empty($email) || empty($message)) { + echo json_encode(['success' => false, 'error' => 'All fields are required.']); + exit; +} + +// Basic validation for type if provided +$allowedTypes = ['fintech', 'web', 'app', 'consult', 'other']; +if (!empty($type) && !in_array($type, $allowedTypes)) { + $type = 'other'; +} + +try { + $pdo = db(); + $stmt = $pdo->prepare("INSERT INTO contact_requests (name, email, type, message) VALUES (?, ?, ?, ?)"); + $stmt->execute([$name, $email, $type, $message]); + + echo json_encode(['success' => true]); +} catch (PDOException $e) { + error_log("Database error: " . $e->getMessage()); + echo json_encode(['success' => false, 'error' => 'Could not save your request. Please try again later.']); +} \ No newline at end of file diff --git a/db/init.php b/db/init.php new file mode 100644 index 0000000..ab9e226 --- /dev/null +++ b/db/init.php @@ -0,0 +1,17 @@ +exec($sql); +} catch (PDOException $e) { + error_log("Database initialization error: " . $e->getMessage()); +} diff --git a/index.php b/index.php index 7205f3d..30823ee 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,661 @@ - + - New Style - - - - - + <?= htmlspecialchars($projectName) ?> | 金融科技与全栈开发专家 | 全球化技术咨询 + + + - - - - - + - - + + + + + - - + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… + + +
+ + + +
+
+
+ +
+
+ 金融科技专家 +

数字化转型的领航者

+

结合深厚的金融行业洞察与前沿开发技术，为您的业务构建稳健、高效的数字化基石。从架构设计到最终落地，全方位赋能。

+
+ + 立即沟通 + + + 探索案例 + +
+
+
+ +
+
+ 全栈开发 +

极致体验，艺术级交互

+

我们不仅仅在写代码，更在塑造用户的感知。每一个动效、每一行逻辑，都旨在为您的用户提供最顺畅、最直观的交互体验。

+
+ + 预约视频会议 + + 获取定制方案 +
+
+
+ +
+
+ 全球视野 +

驱动未来的创新技术

+

从区块链应用到 AI 驱动的分析平台，我们紧跟时代浪潮，将最先进的技术转化为您的商业竞争优势。

+
+ + TG 详细咨询 + + 了解更多 +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+

8+

+

行业经验 (年)

+
+
+

150+

+

成功交付项目

+
+
+

98%

+

客户好评率

+
+
+

1M+

+

支撑用户量级

+
+
+
+
+ + +
+
+
+

全方位技术服务

+
+

深耕技术领域，为您解决从 0 到 1 的开发痛点与从 1 到 N 的增长瓶颈

+
+
+
+
+

全栈应用定制

+

涵盖 Web、移动端及桌面端。使用 PHP (Laravel), Node.js, React, Vue, Flutter 等主流框架，确保系统高性能与跨平台兼容性。

+
    +
  • 响应式 Web 开发
    • +
  • 跨平台移动 App
    • +
  • 复杂系统架构设计
    • +
+
+
+
+

金融科技 (Fintech)

+

专注金融级别的安全与性能。提供支付网关集成、加密资产管理、量化交易终端及实时风控系统的深度定制。

+
    +
  • 高频交易系统界面
    • +
  • 支付通道合规对接
    • +
  • 量化策略展示引擎
    • +
+
+
+
+

UI/UX 品牌视觉

+

不仅仅是美观。通过深入的用户研究与交互设计，打造具有极高品牌辨识度与卓越易用性的产品视觉体验。

+
    +
  • UI 系统规范建立
    • +
  • 动效与交互微调
    • +
  • 品牌视觉策略咨询
    • +
+
+
+
+

安全与运维托管

+

为您的业务保驾护航。提供金融级安全审计、DDoS 防护方案、云基础设施 (AWS/GCP/Aliyun) 自动化部署。

+
    +
  • 渗透测试与加固
    • +
  • CI/CD 流程优化
    • +
  • 24/7 监控与响应
    • +
+
+
+
+

AI 智能化集成

+

将人工智能注入您的业务。集成 LLM (大语言模型)、图像识别、预测性分析模型，助力业务实现智能化跨越。

+
    +
  • AI 聊天机器人集成
    • +
  • 自动化内容生产
    • +
  • 数据挖掘与预测
    • +
+
+
+
+

出海与全球化

+

协助中国企业走向全球。提供多语言适配、多国支付集成、全球加速节点部署以及合规性技术咨询。

+
    +
  • i18n 多语言方案
    • +
  • 全球 CDN 分发加速
    • +
  • 海外云平台合规部署
    • +
+
+
+
+
+ + +
+
+
+

精选项目案例

+
+

每一个项目都是技术与创意的结晶

+
+
+ + + + +
+
+ +
+
+ Fintech Project +
+
+

智能理财投顾平台

+

AI 驱动的资产配置与收益分析系统，支撑 10W+ 日活用户。

+ 查看详情 +
+
+
+
+

智能理财投顾平台

+ 金融科技 / AI 驱动 +
+
+ +
+
+ Web Project +
+
+

奢华酒店品牌站

+

沉浸式视觉体验与全球预订系统深度集成。

+ 查看详情 +
+
+
+
+

奢华酒店品牌站

+ 品牌网页 / 高级视觉设计 +
+
+ +
+
+ App Project +
+
+

企业级 ERP 办公系统

+

模块化资源管理，大幅提升跨部门协同效率 40%。

+ 查看详情 +
+
+
+
+

企业级 ERP 办公系统

+ 应用系统 / 业务流优化 +
+
+ +
+
+ Fintech Project +
+
+

量化交易终端仪表盘

+

毫秒级行情刷新与复杂策略一键执行面板。

+ 查看详情 +
+
+
+
+

量化交易终端仪表盘

+ 金融科技 / 实时数据可视化 +
+
+ +
+
+ Web Project +
+
+

创意设计工作室

+

极简主义风格，完美展现作品集质感与团队魅力。

+ 查看详情 +
+
+
+
+

创意设计工作室

+ 品牌网页 / 极简主义设计 +
+
+ +
+
+ App Project +
+
+

跨境供应链管理平台

+

集成多国物流接口与自动关税计算引擎。

+ 查看详情 +
+
+
+
+

跨境供应链管理平台

+ 应用系统 / 跨境电商解决方案 +
+
+ +
+
+ Fintech Project +
+
+

去中心化钱包系统

+

高强度加密安全方案，支持多链资产管理。

+ 查看详情 +
+
+
+
+

去中心化钱包系统

+ 金融科技 / Web3 +
+
+ +
+
+ Web Project +
+
+

高端地产虚拟看房

+

360度全景展示与实时预约看房系统。

+ 查看详情 +
+
+
+
+

高端地产虚拟看房

+ 品牌网页 / 3D展示 +
+
+ +
+
+ App Project +
+
+

智能健康管理 App

+

硬件数据实时对接，提供个性化健康建议。

+ 查看详情 +
+
+
+
+

智能健康管理 App

+ 应用系统 / 物联网 +
+
+
+
+
+ + +
+
+
+
+ Profile +
+ 8+ + 行业资深经验 +
+
+
+ 关于我 +

全栈视野，深度赋能业务增长

+

您好，我是 Zhang。我是一名深耕金融科技与全栈开发领域的资深工程师及技术顾问。在超过 8 年的职业生涯中，我曾服务于多家领先的金融机构与初创科技公司。

+

我坚信：技术是解决商业问题的手段，而非目的。 我的核心优势在于能够快速理解业务逻辑，并将其转化为高性能、可维护的代码架构。无论是追求极致体验的 C 端产品，还是要求严苛的 B 端金融系统，我都能提供从咨询、设计到交付的全流程专家服务。

+ +
+
后端：PHP (Laravel) / Go / Node.js
+
前端：React / Vue3 / Flutter
+
存储：MySQL / PostgreSQL / Redis
+
架构：AWS / K8s / 云原生
+
+ +
+

职业里程碑

+
+ 2023 - 至今 +

担任独立技术顾问，助力 20+ 企业完成数字化转型与全球化布局。

+
+
+ 2019 - 2022 +

某头部 Fintech 公司技术负责人，主导重构了日处理金额过亿的支付清算系统。

+
+
+ 2016 - 2019 +

全栈工程师，负责多款金融理财类 App 从 0 到 1 的研发与迭代。

+
+
+ +
+ + TG 立即咨询 + + 查看作品集 +
+
+
+
+
+ + +
+
+
+

服务流程

+
+

标准化、透明化的合作流程，确保项目高品质交付

+
+
+
+
01
+

需求挖掘

+

深入沟通您的业务目标、目标用户及痛点，明确核心需求与项目边界。

+
+
+
02
+

方案设计

+

输出原型设计与技术架构方案，确保每一步都有据可依，规避技术风险。

+
+
+
03
+

高效研发

+

敏捷开发模式，定期同步进展，让您随时掌控项目动态，快速迭代反馈。

+
+
+
04
+

质量管控

+

覆盖压力测试、安全审计与多端适配，确保产品在任何环境下都表现卓越。

+
+
+
05
+

部署交付

+

一键自动化部署与全方位技术培训，提供长期可靠的技术支持与运维指导。

+
+
+
+
+ + +
+
+
+

来自全球客户的真实评价

+
+
+
+
+
+
+
+

“我们在开发复杂的量化展示工具时遇到了很大的性能挑战，直到遇到了 Zhang。专业的态度和高效的代码实现让我们的产品提前上线，这种对业务的深刻理解在技术圈非常罕见。”

+
+ Client +
+

李伟

+ 某金融机构 技术总监 +
+
+
+
+
+
+
+

“网站的设计不仅美观，而且在移动端的体验极其流畅。Telegram 响应非常及时，交流过程非常愉快，能够精准捕捉到我们品牌想要传达的高级感。”

+
+ Client +
+

王曼迪

+ 创意工作室 创始人 +
+
+
+
+
+
+
+

“我们需要一个极具个性且能承载大量内容的着陆页，他完全超出了我们的预期。视觉效果震撼，功能逻辑严密，真正做到了技术与艺术的结合。”

+
+ Client +
+

陈杰

+ 电商初创企业 CEO +
+
+
+
+
+
+
+

“Zhang 帮我们重构了核心支付逻辑，稳定性提升了显著，再也没有出现过掉单情况。他不仅仅是开发者，更是我们值得信赖的技术合伙人。”

+
+ Client +
+

Sarah Thompson

+ Global Fintech Ltd. CTO +
+
+
+
+
+
+
+

“从最初的简单想法到最终的复杂系统落地，Zhang 全程表现出了极高的专业素养。交付物质量极高，文档齐全，后续交接非常顺畅。”

+
+ Client +
+

刘洋

+ 智能硬件创业者 +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ 立即咨询 +

定制您的数字化未来

+

拒绝千篇一律的方案。填写下方表单，我们将为您提供针对性的一对一技术咨询。

+
+
+
+ +

Telegram

+

实时在线，极速反馈

+ @zhangshihao818 +
+
+ +

Email

+

正式商务沟通

+ contact@yourdomain.com +
+
+
+
+
+
+

项目咨询表

+

我们将保护您的隐私信息

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+
+
+ + + +
+ + + + - + \ No newline at end of file