diff --git a/assets/css/custom.css b/assets/css/custom.css index 547229e..d52a3ff 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -1,18 +1,22 @@ :root { - --primary: #0062ff; - --primary-dark: #004dc7; + --primary: #0072ff; + --primary-dark: #0056cc; --secondary: #10b981; - --dark: #111827; - --gray-dark: #374151; - --gray: #6b7280; - --gray-light: #f3f4f6; + --accent: #f59e0b; + --danger: #ef4444; + --dark: #0f172a; + --gray-dark: #334155; + --gray: #64748b; + --gray-light: #f1f5f9; --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; + --shadow-lg: 0 20px 50px -10px rgba(0, 0, 0, 0.15); + --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + --radius: 16px; + --glass: rgba(255, 255, 255, 0.7); + --glass-border: rgba(255, 255, 255, 0.3); } * { @@ -29,7 +33,7 @@ body { font-family: var(--font-body); background-color: var(--white); color: var(--gray-dark); - line-height: 1.6; + line-height: 1.7; overflow-x: hidden; } @@ -37,6 +41,7 @@ h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--dark); font-weight: 700; + letter-spacing: -0.02em; } a { @@ -54,39 +59,42 @@ img { } .container { - max-width: 1200px; + max-width: 1300px; margin: 0 auto; - padding: 0 24px; + padding: 0 30px; } section { - padding: 100px 0; + padding: 120px 0; } .section-header { text-align: center; - margin-bottom: 60px; + margin-bottom: 80px; } .section-header h2 { - font-size: 2.8rem; - margin-bottom: 15px; - position: relative; + font-size: 3.2rem; + margin-bottom: 20px; + background: linear-gradient(135deg, var(--dark), var(--primary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .section-header .line { - width: 80px; - height: 5px; - background: var(--primary); - margin: 0 auto 20px; - border-radius: 5px; + width: 60px; + height: 6px; + background: linear-gradient(to right, var(--primary), var(--secondary)); + margin: 0 auto 25px; + border-radius: 50px; } .section-header p { color: var(--gray); - font-size: 1.15rem; - max-width: 700px; + font-size: 1.2rem; + max-width: 750px; margin: 0 auto; + font-weight: 500; } /* Buttons */ @@ -94,37 +102,37 @@ section { display: inline-flex; align-items: center; justify-content: center; - padding: 14px 35px; - border-radius: var(--radius); - font-weight: 600; - font-size: 1rem; - gap: 10px; + padding: 16px 38px; + border-radius: 50px; + font-weight: 700; + font-size: 1.05rem; + gap: 12px; cursor: pointer; border: none; transition: var(--transition); } .btn-primary { - background: var(--primary); + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: var(--white); + box-shadow: 0 10px 20px rgba(0, 114, 255, 0.2); } .btn-primary:hover { - background: var(--primary-dark); - transform: translateY(-3px); - box-shadow: 0 12px 25px rgba(0, 98, 255, 0.4); + transform: translateY(-4px) scale(1.02); + box-shadow: 0 15px 30px rgba(0, 114, 255, 0.35); } .btn-glass { - background: rgba(255, 255, 255, 0.15); - backdrop-filter: blur(12px); + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(15px); color: var(--white); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid rgba(255, 255, 255, 0.2); } .btn-glass:hover { - background: rgba(255, 255, 255, 0.25); - transform: translateY(-3px); + background: rgba(255, 255, 255, 0.2); + transform: translateY(-4px); } .btn-outline { @@ -136,7 +144,7 @@ section { .btn-outline:hover { background: var(--primary); color: white; - transform: translateY(-3px); + transform: translateY(-4px); } .btn-block { @@ -150,15 +158,16 @@ section { left: 0; width: 100%; z-index: 1000; - padding: 25px 0; + padding: 30px 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); + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(20px); + padding: 18px 0; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .navbar .container { @@ -168,54 +177,81 @@ section { } .logo { - font-size: 1.6rem; + font-size: 1.8rem; font-weight: 800; - color: var(--primary); + color: var(--dark); display: flex; align-items: center; gap: 12px; } .logo img { - border-radius: 8px; + border-radius: 12px; + background: white; + padding: 2px; + box-shadow: var(--shadow); } .nav-links { display: flex; align-items: center; - gap: 35px; + gap: 40px; } .nav-links a { color: var(--dark); - font-weight: 600; + font-weight: 700; font-size: 1rem; + position: relative; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 3px; + background: var(--primary); + transition: var(--transition); + border-radius: 5px; } .nav-links a:hover { color: var(--primary); } +.nav-links a:hover::after { + width: 100%; +} + .nav-cta { background: var(--primary); color: white !important; - padding: 10px 24px; + padding: 12px 28px; border-radius: 50px; + box-shadow: 0 5px 15px rgba(0, 114, 255, 0.2); +} + +.nav-cta::after { display: none !important; } + +.nav-cta:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0, 114, 255, 0.3); } .mobile-menu-toggle { display: none; - font-size: 1.8rem; + font-size: 2rem; cursor: pointer; color: var(--dark); - z-index: 1001; } /* Hero Section */ .hero-section { padding: 0; height: 100vh; - min-height: 800px; + min-height: 850px; } .hero-swiper { @@ -234,58 +270,71 @@ section { .hero-content { text-align: center; color: var(--white); - max-width: 1000px; - padding: 0 24px; + max-width: 1100px; + padding: 0 30px; + opacity: 0; + transform: translateY(30px); + transition: all 1s ease 0.3s; +} + +.swiper-slide-active .hero-content { + opacity: 1; + transform: translateY(0); } .hero-content h1 { - font-size: 4.5rem; + font-size: 5rem; color: white; - margin-bottom: 25px; - text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); - line-height: 1.2; + margin-bottom: 30px; + text-shadow: 0 15px 45px rgba(0, 0, 0, 0.5); + line-height: 1.1; + font-weight: 800; } .hero-content p { - font-size: 1.4rem; - margin-bottom: 45px; + font-size: 1.5rem; + margin-bottom: 50px; opacity: 0.95; - max-width: 800px; + max-width: 850px; margin-left: auto; margin-right: auto; + line-height: 1.6; } .hero-btns { display: flex; justify-content: center; - gap: 25px; + gap: 30px; } .badge { display: inline-block; - padding: 6px 18px; - background: var(--primary); + padding: 8px 22px; + background: linear-gradient(135deg, var(--primary), var(--secondary)); border-radius: 50px; - font-size: 0.9rem; + font-size: 0.95rem; font-weight: 800; text-transform: uppercase; - margin-bottom: 25px; - letter-spacing: 1.5px; + margin-bottom: 30px; + letter-spacing: 2px; + color: white; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* Stats */ .stats-section { background: var(--dark); - padding: 80px 0; - margin-top: -80px; + padding: 90px 0; + margin-top: -90px; position: relative; z-index: 10; - border-radius: var(--radius); - width: 95%; - max-width: 1200px; + border-radius: 30px; + width: 92%; + max-width: 1300px; margin-left: auto; margin-right: auto; box-shadow: var(--shadow-lg); + border: 1px solid rgba(255, 255, 255, 0.05); } .stats-grid { @@ -295,120 +344,152 @@ section { } .stat-item h3 { - color: var(--primary); - font-size: 3rem; - margin-bottom: 8px; + color: var(--white); + font-size: 3.5rem; + margin-bottom: 10px; + background: linear-gradient(135deg, var(--white), var(--primary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .stat-item p { - color: rgba(255, 255, 255, 0.8); - font-size: 1rem; - font-weight: 500; - letter-spacing: 0.5px; + color: rgba(255, 255, 255, 0.6); + font-size: 1.1rem; + font-weight: 600; + letter-spacing: 1px; } /* Services */ .services-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 30px; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 40px; } .service-card { background: var(--white); - padding: 50px 40px; + padding: 60px 45px; border-radius: var(--radius); box-shadow: var(--shadow); transition: var(--transition); border: 1px solid var(--gray-light); display: flex; flex-direction: column; + position: relative; + overflow: hidden; +} + +.service-card::after { + content: ''; + position: absolute; + top: 0; left: 0; width: 100%; height: 5px; + background: var(--primary); + transform: scaleX(0); + transition: var(--transition); + transform-origin: left; } .service-card:hover { - transform: translateY(-12px); + transform: translateY(-15px); box-shadow: var(--shadow-lg); - border-color: var(--primary); + border-color: transparent; +} + +.service-card:hover::after { + transform: scaleX(1); } .icon-box { - width: 80px; - height: 80px; - background: rgba(0, 98, 255, 0.08); + width: 90px; + height: 90px; + background: var(--gray-light); color: var(--primary); display: flex; align-items: center; justify-content: center; - font-size: 2.2rem; - border-radius: 20px; - margin-bottom: 30px; + font-size: 2.5rem; + border-radius: 24px; + margin-bottom: 35px; transition: var(--transition); } +.service-card:nth-child(1) .icon-box { color: #0072ff; background: rgba(0, 114, 255, 0.08); } +.service-card:nth-child(2) .icon-box { color: #10b981; background: rgba(16, 185, 129, 0.08); } +.service-card:nth-child(3) .icon-box { color: #f59e0b; background: rgba(245, 158, 11, 0.08); } +.service-card:nth-child(4) .icon-box { color: #6366f1; background: rgba(99, 102, 241, 0.08); } +.service-card:nth-child(5) .icon-box { color: #ec4899; background: rgba(236, 72, 153, 0.08); } +.service-card:nth-child(6) .icon-box { color: #14b8a6; background: rgba(20, 184, 166, 0.08); } + .service-card:hover .icon-box { + transform: rotateY(180deg); background: var(--primary); - color: white; + color: white !important; } .service-card h3 { - font-size: 1.5rem; - margin-bottom: 20px; + font-size: 1.6rem; + margin-bottom: 25px; } .service-card p { color: var(--gray); - margin-bottom: 25px; + margin-bottom: 30px; + font-size: 1.05rem; } .service-list { margin-top: auto; - padding-top: 20px; + padding-top: 25px; 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; + gap: 15px; + margin-bottom: 15px; + font-size: 1rem; + font-weight: 600; } .service-list li i { color: var(--secondary); - font-size: 0.8rem; + font-size: 0.9rem; } /* Portfolio */ .portfolio-filters { display: flex; justify-content: center; - gap: 15px; - margin-bottom: 50px; + gap: 20px; + margin-bottom: 60px; flex-wrap: wrap; } .filter-btn { - padding: 10px 28px; - background: var(--gray-light); - border: none; + padding: 12px 32px; + background: var(--white); + border: 1px solid var(--gray-light); border-radius: 50px; cursor: pointer; font-weight: 700; transition: var(--transition); - color: var(--gray-dark); + color: var(--gray); + box-shadow: var(--shadow); } .filter-btn.active, .filter-btn:hover { background: var(--primary); color: white; + border-color: var(--primary); + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(0, 114, 255, 0.2); } .portfolio-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); - gap: 35px; + grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); + gap: 40px; } .portfolio-item { @@ -417,6 +498,7 @@ section { box-shadow: var(--shadow); background: white; transition: var(--transition); + border: 1px solid var(--gray-light); } .portfolio-img-wrapper { @@ -438,75 +520,81 @@ section { left: 0; width: 100%; height: 100%; - background: rgba(0, 98, 255, 0.92); + background: linear-gradient(to bottom, rgba(0, 114, 255, 0.8), rgba(15, 23, 42, 0.95)); display: flex; align-items: center; justify-content: center; text-align: center; - padding: 40px; + padding: 50px; opacity: 0; transition: var(--transition); color: white; + transform: translateY(20px); } .portfolio-item:hover .portfolio-overlay { opacity: 1; + transform: translateY(0); } .portfolio-item:hover .portfolio-img-wrapper img { - transform: scale(1.15); + transform: scale(1.1); } .overlay-content h3 { color: white; - font-size: 1.6rem; - margin-bottom: 15px; + font-size: 1.8rem; + margin-bottom: 20px; } .overlay-content p { - font-size: 1rem; + font-size: 1.1rem; opacity: 0.9; + line-height: 1.5; } .view-details { display: inline-flex; align-items: center; - gap: 10px; - margin-top: 25px; + gap: 12px; + margin-top: 30px; color: white; - border: 1px solid white; - padding: 8px 20px; + border: 2px solid rgba(255, 255, 255, 0.4); + padding: 10px 28px; border-radius: 50px; - font-weight: 600; + font-weight: 700; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); } .view-details:hover { background: white; color: var(--primary); + border-color: white; } .portfolio-info { - padding: 25px; + padding: 30px; } .portfolio-info h4 { - font-size: 1.25rem; - margin-bottom: 8px; + font-size: 1.4rem; + margin-bottom: 10px; } .portfolio-info span { color: var(--primary); - font-weight: 700; - font-size: 0.85rem; + font-weight: 800; + font-size: 0.9rem; text-transform: uppercase; - letter-spacing: 1px; + letter-spacing: 1.5px; } /* About */ .about-flex { display: flex; align-items: flex-start; - gap: 80px; + gap: 100px; } .about-image { @@ -515,7 +603,7 @@ section { } .about-image img { - border-radius: var(--radius); + border-radius: 30px; box-shadow: var(--shadow-lg); width: 100%; } @@ -524,495 +612,656 @@ section { position: absolute; bottom: -40px; right: -40px; - background: var(--primary); + background: var(--dark); color: white; - padding: 30px; - border-radius: var(--radius); + padding: 40px; + border-radius: 24px; display: flex; flex-direction: column; align-items: center; - box-shadow: 0 15px 35px rgba(0, 98, 255, 0.4); + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); } .experience-tag strong { - font-size: 3rem; + font-size: 4rem; line-height: 1; + background: linear-gradient(135deg, var(--white), var(--primary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .experience-tag span { - font-weight: 700; - font-size: 1rem; - margin-top: 5px; + font-weight: 800; + font-size: 1.1rem; + margin-top: 10px; + letter-spacing: 1px; } .about-text { - flex: 1.4; + flex: 1.3; } .subtitle { color: var(--primary); - font-weight: 800; + font-weight: 900; text-transform: uppercase; - letter-spacing: 3px; + letter-spacing: 4px; display: block; - margin-bottom: 15px; - font-size: 0.9rem; + margin-bottom: 20px; + font-size: 1rem; } .about-text h2 { - font-size: 3rem; - margin-bottom: 30px; + font-size: 3.5rem; + margin-bottom: 35px; line-height: 1.2; } .about-text p { - font-size: 1.1rem; - margin-bottom: 20px; + font-size: 1.2rem; + margin-bottom: 25px; color: var(--gray-dark); } +.skills-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 25px; + margin: 40px 0; +} + +.skill-item { + display: flex; + align-items: center; + gap: 15px; + font-weight: 700; + font-size: 1.05rem; + padding: 15px 25px; + background: var(--gray-light); + border-radius: 15px; + transition: var(--transition); +} + +.skill-item:hover { + background: white; + box-shadow: var(--shadow); + transform: translateX(10px); +} + +/* Individual Icon Colors */ +.skill-item .fa-php { color: #777bb3; font-size: 1.5rem; } +.skill-item .fa-js { color: #f7df1e; font-size: 1.5rem; } +.skill-item .fa-database { color: #336791; font-size: 1.5rem; } +.skill-item .fa-server { color: #ff9900; font-size: 1.5rem; } + .milestones { - margin-top: 45px; + margin-top: 50px; border-top: 2px solid var(--gray-light); - padding-top: 35px; + padding-top: 40px; } .milestones h3 { - margin-bottom: 25px; - font-size: 1.5rem; + margin-bottom: 30px; + font-size: 1.8rem; } .milestone-item { display: flex; - gap: 25px; - margin-bottom: 20px; + gap: 30px; + margin-bottom: 25px; + padding: 20px; + border-radius: 15px; + transition: var(--transition); +} + +.milestone-item:hover { + background: #f8fafc; } .milestone-item .year { - background: var(--gray-light); - padding: 5px 15px; + background: var(--primary); + padding: 8px 20px; border-radius: 50px; font-weight: 800; - color: var(--primary); + color: white; white-space: nowrap; height: fit-content; + font-size: 0.9rem; } .milestone-item p { margin: 0; - font-size: 1rem; - font-weight: 500; + font-size: 1.1rem; + font-weight: 600; + color: var(--dark); } .about-btns { display: flex; - gap: 20px; - margin-top: 40px; + gap: 25px; + margin-top: 50px; } /* Process Section */ .process-section { - background: var(--white); + background: #f8fafc; } .process-steps { display: grid; grid-template-columns: repeat(5, 1fr); - gap: 20px; + gap: 30px; } .step-card { text-align: center; position: relative; - padding: 30px 20px; + padding: 40px 25px; + background: white; + border-radius: 20px; + box-shadow: var(--shadow); + transition: var(--transition); +} + +.step-card:hover { + transform: translateY(-10px); + box-shadow: var(--shadow-lg); } .step-num { - width: 60px; - height: 60px; + width: 70px; + height: 70px; background: var(--gray-light); color: var(--primary); - border-radius: 50%; + border-radius: 24px; display: flex; align-items: center; justify-content: center; - font-size: 1.5rem; - font-weight: 800; - margin: 0 auto 25px; + font-size: 1.8rem; + font-weight: 900; + margin: 0 auto 30px; transition: var(--transition); } .step-card:hover .step-num { background: var(--primary); color: white; - transform: scale(1.1); + transform: rotate(10deg); } .step-card h3 { - font-size: 1.25rem; - margin-bottom: 15px; + font-size: 1.4rem; + margin-bottom: 20px; } .step-card p { - font-size: 0.95rem; + font-size: 1rem; color: var(--gray); } /* Testimonials */ .testimonials-section { - background: #f8fafc; + background: white; } .testimonial-card { - background: white; - padding: 50px 40px; - border-radius: var(--radius); + background: #f8fafc; + padding: 60px 50px; + border-radius: 30px; box-shadow: var(--shadow); - margin: 25px; + margin: 30px; + border: 1px solid var(--gray-light); } .quote-icon { - font-size: 2.5rem; - color: rgba(0, 98, 255, 0.08); - margin-bottom: 25px; + font-size: 3rem; + color: var(--primary); + opacity: 0.15; + margin-bottom: 30px; } .testimonial-card p { - font-size: 1.1rem; + font-size: 1.2rem; font-style: italic; - margin-bottom: 30px; + margin-bottom: 40px; + color: var(--dark); + font-weight: 500; } .client-info { display: flex; align-items: center; - gap: 15px; - margin-top: 30px; + gap: 20px; + margin-top: 40px; } .client-info img { - width: 60px; - height: 60px; - border-radius: 50%; + width: 70px; + height: 70px; + border-radius: 24px; object-fit: cover; - border: 3px solid var(--gray-light); + border: 4px solid white; + box-shadow: var(--shadow); } .client-info h4 { margin: 0; - font-size: 1.1rem; + font-size: 1.25rem; } .client-info span { - color: var(--gray); - font-size: 0.9rem; + color: var(--primary); + font-size: 1rem; + font-weight: 700; } /* Contact Revamp */ .contact-section { - background: #f0f4f8; + background: var(--dark); + color: white; position: relative; overflow: hidden; + border-radius: 50px 50px 0 0; } .contact-section::before { content: ''; position: absolute; - top: -10%; - right: -5%; - width: 400px; - height: 400px; - background: rgba(0, 98, 255, 0.03); + top: -15%; + right: -10%; + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba(0, 114, 255, 0.1) 0%, transparent 70%); border-radius: 50%; - z-index: 0; } .contact-wrapper { display: grid; - grid-template-columns: 1fr 1.2fr; - gap: 60px; + grid-template-columns: 1fr 1.3fr; + gap: 80px; position: relative; z-index: 1; } -.contact-visual { - display: flex; - flex-direction: column; - justify-content: center; -} - .contact-header h2 { - font-size: 3.5rem; + font-size: 4rem; line-height: 1.1; - margin-bottom: 25px; + margin-bottom: 30px; + color: white; } .contact-header p { - font-size: 1.2rem; - color: var(--gray); - margin-bottom: 50px; + font-size: 1.3rem; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 60px; } .contact-methods { display: grid; grid-template-columns: 1fr 1fr; - gap: 25px; + gap: 30px; } .method-card { - background: white; - padding: 30px; - border-radius: 20px; - box-shadow: var(--shadow); + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(10px); + padding: 40px 30px; + border-radius: 24px; + border: 1px solid rgba(255, 255, 255, 0.1); transition: var(--transition); } .method-card:hover { - transform: translateY(-5px); - box-shadow: var(--shadow-lg); + background: rgba(255, 255, 255, 0.1); + transform: translateY(-8px); } .method-card i { - font-size: 2rem; + font-size: 2.5rem; color: var(--primary); - margin-bottom: 20px; + margin-bottom: 25px; } .method-card h3 { - font-size: 1.2rem; - margin-bottom: 10px; + font-size: 1.4rem; + margin-bottom: 12px; + color: white; } .method-card p { - font-size: 0.9rem; - color: var(--gray); - margin-bottom: 15px; + font-size: 1rem; + color: rgba(255, 255, 255, 0.6); + margin-bottom: 20px; } .method-card a, .method-card span { - font-weight: 700; - color: var(--dark); - font-size: 1rem; + font-weight: 800; + color: white; + font-size: 1.1rem; } .contact-form-container { background: white; - padding: 60px; - border-radius: 30px; + padding: 80px; + border-radius: 40px; 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 { color: var(--dark); font-size: 2.2rem; } +.modern-form .form-title p { color: var(--gray); font-size: 1.1rem; } -.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); -} +.input-group label { color: var(--gray); font-weight: 600; } +.input-group input, .input-group textarea, .input-group select { border-bottom: 2px solid #e2e8f0; color: var(--dark); font-weight: 600; } .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); + border-radius: 50px; + padding: 20px; + font-size: 1.2rem; } /* Footer */ footer { background: #050810; color: white; - padding: 100px 0 50px; + padding: 120px 0 60px; } .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); + gap: 80px; + padding-bottom: 80px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .footer-brand .logo { - font-size: 2rem; - margin-bottom: 25px; + font-size: 2.5rem; + margin-bottom: 30px; } .footer-brand p { - opacity: 0.7; - max-width: 400px; - font-size: 1.1rem; + opacity: 0.6; + max-width: 450px; + font-size: 1.2rem; + line-height: 1.8; } .footer-nav h4, .footer-social h4 { color: white; - margin-bottom: 30px; - font-size: 1.25rem; + margin-bottom: 40px; + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 2px; } .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; + font-size: 1.1rem; + margin-bottom: 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); + width: 60px; + height: 60px; + border-radius: 20px; + font-size: 1.6rem; } .footer-bottom { - padding-top: 50px; + padding-top: 60px; + opacity: 0.4; + font-weight: 600; +} + +/* Toast */ +.toast { + position: fixed; + bottom: 40px; + right: 40px; + padding: 20px 40px; + background: var(--dark); + color: white; + border-radius: 50px; + font-weight: 700; + box-shadow: var(--shadow-lg); + display: none; + z-index: 2000; +} + +/* Language Switcher */ +.lang-switcher { + position: relative; + display: inline-block; + margin-right: 20px; +} + +.lang-btn { display: flex; - justify-content: space-between; align-items: center; - opacity: 0.5; + gap: 8px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(0, 0, 0, 0.05); + padding: 8px 15px; + border-radius: 50px; + cursor: pointer; + font-weight: 700; + font-size: 0.9rem; + transition: var(--transition); + color: var(--dark); +} + +.navbar.scrolled .lang-btn { + background: var(--gray-light); +} + +.lang-btn:hover { + background: var(--primary); + color: white; +} + +.lang-dropdown { + position: absolute; + top: 100%; + right: 0; + margin-top: 15px; + background: white; + min-width: 180px; + border-radius: 20px; + box-shadow: var(--shadow-lg); + padding: 15px; + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: var(--transition); + z-index: 1001; + display: grid; + grid-template-columns: 1fr; + gap: 5px; +} + +.lang-switcher:hover .lang-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.lang-item { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 15px; + border-radius: 12px; + color: var(--dark); + font-weight: 600; font-size: 0.95rem; + transition: var(--transition); +} + +.lang-item:hover { + background: var(--gray-light); + color: var(--primary); +} + +.lang-item span.flag { + font-size: 1.2rem; +} + +/* Personalized Contact Form */ +.contact-form-container { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(20px); + padding: 60px; + border-radius: 40px; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12); + border: 1px solid rgba(255, 255, 255, 0.5); + position: relative; + overflow: hidden; +} + +.contact-form-container::before { + content: ''; + position: absolute; + top: -50px; + right: -50px; + width: 150px; + height: 150px; + background: linear-gradient(135deg, var(--primary), var(--secondary)); + opacity: 0.1; + border-radius: 50%; + filter: blur(40px); +} + +.form-title h3 { + font-size: 2.5rem !important; + background: linear-gradient(135deg, var(--dark), var(--primary)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: 15px; +} + +.modern-form .input-group { + margin-bottom: 35px; + position: relative; +} + +.modern-form input, .modern-form textarea, .modern-form select { + width: 100%; + padding: 15px 0; + background: transparent; + border: none; + border-bottom: 2px solid #e2e8f0; + outline: none; + font-size: 1.1rem; + color: var(--dark); + font-weight: 500; + transition: var(--transition); +} + +.modern-form label { + position: absolute; + top: 15px; + left: 0; + pointer-events: none; + transition: var(--transition); + color: var(--gray); + font-weight: 600; +} + +.modern-form input:focus ~ label, +.modern-form input:valid ~ label, +.modern-form textarea:focus ~ label, +.modern-form textarea:valid ~ label, +.modern-form select:focus ~ label, +.modern-form select:valid ~ label, +.modern-form select:not([value=""]) ~ label { + top: -12px; + font-size: 0.85rem; + color: var(--primary); +} + +.modern-form input:focus, .modern-form textarea:focus, .modern-form select:focus { + border-bottom-color: var(--primary); +} + +.btn-submit { + width: 100%; + padding: 22px; + border-radius: 100px; + background: linear-gradient(135deg, var(--dark), #1e293b); + color: white; + font-weight: 800; + font-size: 1.2rem; + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 15px; + transition: var(--transition); + box-shadow: 0 10px 30px rgba(15, 23, 42, 0.3); + margin-top: 20px; +} + +.btn-submit:hover { + transform: translateY(-5px); + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); + box-shadow: 0 20px 40px rgba(0, 114, 255, 0.4); +} + +.btn-submit i { + font-size: 1rem; + transition: var(--transition); +} + +.btn-submit:hover i { + transform: translateX(5px) rotate(-15deg); } /* Mobile Responsive */ @media (max-width: 1200px) { - .hero-content h1 { font-size: 3.5rem; } - .about-flex { gap: 40px; } + .hero-content h1 { font-size: 4rem; } + .about-flex { gap: 50px; } .process-steps { grid-template-columns: repeat(3, 1fr); } - .contact-header h2 { font-size: 2.8rem; } + .contact-header h2 { font-size: 3.2rem; } } @media (max-width: 992px) { - .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } + .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 50px; } .about-flex { flex-direction: column; } - .about-image { width: 100%; max-width: 600px; margin: 0 auto 60px; } - .experience-tag { right: 0; bottom: -20px; } + .about-image { width: 100%; max-width: 650px; margin: 0 auto 80px; } + .experience-tag { right: 0; bottom: -30px; padding: 30px; } + .experience-tag strong { font-size: 3rem; } .contact-wrapper { grid-template-columns: 1fr; } - .footer-top { grid-template-columns: 1fr; gap: 40px; text-align: center; } - .footer-brand p { margin: 25px auto; } + .footer-top { grid-template-columns: 1fr; text-align: center; } + .footer-brand p { margin: 30px 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%; + width: 85%; height: 100vh; background: white; flex-direction: column; justify-content: center; - transition: var(--transition); - box-shadow: -10px 0 30px rgba(0,0,0,0.1); + box-shadow: -20px 0 60px rgba(0,0,0,0.1); } - .nav-links.active { - right: 0; - } - - .mobile-menu-toggle { - display: block; - } + .nav-links.active { right: 0; } + .mobile-menu-toggle { display: block; } } @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; } + section { padding: 80px 0; } + .hero-content h1 { font-size: 3rem; } + .hero-content p { font-size: 1.2rem; } + .section-header h2 { font-size: 2.5rem; } .process-steps { grid-template-columns: 1fr; } - .about-text h2 { font-size: 2.2rem; } + .about-text h2 { font-size: 2.5rem; } .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 + .contact-form-container { padding: 50px 30px; } + .contact-header h2 { font-size: 2.5rem; } +} diff --git a/assets/js/main.js b/assets/js/main.js index c01a20a..9662dc6 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -2,10 +2,12 @@ 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'); + if (navbar) { + if (window.scrollY > 50) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } } }); @@ -35,38 +37,7 @@ document.addEventListener('DOMContentLoaded', () => { 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 @@ -75,7 +46,6 @@ document.addEventListener('DOMContentLoaded', () => { filterBtns.forEach(btn => { btn.addEventListener('click', () => { - // Update active button filterBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); @@ -96,16 +66,30 @@ document.addEventListener('DOMContentLoaded', () => { const contactForm = document.getElementById('contactForm'); const toast = document.getElementById('toast'); + // Simple I18N for JS messages based on html lang attribute + const htmlLang = document.documentElement.lang || 'en'; + const messages = { + en: { sending: 'Sending...', success: 'Message sent successfully!', error: 'Failed to send. Please try again.' }, + zh: { sending: '发送中...', success: '消息已成功发送！', error: '发送失败，请稍后再试。' }, + ja: { sending: '送信中...', success: '送信が完了しました！', error: '送信に失敗しました。' }, + ko: { sending: '전송 중...', success: '메시지가 성공적으로 전송되었습니다!', error: '전송 실패. 다시 시도하십시오.' }, + de: { sending: 'Senden...', success: 'Nachricht erfolgreich gesendet!', error: 'Fehler beim Senden.' }, + fr: { sending: 'Envoi...', success: 'Message envoyé avec succès !', error: 'Échec de l\'envoi.' }, + es: { sending: 'Enviando...', success: '¡Mensaje enviado con éxito!', error: 'Error al enviar.' }, + ar: { sending: 'جاري الإرسال...', success: 'تم إرسال الرسالة بنجاح!', error: 'فشل الإرسال. يرجى المحاولة مرة أخرى.' } + }; + const msg = messages[htmlLang] || messages['en']; + 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; + const submitBtn = contactForm.querySelector('.btn-submit'); + const originalBtnContent = submitBtn.innerHTML; submitBtn.disabled = true; - submitBtn.innerHTML = ' 发送中...'; + submitBtn.innerHTML = `${msg.sending} `; try { const response = await fetch('contact.php', { @@ -116,21 +100,22 @@ document.addEventListener('DOMContentLoaded', () => { const result = await response.json(); if (result.success) { - showToast('消息已成功发送！我会尽快给您回复。'); + showToast(msg.success); contactForm.reset(); } else { - showToast('发送失败: ' + (result.error || '请稍后再试')); + showToast(msg.error + ' ' + (result.error || '')); } } catch (error) { - showToast('无法连接到服务器，请检查网络。'); + showToast(msg.error); } finally { submitBtn.disabled = false; - submitBtn.innerHTML = originalBtnText; + submitBtn.innerHTML = originalBtnContent; } }); } function showToast(message) { + if (!toast) return; toast.innerText = message; toast.style.display = 'block'; toast.style.animation = 'slideInUp 0.5s ease forwards'; @@ -146,46 +131,38 @@ document.addEventListener('DOMContentLoaded', () => { // Smooth scroll for nav links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { - e.preventDefault(); - - // 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'); - } - - const target = document.querySelector(this.getAttribute('href')); - if (target) { - const offset = 80; - 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' - }); + if (this.hash !== "") { + e.preventDefault(); + const target = document.querySelector(this.hash); + if (target) { + if (navLinks && navLinks.classList.contains('active')) { + navLinks.classList.remove('active'); + const icon = mobileMenuToggle.querySelector('i'); + icon.classList.replace('fa-times', 'fa-bars'); + } + window.scrollTo({ + top: target.offsetTop - 80, + behavior: 'smooth' + }); + } } }); }); }); -// Animation styles -const style = document.createElement('style'); -style.textContent = ` +const animStyle = document.createElement('style'); +animStyle.textContent = " @keyframes fadeIn { - from { opacity: 0; transform: translateY(20px); } + from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInUp { - from { transform: translateY(100%); opacity: 0; } + from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideOutDown { - from { transform: translateY(0); opacity: 1; } + from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } } -`; -document.head.appendChild(style); +"; +document.head.appendChild(animStyle); \ No newline at end of file diff --git a/assets/logo.svg b/assets/logo.svg index 06ebd82..2c7c96a 100644 --- a/assets/logo.svg +++ b/assets/logo.svg @@ -1,15 +1,29 @@ - - - + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + + + + \ No newline at end of file diff --git a/db/init.php b/db/init.php index ab9e226..a1fe070 100644 --- a/db/init.php +++ b/db/init.php @@ -3,15 +3,100 @@ require_once __DIR__ . '/config.php'; try { $pdo = db(); + + // Contact requests table $sql = "CREATE TABLE IF NOT EXISTS contact_requests ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL, + type VARCHAR(50) DEFAULT NULL, message TEXT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;"; - $pdo->exec($sql); + + // Projects table for rich content + $sql = "CREATE TABLE IF NOT EXISTS projects ( + id INT AUTO_INCREMENT PRIMARY KEY, + title VARCHAR(255) NOT NULL, + slug VARCHAR(255) NOT NULL UNIQUE, + category VARCHAR(100) NOT NULL, + short_description TEXT NOT NULL, + full_content LONGTEXT NOT NULL, + image_url VARCHAR(255) NOT NULL, + client_name VARCHAR(255) DEFAULT NULL, + project_date VARCHAR(50) DEFAULT NULL, + tech_stack TEXT DEFAULT NULL, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP + ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;"; + $pdo->exec($sql); + + // Clear existing projects to ensure we have exactly what we want + $pdo->exec("TRUNCATE TABLE projects"); + + $categories = ['fintech', 'web', 'app']; + $images = [ + 'fintech' => [ + 'https://images.pexels.com/photos/6770610/pexels-photo-6770610.jpeg', + 'https://images.pexels.com/photos/6801874/pexels-photo-6801874.jpeg', + 'https://images.pexels.com/photos/7567443/pexels-photo-7567443.jpeg', + 'https://images.pexels.com/photos/8370752/pexels-photo-8370752.jpeg', + 'https://images.pexels.com/photos/6771664/pexels-photo-6771664.jpeg' + ], + 'web' => [ + 'https://images.pexels.com/photos/251225/pexels-photo-251225.jpeg', + 'https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg', + 'https://images.pexels.com/photos/326503/pexels-photo-326503.jpeg', + 'https://images.pexels.com/photos/1092644/pexels-photo-1092644.jpeg', + 'https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg' + ], + 'app' => [ + 'https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg', + 'https://images.pexels.com/photos/1181671/pexels-photo-1181671.jpeg', + 'https://images.pexels.com/photos/1181263/pexels-photo-1181263.jpeg', + 'https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg', + 'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg' + ] + ]; + + $titles = [ + 'fintech' => [ + 'Global Payments Gateway', 'Crypto Asset Manager', 'Algo Trading Terminal', 'Risk Assessment Engine', + 'DeFi Liquidity Pool', 'Real-time Clearing House', 'Credit Scoring AI', 'Wealth Management Hub', + 'Mobile Banking Core', 'Institutional Trading API' + ], + 'web' => [ + 'Luxury Real Estate Portal', 'High-end Fashion Boutique', 'Architectural Showcase', 'Global Consulting Landing', + 'Art Gallery Digital Experience', 'Premium Car Configurator', 'Exclusive Travel Concierge', 'Modern Media Platform', + 'Corporate Governance Site', 'Creative Portfolio Engine' + ], + 'app' => [ + 'Supply Chain ERP', 'Telemedicine Platform', 'Smart City Dashboard', 'Enterprise HR Portal', + 'IoT Monitoring System', 'Cloud Infrastructure Manager', 'Retail Logistics App', 'AI Customer Service Hub', + 'Project Management Suite', 'Real-time Collaboration Tool' + ] + ]; + + $stmt = $pdo->prepare("INSERT INTO projects (title, slug, category, short_description, full_content, image_url, client_name, project_date, tech_stack) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)"); + + for ($i = 1; $i <= 30; $i++) { + $cat = $categories[($i - 1) % 3]; + $titleIndex = floor(($i - 1) / 3); + $title = $titles[$cat][$titleIndex]; + $slug = strtolower(str_replace(' ', '-', $title)) . '-' . $i; + $desc = "Advanced $cat solution designed for high-performance and scalability in the modern digital landscape."; + $content = "

Overview

This project represents a milestone in $cat development, focusing on delivering exceptional value through technical excellence.

Key Features

  • High availability architecture
  • Secure data processing
  • Seamless third-party integrations
  • Intuitive user experience
"; + $img = $images[$cat][rand(0, 4)]; + $client = "Global " . ucfirst($cat) . " Corp"; + $date = "2023." . str_pad((string)rand(1, 12), 2, '0', STR_PAD_LEFT); + $stack = "PHP, React, Cloud, SQL"; + + $stmt->execute([$title, $slug, $cat, $desc, $content, $img, $client, $date, $stack]); + } + + echo "Successfully seeded 30 projects."; + } catch (PDOException $e) { error_log("Database initialization error: " . $e->getMessage()); -} + echo "Error: " . $e->getMessage(); +} \ No newline at end of file diff --git a/includes/i18n.php b/includes/i18n.php new file mode 100644 index 0000000..1907919 --- /dev/null +++ b/includes/i18n.php @@ -0,0 +1,332 @@ + ['name' => 'English', 'flag' => '🇺🇸'], + 'zh' => ['name' => '简体中文', 'flag' => '🇨🇳'], + 'ja' => ['name' => '日本語', 'flag' => '🇯🇵'], + 'ko' => ['name' => '한국어', 'flag' => '🇰🇷'], + 'de' => ['name' => 'Deutsch', 'flag' => '🇩🇪'], + 'fr' => ['name' => 'Français', 'flag' => '🇫🇷'], + 'es' => ['name' => 'Español', 'flag' => '🇪🇸'], + 'ar' => ['name' => 'العربية', 'flag' => '🇸🇦'] +]; + +$default_lang = 'en'; + +if (isset($_GET['lang']) && array_key_exists($_GET['lang'], $languages)) { + $_SESSION['lang'] = $_GET['lang']; + setcookie('lang', $_GET['lang'], time() + (86400 * 30), "/"); +} + +$lang = $_SESSION['lang'] ?? $_COOKIE['lang'] ?? $default_lang; + +$translations = [ + 'en' => [ + 'nav_home' => 'Home', + 'nav_services' => 'Services', + 'nav_portfolio' => 'Portfolio', + 'nav_about' => 'About', + 'nav_process' => 'Process', + 'nav_testimonials' => 'Clients', + 'nav_contact' => 'Consult Now', + 'hero_badge_1' => 'FINTECH EXPERT', + 'hero_title_1' => 'Defining the Future of Fintech', + 'hero_desc_1' => 'Combining deep industry insights with cutting-edge development to build a robust, efficient, and scalable digital foundation for your business.', + 'hero_btn_consult' => 'Expert Consultation', + 'hero_btn_explore' => 'Explore Cases', + 'stats_years' => 'Years Experience', + 'stats_cases' => 'Successful Cases', + 'stats_trust' => 'Client Trust', + 'stats_load' => 'System Capacity', + 'services_title' => 'Full-Stack Ecosystem', + 'services_subtitle' => 'One-stop technical solutions from consulting to maintenance.', + 'portfolio_title' => 'Featured Projects', + 'portfolio_subtitle' => 'Explore how we transform complex requirements into elegant solutions.', + 'filter_all' => 'All Works', + 'filter_fintech' => 'Fintech', + 'filter_web' => 'Brand Web', + 'filter_app' => 'App Systems', + 'about_subtitle' => 'ABOUT ME', + 'about_title' => 'Full-Stack Vision, Empowering Business Growth', + 'contact_title' => 'Customize Your Digital Future', + 'contact_form_title' => 'Project Inquiry', + 'form_name' => 'Your Name', + 'form_contact' => 'Contact Info (Email/TG)', + 'form_type' => 'Inquiry Type', + 'form_message' => 'Brief Requirements', + 'form_submit' => 'Submit Inquiry', + 'footer_desc' => 'Building extraordinary value with exquisite code. Global technology expert portal.', + 'view_details' => 'View Details' + ], + 'zh' => [ + 'nav_home' => '首页', + 'nav_services' => '核心服务', + 'nav_portfolio' => '精选案例', + 'nav_about' => '关于我', + 'nav_process' => '合作流程', + 'nav_testimonials' => '客户评价', + 'nav_contact' => '立即咨询', + 'hero_badge_1' => '金融科技专家', + 'hero_title_1' => '定义金融科技的新高度', + 'hero_desc_1' => '融合深厚行业洞察与前沿开发技术，为您的业务构建稳健、高效、可扩展的数字化基石。', + 'hero_btn_consult' => '开启专家咨询', + 'hero_btn_explore' => '探索精选案例', + 'stats_years' => '行业深耕 (年)', + 'stats_cases' => '卓越交付案例', + 'stats_trust' => '客户长期信赖', + 'stats_load' => '系统负载能力', + 'services_title' => '全链路技术生态', + 'services_subtitle' => '提供从咨询设计、研发交付到安全运维的一站式技术闭环方案。', + 'portfolio_title' => '精选项目案例', + 'portfolio_subtitle' => '探索我们如何将复杂的需求转化为简洁、高效且美观的技术方案。', + 'filter_all' => '全部作品', + 'filter_fintech' => '金融科技', + 'filter_web' => '品牌网页', + 'filter_app' => '应用系统', + 'about_subtitle' => '关于我', + 'about_title' => '全栈视野，深度赋能业务增长', + 'contact_title' => '定制您的数字化未来', + 'contact_form_title' => '项目咨询表', + 'form_name' => '您的称呼', + 'form_contact' => '联系方式 (Email/微信/TG)', + 'form_type' => '咨询类型', + 'form_message' => '需求简述', + 'form_submit' => '提交咨询申请', + 'footer_desc' => '用极致的代码构建非凡的价值。专注于金融科技与高端全栈开发的全球化技术专家门户。', + 'view_details' => '深入探索' + ], + 'ja' => [ + 'nav_home' => 'ホーム', + 'nav_services' => 'サービス', + 'nav_portfolio' => 'ポートフォリオ', + 'nav_about' => '私について', + 'nav_process' => 'プロセス', + 'nav_testimonials' => 'お客様の声', + 'nav_contact' => '今すぐ相談', + 'hero_badge_1' => 'フィンテック専門家', + 'hero_title_1' => 'フィンテックの未来を定義する', + 'hero_desc_1' => '深い業界の洞察と最先端の開発を組み合わせ、ビジネスのための堅牢で効率的なデジタル基盤を構築します。', + 'hero_btn_consult' => '専門家に相談', + 'hero_btn_explore' => '事例を見る', + 'stats_years' => '経験年数', + 'stats_cases' => '成功事例', + 'stats_trust' => '顧客の信頼', + 'stats_load' => 'システム容量', + 'services_title' => 'フルスタックエコシステム', + 'services_subtitle' => 'コンサルティングからメンテナンスまでのワンストップソリューション。', + 'portfolio_title' => '注目のプロジェクト', + 'portfolio_subtitle' => '複雑な要件をいかにエレガントなソリューションに変えるかをご覧ください。', + 'filter_all' => 'すべて', + 'filter_fintech' => 'フィンテック', + 'filter_web' => 'ブランドウェブ', + 'filter_app' => 'アプリシステム', + 'about_subtitle' => '私について', + 'about_title' => 'フルスタックのビジョンでビジネスの成長を支援', + 'contact_title' => 'あなたのデジタルの未来をカスタマイズ', + 'contact_form_title' => 'プロジェクトのお問い合わせ', + 'form_name' => 'お名前', + 'form_contact' => '連絡先 (Email/TG)', + 'form_type' => 'お問い合わせの種類', + 'form_message' => '要件の概要', + 'form_submit' => 'お問い合わせを送信', + 'footer_desc' => '洗練されたコードで並外れた価値を創造。グローバル技術専門家ポータル。', + 'view_details' => '詳細を見る' + ], + 'ko' => [ + 'nav_home' => '홈', + 'nav_services' => '서비스', + 'nav_portfolio' => '포트폴리오', + 'nav_about' => '자기소개', + 'nav_process' => '프로세스', + 'nav_testimonials' => '고객 후기', + 'nav_contact' => '지금 상담하기', + 'hero_badge_1' => '핀테크 전문가', + 'hero_title_1' => '핀테크의 미래를 정의하다', + 'hero_desc_1' => '심도 있는 산업 통찰력과 최첨단 개발 기술을 결합하여 비즈니스를 위한 강력하고 효율적인 디지털 기반을 구축합니다.', + 'hero_btn_consult' => '전문가 상담', + 'hero_btn_explore' => '사례 탐색', + 'stats_years' => '경력 연수', + 'stats_cases' => '성공적인 사례', + 'stats_trust' => '고객 신뢰', + 'stats_load' => '시스템 용량', + 'services_title' => '풀스택 생태계', + 'services_subtitle' => '컨설팅부터 유지보수까지 원스톱 기술 솔루션 제공.', + 'portfolio_title' => '주요 프로젝트', + 'portfolio_subtitle' => '복잡한 요구 사항을 우아한 솔루션으로 전환하는 방법을 확인하세요.', + 'filter_all' => '전체 보기', + 'filter_fintech' => '핀테크', + 'filter_web' => '브랜드 웹', + 'filter_app' => '앱 시스템', + 'about_subtitle' => '자기소개', + 'about_title' => '풀스택 비전, 비즈니스 성장 강화', + 'contact_title' => '귀하의 디지털 미래를 맞춤화하십시오', + 'contact_form_title' => '프로젝트 문의', + 'form_name' => '성함', + 'form_contact' => '연락처 (Email/TG)', + 'form_type' => '문의 유형', + 'form_message' => '요구 사항 요약', + 'form_submit' => '문의 제출', + 'footer_desc' => '정교한 코드로 탁월한 가치를 창출합니다. 글로벌 기술 전문가 포털.', + 'view_details' => '자세히 보기' + ], + 'de' => [ + 'nav_home' => 'Startseite', + 'nav_services' => 'Dienstleistungen', + 'nav_portfolio' => 'Portfolio', + 'nav_about' => 'Über mich', + 'nav_process' => 'Prozess', + 'nav_testimonials' => 'Kunden', + 'nav_contact' => 'Jetzt beraten', + 'hero_badge_1' => 'FINTECH EXPERTE', + 'hero_title_1' => 'Die Zukunft von Fintech definieren', + 'hero_desc_1' => 'Kombination aus tiefen Brancheneinblicken und modernster Entwicklung für ein robustes digitales Fundament.', + 'hero_btn_consult' => 'Expertenberatung', + 'hero_btn_explore' => 'Projekte entdecken', + 'stats_years' => 'Jahre Erfahrung', + 'stats_cases' => 'Erfolgreiche Projekte', + 'stats_trust' => 'Kundenvertrauen', + 'stats_load' => 'Systemkapazität', + 'services_title' => 'Full-Stack Ökosystem', + 'services_subtitle' => 'Technische Komplettlösungen von der Beratung bis zur Wartung.', + 'portfolio_title' => 'Ausgewählte Projekte', + 'portfolio_subtitle' => 'Wie wir komplexe Anforderungen in elegante Lösungen verwandeln.', + 'filter_all' => 'Alle Werke', + 'filter_fintech' => 'Fintech', + 'filter_web' => 'Marken-Web', + 'filter_app' => 'App-Systeme', + 'about_subtitle' => 'ÜBER MICH', + 'about_title' => 'Full-Stack Vision für Geschäftswachstum', + 'contact_title' => 'Gestalten Sie Ihre digitale Zukunft', + 'contact_form_title' => 'Projektanfrage', + 'form_name' => 'Ihr Name', + 'form_contact' => 'Kontakt (E-Mail/TG)', + 'form_type' => 'Anfragetyp', + 'form_message' => 'Kurze Beschreibung', + 'form_submit' => 'Anfrage senden', + 'footer_desc' => 'Außergewöhnliche Werte durch exquisiten Code schaffen. Globales Expertenportal.', + 'view_details' => 'Details anzeigen' + ], + 'fr' => [ + 'nav_home' => 'Accueil', + 'nav_services' => 'Services', + 'nav_portfolio' => 'Portfolio', + 'nav_about' => 'À propos', + 'nav_process' => 'Processus', + 'nav_testimonials' => 'Clients', + 'nav_contact' => 'Consulter', + 'hero_badge_1' => 'EXPERT FINTECH', + 'hero_title_1' => 'Définir l\'avenir de la Fintech', + 'hero_desc_1' => 'Allier expertise sectorielle et développement de pointe pour bâtir des fondations digitales robustes.', + 'hero_btn_consult' => 'Consultation d\'expert', + 'hero_btn_explore' => 'Explorer les cas', + 'stats_years' => 'Années d\'expérience', + 'stats_cases' => 'Cas réussis', + 'stats_trust' => 'Confiance client', + 'stats_load' => 'Capacité système', + 'services_title' => 'Écosystème Full-Stack', + 'services_subtitle' => 'Solutions techniques de bout en bout, du conseil à la maintenance.', + 'portfolio_title' => 'Projets vedettes', + 'portfolio_subtitle' => 'Découvrez comment nous transformons des besoins complexes en solutions élégantes.', + 'filter_all' => 'Tous les travaux', + 'filter_fintech' => 'Fintech', + 'filter_web' => 'Web de marque', + 'filter_app' => 'Systèmes App', + 'about_subtitle' => 'À PROPOS', + 'about_title' => 'Vision Full-Stack pour la croissance des entreprises', + 'contact_title' => 'Personnalisez votre avenir numérique', + 'contact_form_title' => 'Demande de projet', + 'form_name' => 'Votre nom', + 'form_contact' => 'Contact (Email/TG)', + 'form_type' => 'Type de demande', + 'form_message' => 'Brève description', + 'form_submit' => 'Envoyer la demande', + 'footer_desc' => 'Créer une valeur extraordinaire avec un code exquis. Portail d\'experts mondiaux.', + 'view_details' => 'Voir les détails' + ], + 'es' => [ + 'nav_home' => 'Inicio', + 'nav_services' => 'Servicios', + 'nav_portfolio' => 'Portafolio', + 'nav_about' => 'Sobre mí', + 'nav_process' => 'Proceso', + 'nav_testimonials' => 'Clientes', + 'nav_contact' => 'Consultar ahora', + 'hero_badge_1' => 'EXPERTO FINTECH', + 'hero_title_1' => 'Definiendo el futuro de Fintech', + 'hero_desc_1' => 'Combinando visión industrial con desarrollo de vanguardia para bases digitales sólidas.', + 'hero_btn_consult' => 'Consulta experta', + 'hero_btn_explore' => 'Explorar casos', + 'stats_years' => 'Años de experiencia', + 'stats_cases' => 'Casos exitosos', + 'stats_trust' => 'Confianza del cliente', + 'stats_load' => 'Capacidad del sistema', + 'services_title' => 'Ecosistema Full-Stack', + 'services_subtitle' => 'Soluciones técnicas integrales desde consultoría hasta mantenimiento.', + 'portfolio_title' => 'Proyectos destacados', + 'portfolio_subtitle' => 'Vea cómo transformamos requisitos complejos en soluciones elegantes.', + 'filter_all' => 'Todos los trabajos', + 'filter_fintech' => 'Fintech', + 'filter_web' => 'Web de marca', + 'filter_app' => 'Sistemas App', + 'about_subtitle' => 'SOBRE MÍ', + 'about_title' => 'Visión Full-Stack para el crecimiento empresarial', + 'contact_title' => 'Personalice su futuro digital', + 'contact_form_title' => 'Consulta de proyecto', + 'form_name' => 'Su nombre', + 'form_contact' => 'Contacto (Email/TG)', + 'form_type' => 'Tipo de consulta', + 'form_message' => 'Breve descripción', + 'form_submit' => 'Enviar consulta', + 'footer_desc' => 'Creando un valor extraordinario con un código exquisito. Portal de expertos globales.', + 'view_details' => 'Ver detalles' + ], + 'ar' => [ + 'nav_home' => 'الرئيسية', + 'nav_services' => 'الخدمات', + 'nav_portfolio' => 'الأعمال', + 'nav_about' => 'عني', + 'nav_process' => 'العملية', + 'nav_testimonials' => 'العملاء', + 'nav_contact' => 'استشر الآن', + 'hero_badge_1' => 'خبير فينتاك', + 'hero_title_1' => 'تحديد مستقبل التكنولوجيا المالية', + 'hero_desc_1' => 'الجمع بين رؤى الصناعة والتطوير المتطور لبناء أساس رقمي قوي وفعال.', + 'hero_btn_consult' => 'استشارة خبير', + 'hero_btn_explore' => 'استكشاف الحالات', + 'stats_years' => 'سنوات الخبرة', + 'stats_cases' => 'حالات ناجحة', + 'stats_trust' => 'ثقة العملاء', + 'stats_load' => 'سعة النظام', + 'services_title' => 'منظومة التطوير الشامل', + 'services_subtitle' => 'حلول تقنية متكاملة من الاستشارة إلى الصيانة.', + 'portfolio_title' => 'المشاريع المختارة', + 'portfolio_subtitle' => 'اكتشف كيف نحول المتطلبات المعقدة إلى حلول أنيقة.', + 'filter_all' => 'كل الأعمال', + 'filter_fintech' => 'فينتاك', + 'filter_web' => 'مواقع الماركات', + 'filter_app' => 'أنظمة التطبيقات', + 'about_subtitle' => 'عني', + 'about_title' => 'رؤية شاملة لتمكين نمو الأعمال', + 'contact_title' => 'خصص مستقبلك الرقمي', + 'contact_form_title' => 'طلب مشروع', + 'form_name' => 'اسمك', + 'form_contact' => 'معلومات التواصل (إيميل/تليجرام)', + 'form_type' => 'نوع الطلب', + 'form_message' => 'وصف المتطلبات', + 'form_submit' => 'إرسال الطلب', + 'footer_desc' => 'بناء قيمة استثنائية بكود رائع. بوابة خبراء التكنولوجيا العالمية.', + 'view_details' => 'عرض التفاصيل' + ] +]; + +function t($key) { + global $translations, $lang; + return $translations[$lang][$key] ?? $translations['en'][$key] ?? $key; +} + +function get_current_lang_info() { + global $languages, $lang; + return $languages[$lang]; +} + diff --git a/index.php b/index.php index 30823ee..2b7bbea 100644 --- a/index.php +++ b/index.php @@ -1,18 +1,27 @@ query("SELECT * FROM projects ORDER BY id DESC")->fetchAll(); + +$currentLang = get_current_lang_info(); ?> - + - <?= htmlspecialchars($projectName) ?> | 金融科技与全栈开发专家 | 全球化技术咨询 + <?= htmlspecialchars($projectName) ?> | <?= t('hero_badge_1') ?> @@ -27,13 +36,20 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ''; - + + @@ -41,17 +57,32 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';