251 lines
16 KiB
TypeScript
251 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Award, CheckCircle, Mail, Rocket, Shield, Sparkles, Star, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="blurBottom"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Experience", id: "experience" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="EasySite PH"
|
|
bottomLeftText="Based in Philippines"
|
|
bottomRightText="hello@easysite.ph"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Build Your Digital Presence with EasySite PH"
|
|
description="We create stunning, high-performance websites that convert visitors into customers. From design to development, we deliver excellence every step of the way."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Web Development Excellence"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/a-modern-web-development-dashboard-inter-1772720774234-45bb7e96.png"
|
|
imageAlt="EasySite PH web development dashboard"
|
|
buttons={[
|
|
{ text: "Start Your Project", href: "contact" },
|
|
{ text: "View Our Work", href: "experience" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
avatars={[
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-headshot-of-a-confident-web-1772720771888-3024e795.png", alt: "Team member 1" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-headshot-of-a-skilled-web-d-1772720773684-10ac3991.png", alt: "Team member 2" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-headshot-of-a-project-manag-1772720771339-0be24480.png", alt: "Team member 3" },
|
|
]}
|
|
avatarText="Trusted by 50+ Philippine Businesses"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Who We Are"
|
|
description="EasySite PH is a web development agency dedicated to transforming Philippine businesses through digital innovation. With years of combined experience, we specialize in creating custom websites that drive real results."
|
|
tag="About Us"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
bulletPoints={[
|
|
{ title: "Expert Team", description: "Experienced developers and designers who understand your vision and execute flawlessly.", icon: Users },
|
|
{ title: "Custom Solutions", description: "Every website is tailor-made for your business needs, never cookie-cutter templates.", icon: Zap },
|
|
{ title: "Performance Focused", description: "Fast, secure, and optimized websites that rank well and convert visitors to customers.", icon: Rocket },
|
|
{ title: "Ongoing Support", description: "We don't just launch your site—we maintain, update, and optimize it for continued success.", icon: Shield },
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/a-professional-web-designer-working-at-a-1772720771968-7faa372a.png?_wi=1"
|
|
imageAlt="Our web development team working on projects"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Learn More", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNineteen
|
|
title="Our Services"
|
|
description="Comprehensive web solutions designed to elevate your business and achieve your goals"
|
|
tag="What We Offer"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Design", title: "Web Design", subtitle: "Beautiful, User-Focused Design", description: "We create visually stunning websites that not only look amazing but provide exceptional user experiences. Our designs are responsive, modern, and aligned with your brand identity to attract and engage your target audience.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/a-professional-web-designer-working-at-a-1772720771968-7faa372a.png?_wi=2", imageAlt: "Web design services", buttons: [{ text: "Learn More", href: "#" }],
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Development", title: "Web Development", subtitle: "Powerful, Scalable Development", description: "From PHP and JavaScript to modern frameworks, we build robust websites that perform flawlessly. Our development approach ensures your site is fast, secure, and scalable as your business grows.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/a-developer-at-a-workspace-with-code-on--1772720773740-468c0fba.png", imageAlt: "Web development services", buttons: [{ text: "Learn More", href: "#" }],
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Optimization", title: "SEO & Performance", subtitle: "Visibility & Speed Optimization", description: "We optimize your website for search engines and user experience. Our SEO strategies and performance tuning ensure your site ranks high, loads quickly, and converts visitors into customers.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/a-digital-marketer-analyzing-seo-metrics-1772720773793-d86c92b4.png", imageAlt: "SEO and performance optimization", buttons: [{ text: "Learn More", href: "#" }],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="experience" data-section="experience">
|
|
<ProductCardFour
|
|
title="Our Experience"
|
|
description="Showcase of successful projects we've delivered for Philippine businesses"
|
|
tag="Portfolio"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", name: "E-Commerce Platform Redesign", price: "100% Complete", variant: "PHP + React", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/a-sleek-modern-website-homepage-for-an-e-1772720773980-dcb8426d.png", imageAlt: "E-commerce website project"},
|
|
{
|
|
id: "2", name: "Corporate Website Development", price: "100% Complete", variant: "WordPress + Custom", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/a-corporate-business-website-displaying--1772720772896-ae050d4c.png", imageAlt: "Corporate website project"},
|
|
{
|
|
id: "3", name: "SaaS Platform Launch", price: "100% Complete", variant: "Next.js + Tailwind", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/a-vibrant-startup-website-showcasing-inn-1772720773343-5c7004aa.png", imageAlt: "SaaS platform project"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
buttons={[{ text: "View More Projects", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTen
|
|
title="Meet the talented minds behind EasySite PH who bring your vision to life"
|
|
tag="Our Team"
|
|
tagAnimation="slide-up"
|
|
membersAnimation="slide-up"
|
|
members={[
|
|
{
|
|
id: "1", name: "Lead Developer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-headshot-of-a-confident-web-1772720771888-3024e795.png", imageAlt: "Lead Developer"},
|
|
{
|
|
id: "2", name: "Creative Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-headshot-of-a-skilled-web-d-1772720773684-10ac3991.png", imageAlt: "Creative Designer"},
|
|
{
|
|
id: "3", name: "Project Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-headshot-of-a-project-manag-1772720771339-0be24480.png", imageAlt: "Project Manager"},
|
|
]}
|
|
memberVariant="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Companies"
|
|
description="We've had the privilege of working with some of the Philippines' most innovative and successful businesses"
|
|
tag="Our Clients"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"TechFlow Solutions", "Innovate Inc", "CloudSync Philippines", "Digital First Co", "Future Ready Tech", "Smart Business Group", "Growth Accelerators", "NextGen Enterprises"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="EasySite PH completely transformed our online presence. Their team understood our vision perfectly and delivered a website that exceeded our expectations. Our conversion rates increased by 40% within the first month!"
|
|
rating={5}
|
|
author="Maria Santos, CEO of TechFlow Solutions"
|
|
avatars={[
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-circular-headshot-of-a-happ-1772720771939-c221b43e.png", alt: "Client testimonial 1" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-circular-headshot-of-a-sati-1772720770875-5e7d76c5.png", alt: "Client testimonial 2" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-circular-headshot-of-a-happ-1772720771587-9bbcb056.png", alt: "Client testimonial 3" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-circular-headshot-of-a-sati-1772720775588-a4f2c441.png", alt: "Client testimonial 4" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-circular-headshot-of-a-conf-1772720771193-e9eb3801.png", alt: "Client testimonial 5" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AWuUaJqdNRH5aR5pbzqhE0HMby/professional-circular-headshot-of-a-happ-1772720772345-a141264b.png", alt: "Client testimonial 6" },
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does it take to build a website?", content: "Timelines vary based on project complexity and scope. A simple business website typically takes 4-8 weeks, while more complex projects may take 8-12 weeks. We'll provide a detailed timeline during our consultation."},
|
|
{
|
|
id: "2", title: "What technologies do you use?", content: "We work with a range of modern technologies including PHP, JavaScript, React, Next.js, WordPress, and more. We choose the best technology stack based on your project requirements and goals."},
|
|
{
|
|
id: "3", title: "Do you provide ongoing support?", content: "Absolutely! We offer maintenance packages, hosting support, and continuous optimization services. We're committed to ensuring your website performs well long after launch."},
|
|
{
|
|
id: "4", title: "Can you redesign my existing website?", content: "Yes, we specialize in website redesigns. We can modernize your design, improve performance, enhance user experience, and implement new features while preserving your existing content and SEO."},
|
|
{
|
|
id: "5", title: "What's your pricing structure?", content: "Our pricing is project-based and depends on scope, complexity, and features. We provide transparent quotes after understanding your requirements. We offer flexible payment terms to accommodate different budgets."},
|
|
{
|
|
id: "6", title: "Will my website be mobile-friendly?", content: "All our websites are fully responsive and mobile-optimized. We design and develop with mobile-first approach to ensure perfect experience on all devices."},
|
|
]}
|
|
sideTitle="Common Questions"
|
|
sideDescription="Everything you need to know about our services and process"
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Started"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Ready to Launch Your Next Project?"
|
|
description="Let's discuss how EasySite PH can help transform your business through exceptional web design and development. Reach out today for a free consultation."
|
|
background={{ variant: "gradient-bars" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Get Free Consultation"
|
|
termsText="We respect your privacy. Unsubscribe at any time."
|
|
onSubmit={() => {}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="EasySite PH"
|
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|