Merge version_13 into main #30
@@ -1,25 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import { useState } from "react";
|
||||
|
||||
const ContactPage = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "", email: "", message: ""});
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission
|
||||
console.log("Form submitted:", formData);
|
||||
setFormData({ name: "", email: "", message: "" });
|
||||
};
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import ContactForm from "@/components/form/ContactForm";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Mail, Twitter, Linkedin } from "lucide-react";
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -31,93 +18,48 @@ const ContactPage = () => {
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="billiclipd"
|
||||
button={{
|
||||
text: "Book a Call", href: "/contact"}}
|
||||
animateOnLoad={true}
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@example.com"
|
||||
/>
|
||||
|
||||
<div id="contact-page" data-section="contact-page" className="pt-40 pb-20 px-4">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-5xl font-bold mb-4 text-center">Get in Touch</h1>
|
||||
<p className="text-lg text-center mb-12 opacity-75">
|
||||
Ready to turn your content into viral clips? Fill out the form below and our team will get back to you within 24 hours.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6 bg-card p-8 rounded-lg border border-accent">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded border border-accent bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-2 rounded border border-accent bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium mb-2">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
rows={5}
|
||||
className="w-full px-4 py-2 rounded border border-accent bg-background text-foreground focus:outline-none focus:border-primary-cta resize-none"
|
||||
placeholder="Tell us about your project..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta text-primary-cta-text font-semibold py-3 rounded hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-12 text-center">
|
||||
<p className="text-sm opacity-60">Or reach out to us directly at:</p>
|
||||
<p className="text-lg font-semibold mt-2">hello@billiclipd.com</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center min-h-screen py-20">
|
||||
<div className="w-full">
|
||||
<ContactForm
|
||||
title="Get in Touch"
|
||||
description="Ready to turn your content into viral clips? Reach out to our team and let's discuss your project."
|
||||
tag="Contact Us"
|
||||
tagIcon={Mail}
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Send Message"
|
||||
termsText="We'll get back to you within 24 hours."
|
||||
centered={true}
|
||||
onSubmit={(email) => console.log("Email:", email)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FooterCard
|
||||
logoText="billiclipd"
|
||||
copyrightText="© 2025 | billiclipd. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com/billiclipd", ariaLabel: "Twitter"},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com/company/billiclipd", ariaLabel: "LinkedIn"},
|
||||
]}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContactPage;
|
||||
}
|
||||
|
||||
@@ -1,14 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Poppins } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const poppins = Poppins({
|
||||
variable: "--font-poppins", subsets: ["latin"],
|
||||
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
|
||||
});
|
||||
import "./styles/globals.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "billiclipd | Viral Clip Specialist", description: "Turn longform content into viral clips for TikTok, Instagram Reels, and YouTube Shorts. Expert clipping services with 10M+ views generated."};
|
||||
title: "billiclipd - Turn Longform into Viral Clips", description: "Professional clip editing service. Transform your YouTube videos, podcasts, and streams into TikTok, Reels, and Shorts that drive engagement."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@@ -16,10 +10,8 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={`${poppins.variable}`}>
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body>{children}
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
|
||||
165
src/app/page.tsx
165
src/app/page.tsx
@@ -1,12 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroCentered from "@/components/sections/hero/HeroCentered";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import { Mail } from "lucide-react";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Sparkles, Hexagon, House, MessageSquareText, Settings, CircleDollarSign, ArrowLeftRight, Send, Twitter, Linkedin } from "lucide-react";
|
||||
|
||||
const HomePage = () => {
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -18,56 +21,144 @@ const HomePage = () => {
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
]}
|
||||
brandName="billiclipd"
|
||||
button={{
|
||||
text: "Book a Call", href: "/contact"}}
|
||||
animateOnLoad={true}
|
||||
bottomLeftText="Global Community"
|
||||
bottomRightText="hello@example.com"
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "plain" }}
|
||||
avatars={[
|
||||
{ src: "asset://avatar1", alt: "User 1" },
|
||||
{ src: "asset://avatar2", alt: "User 2" },
|
||||
{ src: "asset://avatar3", alt: "User 3" },
|
||||
]}
|
||||
avatarText="Trusted by content creators"
|
||||
title="Turn Longform into Viral Clips"
|
||||
description="Professional clip editing service. We transform your YouTube videos, podcasts, and streams into TikTok, Reels, and Shorts that drive engagement."
|
||||
<HeroBillboardDashboard
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Viral Clip Specialist"
|
||||
tagIcon={Sparkles}
|
||||
title="Turn Longform Content Into Viral Clips"
|
||||
description="Turn your podcasts, streams, and long-form videos into viral clips for TikTok, Instagram Reels, and YouTube Shorts. Expert clipping services with 10M+ views generated."
|
||||
buttons={[
|
||||
{ text: "Get Started", href: "/contact" },
|
||||
{ text: "Learn More", href: "#services" },
|
||||
{ text: "Book a Call", href: "/contact" },
|
||||
{ text: "View Portfolio", href: "#features" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
dashboard={{
|
||||
title: "Clip Analytics Hub", logoIcon: Hexagon,
|
||||
imageSrc: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", buttons: [
|
||||
{ text: "Dashboard", href: "#" },
|
||||
{ text: "Export CSV", href: "#" },
|
||||
],
|
||||
sidebarItems: [
|
||||
{ icon: House, active: true },
|
||||
{ icon: MessageSquareText },
|
||||
{ icon: Settings },
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
title: "Clips Created", values: [1240, 1856, 2130],
|
||||
description: "Total viral clips."},
|
||||
{
|
||||
title: "Total Views", values: [10240000, 12500000, 13450000],
|
||||
valuePrefix: "", valueSuffix: "M+", description: "Across all platforms."},
|
||||
{
|
||||
title: "Engagement Rate", values: [8.5, 12.3, 15.7],
|
||||
valueSuffix: "%", description: "Average engagement."},
|
||||
],
|
||||
chartTitle: "Views Over Time", chartData: [
|
||||
{ value: 50 },
|
||||
{ value: 30 },
|
||||
{ value: 70 },
|
||||
{ value: 40 },
|
||||
{ value: 90 },
|
||||
],
|
||||
listTitle: "Recent Clips", listItems: [
|
||||
{
|
||||
icon: CircleDollarSign,
|
||||
title: "5-Sec Motivational", status: "Published"},
|
||||
{
|
||||
icon: ArrowLeftRight,
|
||||
title: "3-Min Podcast Clip", status: "Processing"},
|
||||
{
|
||||
icon: Send,
|
||||
title: "Highlight Reel", status: "Published"},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="Ready to Go Viral?"
|
||||
tagIcon={Mail}
|
||||
title="Let's Turn Your Content into Clips"
|
||||
description="Our team of expert editors is ready to help you maximize your content's reach. Book a consultation call with us today."
|
||||
buttons={[
|
||||
{ text: "Book a Call", href: "/contact" },
|
||||
{ text: "View Our Work", href: "#services" },
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Content Analysis", description:
|
||||
"We analyze your longform content to identify the most viral moments and trending hooks.", imageSrc:
|
||||
"https://images.unsplash.com/photo-1611532736597-de2d4265fba3?w=500&h=300&fit=crop"},
|
||||
{
|
||||
id: 2,
|
||||
title: "Professional Editing", description:
|
||||
"Our expert editors craft high-quality clips optimized for each platform's unique algorithm.", imageSrc:
|
||||
"https://images.unsplash.com/photo-1598899134739-24c46f58b8c0?w=500&h=300&fit=crop"},
|
||||
{
|
||||
id: 3,
|
||||
title: "Multi-Platform Optimization", description:
|
||||
"Each clip is tailored for TikTok, Instagram Reels, and YouTube Shorts with proper formatting.", imageSrc:
|
||||
"https://images.unsplash.com/photo-1611339555312-e607c90352fd?w=500&h=300&fit=crop"},
|
||||
{
|
||||
id: 4,
|
||||
title: "Performance Analytics", description:
|
||||
"Track engagement metrics, reach, and performance across all platforms in real-time.", imageSrc:
|
||||
"https://images.unsplash.com/photo-1460925895917-aeb19be489c7?w=500&h=300&fit=crop"},
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
title="Our Process"
|
||||
description="How we transform your content into viral sensations"
|
||||
tag="What We Do"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="Why Choose billiclipd?"
|
||||
description={[
|
||||
"With over 10 million views generated across TikTok, Instagram Reels, and YouTube Shorts, we know what makes content go viral. Our team combines data-driven insights with creative excellence to transform your longform content into short-form sensations.", "We don't just edit clips—we create content strategies that maximize your reach and engagement on every platform."]}
|
||||
buttons={[
|
||||
{ text: "Book a Call", href: "/contact" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Get Started"
|
||||
title="Ready to Go Viral?"
|
||||
description="Let's transform your content into clips that generate millions of views. Book a call with our team to discuss your project."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
buttonText="Book a Call"
|
||||
onSubmit={(email) => console.log("Email:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterCard
|
||||
logoText="billiclipd"
|
||||
copyrightText="© 2025 | billiclipd. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com/billiclipd", ariaLabel: "Twitter"},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com/company/billiclipd", ariaLabel: "LinkedIn"},
|
||||
]}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user