Merge version_2 into main #1

Merged
bender merged 3 commits from version_2 into main 2026-03-05 18:56:49 +00:00
3 changed files with 145 additions and 161 deletions

View File

@@ -1,12 +1,12 @@
import type { Metadata } from "next";
import { Public_Sans } from "next/font/google";
import { DM_Sans } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const publicSans = Public_Sans({
variable: "--font-public-sans", subsets: ["latin"],
const dmSans = DM_Sans({
variable: "--font-dm-sans", subsets: ["latin"],
});
const inter = Inter({
@@ -14,17 +14,17 @@ const inter = Inter({
});
export const metadata: Metadata = {
title: "DevFlow - SaaS Development Platform", description: "Build, deploy, and scale SaaS applications with modern APIs, global infrastructure, and enterprise security. Trusted by 5000+ development teams.", keywords: "SaaS development, API platform, backend infrastructure, developer tools, cloud platform, microservices", metadataBase: new URL("https://devflow.example.com"),
title: "Alex - Full Stack Developer Portfolio", description: "SaaS portfolio dashboard showcasing projects, skills, and experience for a full stack developer. Hire me to build your next project.", keywords: "full stack developer, portfolio, SaaS, projects, skills, hire developer", metadataBase: new URL("https://alex-portfolio.example.com"),
alternates: {
canonical: "https://devflow.example.com"},
canonical: "https://alex-portfolio.example.com"},
openGraph: {
title: "DevFlow - Developer Platform for SaaS", description: "Build production-grade SaaS applications with powerful APIs and global infrastructure.", url: "https://devflow.example.com", siteName: "DevFlow", type: "website", images: [
title: "Alex - Full Stack Developer Portfolio", description: "SaaS portfolio dashboard showcasing projects, skills, and experience.", url: "https://alex-portfolio.example.com", siteName: "Alex Portfolio", type: "website", images: [
{
url: "/placeholders/placeholder1.webp", alt: "DevFlow platform dashboard"},
url: "/placeholders/placeholder1.webp", alt: "Alex portfolio dashboard"},
],
},
twitter: {
card: "summary_large_image", title: "DevFlow - SaaS Development Platform", description: "Build, deploy, and scale your SaaS applications with modern APIs and enterprise infrastructure.", images: ["/placeholders/placeholder1.webp"],
card: "summary_large_image", title: "Alex - Full Stack Developer Portfolio", description: "SaaS portfolio dashboard showcasing projects, skills, and experience.", images: ["/placeholders/placeholder1.webp"],
},
robots: {
index: true,
@@ -41,7 +41,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${publicSans.variable} ${inter.variable} antialiased`}
className={`${dmSans.variable} ${inter.variable} antialiased`}
>
<Tag />
{children}

View File

@@ -9,18 +9,20 @@ import TestimonialCardFifteen from "@/components/sections/testimonial/Testimonia
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import AboutMetric from "@/components/sections/about/AboutMetric";
import {
BarChart3,
Cloud,
Briefcase,
Code,
Coffee,
Database,
DollarSign,
Lock,
Figma,
Globe,
Github,
Linkedin,
Mail,
Settings,
Shield,
Sparkles,
Users,
MessageSquare,
Moon,
Palette,
Zap,
} from "lucide-react";
@@ -28,155 +30,170 @@ const handleNewsletterSubmit = (email: string) => {
console.log("Newsletter signup:", email);
};
export default function SaaSLandingPage() {
export default function SaaSPortfolioDashboard() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="gradient-bordered"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="medium"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="DevFlow"
brandName="Alex"
navItems={[
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Docs", id: "https://docs.example.com" },
{ name: "About", id: "about" },
{ name: "Portfolio", id: "/" },
{ name: "Projects", id: "projects" },
{ name: "Skills", id: "skills" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Get Started", href: "#contact" }}
button={{ text: "Hire Me", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
title="The Developer Platform for Modern SaaS"
description="Build, deploy, and scale your SaaS applications with our comprehensive development platform. Intuitive APIs, powerful integrations, and enterprise-grade infrastructure in one place."
background={{ variant: "downward-rays-static" }}
title="Full Stack Developer & Creative Problem Solver"
description="Building scalable SaaS applications with modern technologies. Specialized in React, Node.js, and cloud infrastructure. Let's create something amazing together."
background={{ variant: "rotated-rays-static" }}
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/a-professional-headshot-of-a-diverse-dev-1772736417374-5785191a.png", alt: "Developer 1"},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/professional-headshot-of-a-tech-professi-1772736417481-1359ce54.png", alt: "Developer 2"},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/professional-portrait-of-a-software-engi-1772736416695-98d1aa72.png", alt: "Developer 3"},
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/a-professional-headshot-of-a-diverse-dev-1772736417374-5785191a.png", alt: "Alex"},
]}
avatarText="Trusted by 5,000+ development teams"
avatarText="I'm Alex, your next developer"
buttons={[
{ text: "Start Building Free", href: "#contact" },
{ text: "View Demo", href: "https://example.com/demo" },
{ text: "Hire Me", href: "#contact" },
{ text: "View My Work", href: "#projects" },
]}
buttonAnimation="slide-up"
ariaLabel="SaaS platform hero section"
ariaLabel="Alex portfolio hero section"
/>
</div>
<div id="features" data-section="features">
<div id="metrics" data-section="metrics">
<AboutMetric
title="Building Digital Solutions That Matter"
metricsAnimation="slide-up"
useInvertedBackground={false}
metrics={[
{
icon: Code,
label: "Projects Built", value: "28+"},
{
icon: Coffee,
label: "Years Experience", value: "5"},
{
icon: Briefcase,
label: "Happy Clients", value: "15+"},
{
icon: Zap,
label: "Productivity Score", value: "99%"},
]}
/>
</div>
<div id="projects" data-section="projects">
<FeatureBento
title="Powerful Features Built for Developers"
description="Everything you need to build, deploy, and manage production-grade SaaS applications with confidence and ease."
tag="Features"
tagIcon={Zap}
title="Featured Projects"
description="A selection of projects I've built that showcase my skills in full-stack development, UI/UX design, and cloud architecture."
tag="Portfolio"
tagIcon={Briefcase}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
title: "RESTful & GraphQL APIs", description:
"Flexible API options for seamless integration with any technology stack.", bentoComponent: "globe"},
title: "E-Commerce Platform", description:
"Built a full-stack SaaS e-commerce platform with real-time inventory management, payment processing, and analytics dashboard.", bentoComponent: "animated-bar-chart"},
{
title: "Real-time Analytics", description:
"Comprehensive insights into your application performance and user behavior.", bentoComponent: "animated-bar-chart"},
title: "AI Task Manager", description:
"Developed an intelligent task management application with AI-powered suggestions and natural language processing capabilities.", bentoComponent: "chat", aiIcon: MessageSquare,
userIcon: Mail,
exchanges: [
{
userMessage: "Create a task for tomorrow", aiResponse: "Task created for tomorrow at 9:00 AM"},
],
placeholder: "Ask me to create a task..."},
{
title: "Global Infrastructure", description:
"Deploy worldwide with automatic scaling and 99.99% uptime guarantee.", bentoComponent: "map"},
title: "Analytics Dashboard", description:
"Created a comprehensive real-time analytics dashboard with custom visualizations and data-driven insights.", bentoComponent: "line-chart"},
{
title: "Advanced Monitoring", description:
"Track performance metrics, errors, and user activity in real time.", bentoComponent: "line-chart"},
{
title: "Integration Hub", description: "Connect with 200+ third-party services and APIs effortlessly.", bentoComponent: "orbiting-icons", centerIcon: Zap,
title: "DevOps Automation", description:
"Implemented CI/CD pipelines, containerization, and infrastructure-as-code for automated deployments and scaling.", bentoComponent: "orbiting-icons", centerIcon: Globe,
items: [
{ icon: Code, ring: 1 },
{ icon: Github, ring: 1 },
{ icon: Database, ring: 1 },
{ icon: Shield, ring: 2 },
{ icon: Cloud, ring: 2 },
{ icon: Code, ring: 2 },
{ icon: Zap, ring: 2 },
],
},
{
title: "Developer Tools", description:
"Comprehensive CLI, SDKs, and local development environment.", bentoComponent: "marquee", centerIcon: Code,
variant: "text", texts: [
"TypeScript SDK", "Python SDK", "Go SDK", "Node.js CLI", "VS Code Extension"],
title: "Design System", description:
"Built a comprehensive UI component library and design system used across multiple projects and teams.", bentoComponent: "marquee", centerIcon: Palette,
variant: "text", texts: ["React Components", "Tailwind CSS", "Storybook", "Design Tokens"],
},
{
title: "Mobile App", description:
"Developed a React Native mobile application with offline support, real-time sync, and push notifications.", bentoComponent: "reveal-icon", icon: Moon,
},
]}
carouselMode="buttons"
/>
</div>
<div id="feature-highlight" data-section="feature-highlight">
<div id="skills" data-section="skills">
<FeatureBorderGlow
title="Enterprise-Grade Security & Performance"
description="Built with security best practices and optimized for high-performance production environments."
tag="Security First"
tagIcon={Shield}
title="Technical Skills & Expertise"
description="Core technologies and tools I use to build high-quality applications and solve complex problems."
tag="Skills"
tagIcon={Code}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
icon: Lock,
title: "End-to-End Encryption", description:
"All data encrypted in transit and at rest with industry-standard protocols."},
icon: Code,
title: "Frontend Development", description:
"React, TypeScript, Tailwind CSS, Next.js, responsive design, performance optimization"},
{
icon: Shield,
title: "Compliance Ready", description:
"SOC 2, HIPAA, GDPR, and ISO 27001 certified infrastructure."},
icon: Database,
title: "Backend Development", description:
"Node.js, Express, PostgreSQL, MongoDB, GraphQL, REST APIs, authentication & security"},
{
icon: Figma,
title: "UI/UX Design", description:
"Figma, prototyping, user research, accessibility, design systems, brand guidelines"},
{
icon: Globe,
title: "Cloud & DevOps", description:
"AWS, Docker, Kubernetes, CI/CD pipelines, infrastructure-as-code, monitoring & logging"},
{
icon: Zap,
title: "Lightning Fast", description:
"Sub-100ms latency globally with intelligent caching and CDN integration."},
title: "Performance", description:
"Web optimization, caching strategies, database indexing, load testing, SEO best practices"},
{
icon: BarChart3,
title: "Detailed Logging", description:
"Complete audit trails and performance analytics for every request."},
{
icon: Users,
title: "Team Collaboration", description:
"Role-based access control, team management, and collaborative workflows."},
{
icon: Settings,
title: "Auto-Scaling", description:
"Automatic resource allocation based on real-time demand and traffic patterns."},
icon: Github,
title: "Tools & Workflow", description:
"Git, VS Code, Webpack, Jest, ESLint, Docker Compose, agile methodologies"},
]}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFifteen
testimonial="DevFlow transformed how our team builds SaaS applications. The developer experience is exceptional, and the platform handles our scale effortlessly. Highly recommended."
testimonial="Alex is an exceptional developer who consistently delivers high-quality code and innovative solutions. Their ability to understand complex requirements and translate them into elegant solutions is impressive. Highly recommend working with them."
rating={5}
author="Sarah Chen, CTO at TechVenture"
author="Sarah Johnson, CEO at TechVenture"
avatars={[
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/professional-headshot-of-a-female-tech-e-1772736417142-803f36fc.png", alt: "Sarah Chen"},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/professional-headshot-of-a-diverse-tech--1772736418084-94950a78.png", alt: "Team member 2"},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/professional-portrait-of-a-software-deve-1772736417816-eaf402a9.png", alt: "Team member 3"},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/professional-headshot-of-a-tech-professi-1772736417577-f649b249.png", alt: "Team member 4"},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/professional-portrait-of-a-software-engi-1772736417311-0e1c5d15.png", alt: "Team member 5"},
{
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/professional-headshot-of-a-tech-professi-1772736417107-8f45eda3.png", alt: "Team member 6"},
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXCBQvQbzH8cdreih915ztPZlD/professional-headshot-of-a-female-tech-e-1772736417142-803f36fc.png", alt: "Sarah Johnson"},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
@@ -184,81 +201,48 @@ export default function SaaSLandingPage() {
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
title="Simple, Transparent Pricing"
description="Choose the plan that fits your needs. Scale up anytime as your application grows."
tag="Pricing"
tagIcon={DollarSign}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
plans={[
{
id: "starter", badge: "For Individuals", badgeIcon: Sparkles,
price: "$29", subtitle: "per month, billed annually", buttons: [{ text: "Get Started", href: "#contact" }],
features: [
"Up to 100K API calls/month", "5 GB storage", "Single project", "Email support", "Community access"],
},
{
id: "professional", badge: "Most Popular", badgeIcon: Sparkles,
price: "$99", subtitle: "per month, billed annually", buttons: [{ text: "Get Started", href: "#contact" }],
features: [
"Up to 10M API calls/month", "500 GB storage", "Unlimited projects", "Priority support", "Advanced analytics", "Team collaboration", "Custom integrations"],
},
{
id: "enterprise", badge: "For Scale", badgeIcon: Sparkles,
price: "Custom", subtitle: "tailored to your needs", buttons: [{ text: "Contact Sales", href: "https://example.com/sales" }],
features: [
"Unlimited API calls", "Unlimited storage", "Dedicated infrastructure", "24/7 phone support", "Custom SLA", "On-premise deployment", "Advanced security features"],
},
]}
carouselMode="buttons"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Newsletter"
title="Stay Updated with DevFlow"
description="Get the latest updates, feature releases, and developer tips delivered to your inbox. No spam, just valuable content."
tag="Get in Touch"
title="Let's Build Something Great"
description="I'm always interested in hearing about new projects and opportunities. Feel free to reach out if you have a project you'd like to discuss."
tagIcon={Mail}
tagAnimation="slide-up"
background={{ variant: "rotated-rays-animated" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email address"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe anytime."
buttonText="Let's Talk"
termsText="I'll get back to you within 24 hours. No spam, just real conversations."
onSubmit={handleNewsletterSubmit}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
copyrightText="© 2025 DevFlow. All rights reserved."
copyrightText="© 2025 Alex. All rights reserved."
columns={[
{
title: "Product", items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Security", href: "#" },
{ label: "Roadmap", href: "#" },
title: "Portfolio", items: [
{ label: "Projects", href: "#projects" },
{ label: "Skills", href: "#skills" },
{ label: "About", href: "#" },
{ label: "Resume", href: "#" },
],
},
{
title: "Developers", items: [
{ label: "Documentation", href: "https://docs.example.com" },
{ label: "API Reference", href: "https://api.example.com" },
{ label: "SDKs", href: "https://github.com/example" },
{ label: "Code Examples", href: "#" },
title: "Social", items: [
{ label: "GitHub", href: "https://github.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "Email", href: "mailto:alex@example.com" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Blog", href: "https://blog.example.com" },
title: "Resources", items: [
{ label: "Blog", href: "#" },
{ label: "Documentation", href: "#" },
{ label: "Contact", href: "#contact" },
{ label: "Privacy Policy", href: "#" },
{ label: "Privacy", href: "#" },
],
},
]}

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #050012;
--card: #040121;
--foreground: #f0e6ff;
--primary-cta: #c89bff;
--background: #0a0f2e;
--card: #141d47;
--foreground: #e6e8f0;
--primary-cta: #8b5cf6;
--primary-cta-text: #050012;
--secondary-cta: #1d123b;
--secondary-cta: #1f2951;
--secondary-cta-text: #f0e6ff;
--accent: #684f7b;
--background-accent: #65417c;
--accent: #a78bfa;
--background-accent: #7c3aed;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);