bender/11be3316-e125-4ff6-85ed-2ced107e0b84
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-03 09:49:17 +00:00
parent 6213a4418c
commit e057848138
1 changed files with 100 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/app/page.tsx
View File

@@ -8,13 +8,17 @@ import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBase from "@/components/sections/footer/FooterBase";
import TeamCardSix from "@/components/sections/team/TeamCardSix";
import Link from "next/link";
import { Zap, Heart, Rocket, Lightbulb, Star, TrendingUp, Workflow, MessageCircle, Users } from "lucide-react";
import { Zap, Heart, Rocket, Lightbulb, Star, TrendingUp, Workflow, MessageCircle, Mail, Users } from "lucide-react";
import { useState } from "react";
export default function HomePage() {
const [bookingFormData, setBookingFormData] = useState({
email: "", fullName: "", phoneNumber: ""});
const navItems = [
{ name: "Home", id: "/" },
{ name: "Services", id: "/services" },
@@ -23,16 +27,11 @@ export default function HomePage() {
{ name: "Contact", id: "/contact" },
];
const teamMembers = [
{
id: "1", name: "You", role: "Founder", imageSrc: "https://via.placeholder.com/400x400?text=Your+Photo", imageAlt: "Your professional photo"},
{
id: "2", name: "Team Member 1", role: "Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-confident-fem-1772527369324-28809a03.png?_wi=1", imageAlt: "Designer"},
{
id: "3", name: "Team Member 2", role: "Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-confident-mal-1772527369460-6104c452.png?_wi=1", imageAlt: "Developer"},
{
id: "4", name: "Team Member 3", role: "Project Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-young-female--1772527369938-37ff44ff.png?_wi=1", imageAlt: "Project Manager"},
];
const handleBookingSubmit = (e: React.FormEvent) => {
e.preventDefault();
console.log("Booking submitted:", bookingFormData);
setBookingFormData({ email: "", fullName: "", phoneNumber: "" });
};
return (
<ThemeProvider
@@ -99,11 +98,11 @@ export default function HomePage() {
<MetricCardEleven
metrics={[
{
id: "1", value: "150+", title: "Projects Delivered", description: "Successfully completed for diverse industries", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/colorful-collection-of-client-logos-from-1772527371290-2f19a564.png?_wi=1", imageAlt: "Client logos collection"},
id: "1", value: "150+", title: "Projects Delivered", description: "Successfully completed for diverse industries", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/colorful-collection-of-client-logos-from-1772527371290-2f19a564.png?_wi=1", imageAlt: "Client logos collection"
},
{
id: "2", value: "95%", title: "Client Satisfaction", description: "Consistently exceeding expectations", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/colorful-collection-of-client-logos-from-1772527371290-2f19a564.png?_wi=2", imageAlt: "Client testimonials"},
{
id: "3", value: "5 Years", title: "Industry Experience", description: "Building digital excellence since 2019", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/colorful-collection-of-client-logos-from-1772527371290-2f19a564.png?_wi=3", imageAlt: "Experience badge"},
id: "2", value: "95%", title: "Client Satisfaction", description: "Consistently exceeding expectations", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/colorful-collection-of-client-logos-from-1772527371290-2f19a564.png?_wi=2", imageAlt: "Client testimonials"
}
]}
title="Our Impact"
description="Proven results and client success stories that speak for themselves"
@@ -116,73 +115,25 @@ export default function HomePage() {
/>
</div>
<div id="team" data-section="team">
<TeamCardOne
members={teamMembers}
title="Meet Our Team"
description="Meet the talented professionals behind Pulse Digital who bring your vision to life"
tag="Our Team"
tagIcon={Users}
tagAnimation="slide-up"
animationType="slide-up"
gridVariant="four-items-2x2-equal-grid"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="capabilities" data-section="capabilities">
<FeatureCardNine
title="Our Capabilities"
description="Comprehensive digital solutions tailored to transform your business"
tag="What We Deliver"
tagIcon={Lightbulb}
tagAnimation="slide-up"
features={[
{
id: 1,
title: "Web Design & UX", description: "Stunning, user-centric website designs that captivate your audience and drive engagement. We blend aesthetics with functionality to create digital experiences that stand out.", phoneOne: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/abstract-representation-of-web-design-pr-1772527372333-1ad2600f.png?_wi=1", imageAlt: "Web design process"},
phoneTwo: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/branding-identity-elements-spread-out-in-1772527370942-4bda01ed.png?_wi=1", imageAlt: "Branding elements"},
},
{
id: 2,
title: "Development & Performance", description: "Robust, scalable websites built with modern technologies. From responsive design to seamless backend integration, we ensure your website performs flawlessly across all devices.", phoneOne: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/code-editor-on-screen-displaying-clean-o-1772527370169-57931e12.png?_wi=1", imageAlt: "Development code"},
phoneTwo: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/abstract-representation-of-web-design-pr-1772527372333-1ad2600f.png?_wi=2", imageAlt: "Design implementation"},
},
{
id: 3,
title: "Strategy & Innovation", description: "Strategic solutions that establish your unique market position and drive results. We combine creative thinking with data-driven insights to deliver measurable impact.", phoneOne: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/branding-identity-elements-spread-out-in-1772527370942-4bda01ed.png?_wi=2", imageAlt: "Brand guidelines"},
phoneTwo: {
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/code-editor-on-screen-displaying-clean-o-1772527370169-57931e12.png?_wi=2", imageAlt: "Strategy implementation"},
},
]}
showStepNumbers={true}
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
testimonials={[
{
id: "1", name: "Sarah Mitchell", handle: "@sarahmitchell", testimonial: "Pulse Digital transformed our online presence. The website they built not only looks stunning but has increased our sales by 40%. Highly recommend!", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-confident-fem-1772527369324-28809a03.png?_wi=2", imageAlt: "Sarah Mitchell, CEO"},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-confident-fem-1772527369324-28809a03.png", imageAlt: "Sarah Mitchell, CEO"
},
{
id: "2", name: "James Chen", handle: "@jameschen", testimonial: "Working with Pulse Digital was seamless. They understood our vision, delivered on time, and provided excellent support throughout the project.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-confident-mal-1772527369460-6104c452.png?_wi=2", imageAlt: "James Chen, Founder"},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-confident-mal-1772527369460-6104c452.png", imageAlt: "James Chen, Founder"
},
{
id: "3", name: "Emily Rodriguez", handle: "@emilyrodriguez", testimonial: "The team at Pulse Digital is incredibly talented and professional. They took our outdated website and created something truly exceptional.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-young-female--1772527369938-37ff44ff.png?_wi=2", imageAlt: "Emily Rodriguez, Marketing Director"},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-young-female--1772527369938-37ff44ff.png", imageAlt: "Emily Rodriguez, Marketing Director"
},
{
id: "4", name: "David Park", handle: "@davidpark", testimonial: "From initial consultation to launch, Pulse Digital was exceptional. Our new website has become a powerful business tool.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-confident-mal-1772527370017-a9558657.png", imageAlt: "David Park, Business Owner"},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-confident-mal-1772527370017-a9558657.png", imageAlt: "David Park, Business Owner"
}
]}
showRating={true}
title="What Clients Say"
@@ -196,6 +147,83 @@ export default function HomePage() {
/>
</div>
<div id="team" data-section="team">
<TeamCardSix
members={[
{
id: "1", name: "Lucas Pereira", role: "Lead Designer & Strategy", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQaMoBX7jFwK0QlMohZLIPqdAi/professional-headshot-of-a-confident-mal-1772527369460-6104c452.png", imageAlt: "Lucas Pereira"
}
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
title="Meet Our Team"
description="The talented people behind our success"
textboxLayout="default"
useInvertedBackground={false}
tag="Team"
tagIcon={Users}
/>
</div>
<div id="booking" data-section="booking" className="py-20 bg-gradient-to-b from-background to-card">
<div className="container mx-auto px-4 max-w-2xl">
<div className="text-center mb-12">
<h2 className="text-4xl font-bold text-foreground mb-4">Schedule a Consultation</h2>
<p className="text-lg text-foreground/80">Book a meeting with our team to discuss your project</p>
</div>
<form onSubmit={handleBookingSubmit} className="bg-card rounded-lg p-8 shadow-lg border border-accent/20">
<div className="mb-6">
<label htmlFor="fullName" className="block text-sm font-medium text-foreground mb-2">
Full Name *
</label>
<input
type="text"
id="fullName"
required
value={bookingFormData.fullName}
onChange={(e) => setBookingFormData({ ...bookingFormData, fullName: e.target.value })}
placeholder="Your full name"
className="w-full px-4 py-2 rounded-lg bg-background text-foreground border border-accent/30 focus:border-primary-cta focus:outline-none"
/>
</div>
<div className="mb-6">
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
Email Address *
</label>
<input
type="email"
id="email"
required
value={bookingFormData.email}
onChange={(e) => setBookingFormData({ ...bookingFormData, email: e.target.value })}
placeholder="your.email@example.com"
className="w-full px-4 py-2 rounded-lg bg-background text-foreground border border-accent/30 focus:border-primary-cta focus:outline-none"
/>
</div>
<div className="mb-6">
<label htmlFor="phoneNumber" className="block text-sm font-medium text-foreground mb-2">
Phone Number *
</label>
<input
type="tel"
id="phoneNumber"
required
value={bookingFormData.phoneNumber}
onChange={(e) => setBookingFormData({ ...bookingFormData, phoneNumber: e.target.value })}
placeholder="+1 (555) 000-0000"
className="w-full px-4 py-2 rounded-lg bg-background text-foreground border border-accent/30 focus:border-primary-cta focus:outline-none"
/>
</div>
<button
type="submit"
className="w-full bg-primary-cta text-primary-cta-text font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
>
Schedule Consultation
</button>
</form>
</div>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to bring your digital vision to life? Let's work together to create something extraordinary."