development/cb27a610-2399-4a61-9b31-20c3af99e364
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-01-20 02:43:52 +02:00
commit c56a5a87ce
259 changed files with 49986 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

526
src/app/globals.css Normal file
View File

@@ -0,0 +1,526 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #efebe5;;
--card: #f7f2ea;;
--foreground: #000000;;
--primary-cta: #000000;;
--secondary-cta: #ffffff;;
--accent: #e7d7c1;;
--background-accent: #f7f2ea;; */
--background: #efebe5;;
--card: #f7f2ea;;
--foreground: #000000;;
--primary-cta: #000000;;
--secondary-cta: #ffffff;;
--accent: #e7d7c1;;
--background-accent: #f7f2ea;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-secondary-cta: var(--secondary-cta);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-manrope), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-manrope), sans-serif;
}

1265
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

271
src/app/page.tsx Normal file
View File

@@ -0,0 +1,271 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TeamCardTen from '@/components/sections/team/TeamCardTen';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Sparkles, Award, Zap, Play, TrendingUp, Star, Instagram, Youtube, Linkedin, Twitter, Heart, BookOpen, Users } from "lucide-react";
export default function ContentPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="sharp"
contentWidth="smallMedium"
sizing="mediumSizeLargeTitles"
background="aurora"
cardStyle="soft-shadow"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="ContentHouse"
navItems={[
{ name: "Services", id: "services" },
{ name: "Team", id: "team" },
{ name: "Portfolio", id: "portfolio" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "Start Project", href: "contact"
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Viral Content That Moves"
description="We create compelling stories that resonate with millions. From concept to viral moment, your brand's message comes alive through our expert creators and cutting-edge production."
tag="Creative Excellence"
tagIcon={Sparkles}
mediaItems={[
{
imageSrc: "https://img.b2bpic.net/free-photo/social-media-concept-composition_23-2150169158.jpg", imageAlt: "Viral content creation"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/excited-woman-filming-fashion-vlog-with-phone_482257-121799.jpg", imageAlt: "Professional video production"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/woman-filming-fashion-vlog-holding-jacket-hand_482257-121680.jpg", imageAlt: "Social media trending content"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-woman-planting-seeds_23-2149172431.jpg", imageAlt: "Influencer content creation"
},
{
imageSrc: "https://img.b2bpic.net/free-photo/screaming-blogger-girl-is-posing-camera-by-showing-claws-blue-background_176474-116577.jpg", imageAlt: "Creative team brainstorming"
}
]}
buttons={[
{ text: "View Portfolio", href: "portfolio" },
{ text: "Get Started", href: "contact" }
]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="About Us"
tagIcon={Award}
title="Creators Turning Ideas Into Viral Sensations"
description="ContentHouse is a collective of award-winning creators, producers, and strategists who understand what makes content resonate. With years of experience across platforms, we've mastered the art of creating content that doesn't just get views—it gets shared, discussed, and remembered."
metrics={[
{ value: "500M+", title: "Total Views Generated" },
{ value: "150+", title: "Viral Campaigns Launched" }
]}
imageSrc="https://img.b2bpic.net/free-photo/tired-asian-it-specialist-drinking-coffee-watching-female-colleague-working-with-laptop-indoor-portrait-young-business-people-sitting-table-together-conference-hall_197531-3708.jpg"
imageAlt="ContentHouse creative studio team"
useInvertedBackground="invertDefault"
/>
</div>
<div id="services" data-section="services">
<FeatureCardSeven
title="Our Services"
description="Comprehensive content solutions designed to elevate your brand across all platforms"
tag="What We Offer"
tagIcon={Zap}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
features={[
{
id: 1,
title: "Content Strategy & Ideation", description: "We develop data-driven content strategies that align with your brand goals. Our team conducts market research, identifies trending topics, and creates content calendars designed to maximize engagement and reach.", imageSrc: "https://img.b2bpic.net/free-photo/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg", imageAlt: "Content strategy and planning"
},
{
id: 2,
title: "Professional Production", description: "From concept to final product, our production team handles everything. Full-service video production, photography shoots, and studio access ensure your content meets the highest professional standards.", imageSrc: "https://img.b2bpic.net/free-photo/group-diverse-people-having-business-meeting_53876-20876.jpg", imageAlt: "Professional video production"
},
{
id: 3,
title: "Post-Production & Editing", description: "Expert editors and colorists bring your raw footage to life. We handle motion graphics, color grading, sound design, and effects to create polished, platform-optimized content.", imageSrc: "https://img.b2bpic.net/free-photo/business-person-looking-finance-graphs_23-2150461327.jpg", imageAlt: "Video editing and post-production"
},
{
id: 4,
title: "Social Media Management", description: "Strategic posting, community management, and cross-platform optimization. We ensure your content reaches the right audience at the right time with maximum impact.", imageSrc: "https://img.b2bpic.net/free-photo/graph-growth-success-improvement-development-business_53876-123895.jpg", imageAlt: "Social media management and engagement"
}
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardTen
title="Meet Our Creators"
tag="Talented Individuals"
members={[
{
id: "1", name: "Alex Rivera", imageSrc: "https://img.b2bpic.net/free-photo/young-male-blogger-recording-station_1303-22012.jpg", imageAlt: "Alex Rivera, Creative Director"
},
{
id: "2", name: "Jordan Chen", imageSrc: "https://img.b2bpic.net/free-photo/male-product-photographer-doing-his-job-studio_23-2148970193.jpg", imageAlt: "Jordan Chen, Video Producer"
},
{
id: "3", name: "Marcus Johnson", imageSrc: "https://img.b2bpic.net/free-photo/smiley-man-with-camera_23-2148602762.jpg", imageAlt: "Marcus Johnson, Lead Editor"
},
{
id: "4", name: "Sofia Hernandez", imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-musician-working-studio_23-2150265028.jpg", imageAlt: "Sofia Hernandez, Content Strategist"
}
]}
memberVariant="default"
useInvertedBackground="invertDefault"
/>
</div>
<div id="portfolio" data-section="portfolio">
<BlogCardThree
title="Our Viral Moments"
description="A showcase of our most impactful content that captured audiences and sparked conversations"
tag="Featured Portfolio"
tagIcon={Play}
textboxLayout="default"
animationType="blur-reveal"
useInvertedBackground="noInvert"
blogs={[
{
id: "1", category: "Brand Campaign", categoryIcon: Zap,
title: "Tech Startup Launch Campaign", description: "5M+ views in 48 hours. This innovative product launch video redefined how tech brands introduce new solutions to market audiences.", imageSrc: "https://img.b2bpic.net/free-photo/collage-people-using-reels_23-2149416510.jpg", imageAlt: "Tech startup viral campaign"
},
{
id: "2", category: "Social Movement", categoryIcon: Heart,
title: "Inspiring Social Impact Series", description: "12M+ combined views. Our documentary-style series on social entrepreneurs sparked meaningful conversations and community engagement.", imageSrc: "https://img.b2bpic.net/free-photo/female-fashion-blogger-streaming-home-with-smartphone_23-2148771594.jpg", imageAlt: "Social impact video series"
},
{
id: "3", category: "Lifestyle", categoryIcon: Sparkles,
title: "Weekend Adventure Content Series", description: "8.5M+ views. Short-form content that captured authentic moments and built loyal viewer communities across platforms.", imageSrc: "https://img.b2bpic.net/free-photo/young-people-using-reels_23-2150038634.jpg", imageAlt: "Lifestyle viral content"
},
{
id: "4", category: "Educational", categoryIcon: BookOpen,
title: "Quick Tips Educational Series", description: "15M+ total engagement. Fast-paced, valuable content that educates while entertaining viewers of all demographics.", imageSrc: "https://img.b2bpic.net/free-photo/female-artist-explaining-painting-techniques-used-online-tutorial_482257-124811.jpg", imageAlt: "Educational viral content"
},
{
id: "5", category: "Brand Collaboration", categoryIcon: Users,
title: "Influencer Partnership Campaign", description: "22M+ combined reach. Strategic collaborations that amplified brand messages and reached new audiences authentically.", imageSrc: "https://img.b2bpic.net/free-photo/hand-holding-smartphone-social-media-concept_23-2150208259.jpg", imageAlt: "Brand collaboration campaign"
}
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
title="Our Impact By The Numbers"
description="Data-driven results that showcase our content's real-world performance and audience reach"
tag="Proven Results"
tagIcon={TrendingUp}
textboxLayout="default"
animationType="scale-rotate"
useInvertedBackground="invertDefault"
gridVariant="uniform-all-items-equal"
metrics={[
{
id: "1", value: "500M+", title: "Total Content Views", items: ["Across all major platforms", "50+ successful campaigns", "Consistent growth month-over-month"]
},
{
id: "2", value: "98%", title: "Client Satisfaction Rate", items: ["Repeat client partnerships", "Industry-leading retention", "Award-winning deliverables"]
},
{
id: "3", value: "150+", title: "Viral Campaigns Delivered", items: ["Fortune 500 brands", "Emerging startups supported", "Diverse industry expertise"]
},
{
id: "4", value: "12+", title: "Years Combined Experience", items: ["Industry veterans on staff", "Trend-setting creatives", "Continuously evolving expertise"]
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="What Our Clients Say"
description="Real feedback from brands we've transformed through viral content strategy"
tag="Client Success Stories"
tagIcon={Star}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground="noInvert"
gridVariant="uniform-all-items-equal"
testimonials={[
{
id: "1", name: "Sarah Mitchell", role: "Marketing Director", company: "TechFlow Solutions", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", imageAlt: "Sarah Mitchell testimonial"
},
{
id: "2", name: "Emma Rodriguez", role: "Brand Manager", company: "Lifestyle Co.", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", imageAlt: "Emma Rodriguez testimonial"
},
{
id: "3", name: "David Okonkwo", role: "Chief Creative Officer", company: "Digital Ventures", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/middle-aged-businesswoman-smiling_1262-21181.jpg", imageAlt: "David Okonkwo testimonial"
},
{
id: "4", name: "Jessica Wang", role: "Founder", company: "CreativeMinds Agency", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", imageAlt: "Jessica Wang testimonial"
},
{
id: "5", name: "Michael Thompson", role: "Growth Lead", company: "StartupXYZ", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-posing-near-office-building_1262-21023.jpg", imageAlt: "Michael Thompson testimonial"
},
{
id: "6", name: "Lisa Chen", role: "Marketing VP", company: "Premium Brands Inc", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg", imageAlt: "Lisa Chen testimonial"
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Ready to Create?"
title="Let's Bring Your Vision to Life"
description="Join hundreds of brands creating viral moments. Get in touch with our team to discuss your next project and discover how we can elevate your content."
tagIcon={Zap}
useInvertedBackground="invertDefault"
inputPlaceholder="your@email.com"
buttonText="Start Collaboration"
termsText="We respect your privacy. We'll only use your email to discuss your project."
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="ContentHouse"
copyrightText="© 2025 ContentHouse. All rights reserved."
socialLinks={[
{ icon: Instagram, href: "https://instagram.com/contenthouse", ariaLabel: "Instagram" },
{ icon: Youtube, href: "https://youtube.com/contenthouse", ariaLabel: "YouTube" },
{ icon: Linkedin, href: "https://linkedin.com/company/contenthouse", ariaLabel: "LinkedIn" },
{ icon: Twitter, href: "https://twitter.com/contenthouse", ariaLabel: "Twitter" }
]}
/>
</div>
</ThemeProvider>
);
}