Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ce03cecf37 |
325
src/app/page.tsx
325
src/app/page.tsx
@@ -1,253 +1,92 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import HeroCentered from "@/components/sections/hero/HeroCentered";
|
|
||||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||||
import FeatureBento, { type FeatureCard } from "@/components/sections/feature/FeatureBento";
|
|
||||||
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
||||||
import PricingCardEight from "@/components/sections/pricing/PricingCardEight";
|
|
||||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||||
import { Zap, Shield, Rocket, Target, Sparkles, Crown, Mail, Users, Layers, Code } from "lucide-react";
|
import { useState } from "react";
|
||||||
|
|
||||||
export default function SaasTemplatePage() {
|
export default function ProposalWriterPage() {
|
||||||
const navItems = [
|
const [jobDescription, setJobDescription] = useState("");
|
||||||
{ name: "Features", id: "features" },
|
const [userName, setUserName] = useState("");
|
||||||
{ name: "Pricing", id: "pricing" },
|
const [proposal, setProposal] = useState("");
|
||||||
{ name: "About", id: "about" },
|
|
||||||
{ name: "Contact", id: "contact" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const avatars = [
|
const navItems = [
|
||||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/testimonial/testimonial1.webp", alt: "User 1" },
|
{ name: "Features", id: "/#features" },
|
||||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", alt: "User 1" },
|
{ name: "Pricing", id: "/#pricing" },
|
||||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif", alt: "User 1" },
|
{ name: "Proposal Writer", id: "/proposal-writer" },
|
||||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image8.avif", alt: "User 1" },
|
{ name: "Contact", id: "/#contact" },
|
||||||
];
|
];
|
||||||
|
|
||||||
const features: FeatureCard[] = [
|
const handleGenerate = () => {
|
||||||
{
|
setProposal(`As a highly experienced freelancer from Pakistan with a proven track record of delivering top-tier results on platforms like Upwork and Fiverr, I understand the nuances of high-converting proposals. Based on your project description: "${jobDescription.substring(0, 50)}...", I would leverage my technical expertise and communication skills to ensure your project's success. My unique value proposition lies in my dedication to clear requirements gathering, rapid turnaround times, and post-delivery support, ensuring that clients like you receive nothing short of excellence. Looking forward to discussing how we can achieve your goals together, ${userName}.`);
|
||||||
bentoComponent: "globe",
|
};
|
||||||
title: "Global Reach",
|
|
||||||
description: "Connect with users worldwide through our distributed infrastructure",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
bentoComponent: "marquee",
|
|
||||||
variant: "text",
|
|
||||||
centerIcon: Zap,
|
|
||||||
texts: ["Fast", "Reliable", "Secure", "Scalable", "Modern"],
|
|
||||||
title: "Built for Speed",
|
|
||||||
description: "Lightning fast performance with optimized delivery",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
bentoComponent: "3d-stack-cards",
|
|
||||||
items: [
|
|
||||||
{ icon: Shield, title: "Security", subtitle: "Enterprise-grade", detail: "Bank-level encryption" },
|
|
||||||
{ icon: Rocket, title: "Performance", subtitle: "99.9% uptime", detail: "Always available" },
|
|
||||||
{ icon: Target, title: "Accuracy", subtitle: "100% reliable", detail: "Data you can trust" },
|
|
||||||
],
|
|
||||||
title: "Built for Scale",
|
|
||||||
description: "Deploy to any region with automatic failover support",
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
|
<ThemeProvider defaultButtonVariant="hover-bubble" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="none" cardStyle="gradient-bordered" primaryButtonStyle="primary-glow" secondaryButtonStyle="layered" headingFontWeight="medium">
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<NavbarLayoutFloatingInline
|
<NavbarLayoutFloatingInline
|
||||||
navItems={navItems}
|
navItems={navItems}
|
||||||
brandName="SaasApp"
|
brandName="SaasApp"
|
||||||
button={{ text: "Get Started", href: "#" }}
|
button={{ text: "Get Started", href: "/#" }}
|
||||||
/>
|
/>
|
||||||
<HeroCentered
|
|
||||||
background={{ variant: "rotated-rays-animated-grid" }}
|
<div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
|
||||||
avatars={avatars}
|
<h1 className="text-4xl font-bold mb-8 text-center">Expert Proposal Writer</h1>
|
||||||
avatarText="Trusted by 1000+ users"
|
<div className="bg-card p-8 rounded-2xl shadow-sm border space-y-6">
|
||||||
title="Build Modern Web Experiences-Out of the world california apple"
|
<div>
|
||||||
description="Create stunning, responsive websites with our comprehensive component library designed"
|
<label className="block text-sm font-medium mb-2">Your Name</label>
|
||||||
buttons={[
|
<input
|
||||||
{
|
className="w-full p-3 rounded-xl border bg-background"
|
||||||
text: "Get Started",
|
placeholder="Enter your name"
|
||||||
onClick: () => console.log("Get Started clicked"),
|
value={userName}
|
||||||
},
|
onChange={(e) => setUserName(e.target.value)}
|
||||||
{
|
/>
|
||||||
text: "Learn More",
|
</div>
|
||||||
onClick: () => console.log("Learn More clicked"),
|
<div>
|
||||||
},
|
<label className="block text-sm font-medium mb-2">Job Post Description</label>
|
||||||
]}
|
<textarea
|
||||||
marqueeItems={[
|
className="w-full p-3 rounded-xl border bg-background min-h-[150px]"
|
||||||
{ type: "text-icon", text: "Lightning Fast", icon: Zap },
|
placeholder="Paste the job description here..."
|
||||||
{ type: "text-icon", text: "Enterprise Security", icon: Shield },
|
value={jobDescription}
|
||||||
{ type: "text-icon", text: "99.9% Uptime", icon: Rocket },
|
onChange={(e) => setJobDescription(e.target.value)}
|
||||||
{ type: "text-icon", text: "Precision Targeting", icon: Target },
|
/>
|
||||||
{ type: "text-icon", text: "AI Powered", icon: Sparkles },
|
</div>
|
||||||
]}
|
<button
|
||||||
/>
|
onClick={handleGenerate}
|
||||||
<FeatureBento
|
className="w-full py-4 bg-primary text-primary-foreground rounded-xl font-bold hover:opacity-90 transition-opacity"
|
||||||
features={features}
|
>
|
||||||
animationType="none"
|
Generate Expert Proposal
|
||||||
tag="Features"
|
</button>
|
||||||
title="Powerful Features"
|
{proposal && (
|
||||||
description="Everything you need to build and scale your product"
|
<div className="mt-8 p-6 bg-background rounded-xl border italic">
|
||||||
textboxLayout="default"
|
{proposal}
|
||||||
useInvertedBackground={false}
|
</div>
|
||||||
/>
|
)}
|
||||||
<FeatureBorderGlow
|
</div>
|
||||||
tag="Why Choose Us"
|
</div>
|
||||||
tagIcon={Users}
|
|
||||||
title="Built by developers, for developers"
|
<ContactSplit
|
||||||
description="We understand the challenges of modern software development because we face them every day."
|
tag="Contact"
|
||||||
animationType="slide-up"
|
title="Ready to get started?"
|
||||||
textboxLayout="default"
|
description="Join thousands of developers building better products with our platform."
|
||||||
useInvertedBackground={false}
|
background={{ variant: "animated-grid" }}
|
||||||
features={[
|
useInvertedBackground={false}
|
||||||
{
|
inputPlaceholder="Enter your email"
|
||||||
icon: Layers,
|
buttonText="Get Early Access"
|
||||||
title: "Modular Architecture",
|
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||||
description: "Build with composable components that scale with your needs",
|
/>
|
||||||
},
|
|
||||||
{
|
<FooterBaseReveal
|
||||||
icon: Code,
|
logoText="SaaSify"
|
||||||
title: "Developer Experience",
|
columns={[
|
||||||
description: "Clean APIs and comprehensive documentation for faster development",
|
{ title: "Product", items: [{ label: "Features", href: "/#features" }, { label: "Pricing", href: "/#pricing" }] },
|
||||||
},
|
{ title: "Company", items: [{ label: "About", href: "/#about" }, { label: "Contact", href: "/#contact" }] }
|
||||||
{
|
]}
|
||||||
icon: Shield,
|
copyrightText="2024 SaasApp. All rights reserved."
|
||||||
title: "Enterprise Security",
|
/>
|
||||||
description: "Bank-level encryption and compliance with industry standards",
|
</ReactLenis>
|
||||||
},
|
</ThemeProvider>
|
||||||
{
|
);
|
||||||
icon: Rocket,
|
}
|
||||||
title: "Lightning Fast",
|
|
||||||
description: "Optimized for performance with sub-second response times",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<TestimonialCardFifteen
|
|
||||||
testimonial="This platform has completely transformed how we build products. The developer experience is unmatched."
|
|
||||||
rating={5}
|
|
||||||
author="Sarah Chen, CTO at TechFlow"
|
|
||||||
avatars={avatars}
|
|
||||||
ratingAnimation="slide-up"
|
|
||||||
avatarsAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
<PricingCardEight
|
|
||||||
tag="Pricing"
|
|
||||||
tagIcon={Sparkles}
|
|
||||||
title="Simple, transparent pricing"
|
|
||||||
description="Choose the plan that works best for you. All plans include a 14-day free trial."
|
|
||||||
animationType="opacity"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
plans={[
|
|
||||||
{
|
|
||||||
id: "starter",
|
|
||||||
badge: "Starter",
|
|
||||||
badgeIcon: Zap,
|
|
||||||
price: "$19/mo",
|
|
||||||
subtitle: "Perfect for individuals",
|
|
||||||
buttons: [
|
|
||||||
{ text: "Get Started", onClick: () => console.log("Starter clicked") },
|
|
||||||
],
|
|
||||||
features: [
|
|
||||||
"Up to 5 projects",
|
|
||||||
"Basic analytics",
|
|
||||||
"24/7 email support",
|
|
||||||
"API access",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "pro",
|
|
||||||
badge: "Pro",
|
|
||||||
badgeIcon: Rocket,
|
|
||||||
price: "$49/mo",
|
|
||||||
subtitle: "For growing teams",
|
|
||||||
buttons: [
|
|
||||||
{ text: "Get Started", onClick: () => console.log("Pro clicked") },
|
|
||||||
],
|
|
||||||
features: [
|
|
||||||
"Unlimited projects",
|
|
||||||
"Advanced analytics",
|
|
||||||
"Priority support",
|
|
||||||
"Custom integrations",
|
|
||||||
"Team collaboration",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "enterprise",
|
|
||||||
badge: "Enterprise",
|
|
||||||
badgeIcon: Crown,
|
|
||||||
price: "$99/mo",
|
|
||||||
subtitle: "For large organizations",
|
|
||||||
buttons: [
|
|
||||||
{ text: "Contact Sales", onClick: () => console.log("Enterprise clicked") },
|
|
||||||
],
|
|
||||||
features: [
|
|
||||||
"Everything in Pro",
|
|
||||||
"Dedicated account manager",
|
|
||||||
"Custom SLA",
|
|
||||||
"On-premise deployment",
|
|
||||||
"Advanced security",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<ContactCenter
|
|
||||||
tag="Contact"
|
|
||||||
tagIcon={Mail}
|
|
||||||
title="Ready to get started?"
|
|
||||||
description="Join thousands of developers building better products with our platform."
|
|
||||||
background={{ variant: "animated-grid" }}
|
|
||||||
useInvertedBackground={false}
|
|
||||||
inputPlaceholder="Enter your email"
|
|
||||||
buttonText="Get Early Access"
|
|
||||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
|
||||||
/>
|
|
||||||
<FooterBaseReveal
|
|
||||||
logoText="SaaSify"
|
|
||||||
columns={[
|
|
||||||
{
|
|
||||||
title: "Product",
|
|
||||||
items: [
|
|
||||||
{ label: "Features", href: "#features" },
|
|
||||||
{ label: "Pricing", href: "#pricing" },
|
|
||||||
{ label: "Integrations", href: "#" },
|
|
||||||
{ label: "Changelog", href: "#" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Company",
|
|
||||||
items: [
|
|
||||||
{ label: "About", href: "#about" },
|
|
||||||
{ label: "Blog", href: "#" },
|
|
||||||
{ label: "Careers", href: "#" },
|
|
||||||
{ label: "Contact", href: "#contact" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Resources",
|
|
||||||
items: [
|
|
||||||
{ label: "Documentation", href: "#" },
|
|
||||||
{ label: "Help Center", href: "#" },
|
|
||||||
{ label: "Community", href: "#" },
|
|
||||||
{ label: "Status", href: "#" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Legal",
|
|
||||||
items: [
|
|
||||||
{ label: "Privacy", href: "#" },
|
|
||||||
{ label: "Terms", href: "#" },
|
|
||||||
{ label: "Security", href: "#" },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
copyrightText="2024 SaasApp. All rights reserved."
|
|
||||||
/>
|
|
||||||
</ReactLenis>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user