bender/5d869690-2c96-4d59-8a68-288243c087be
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-03-10 20:06:33 +00:00
Conversation 0 Commits 2 Files Changed 2 +95 -239
2 changed files with 95 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/app/page.tsx
View File

@@ -9,6 +9,7 @@ import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import TeamCardOne from "@/components/sections/team/TeamCardOne";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBase from "@/components/sections/footer/FooterBase";
import {
Sparkles,
@@ -30,8 +31,7 @@ export default function HomePage() {
const footerColumns = [
{
title: "Services",
items: [
title: "Services", items: [
{ label: "Brand Identity", href: "#services" },
{ label: "Website Design", href: "#services" },
{ label: "Social Media Design", href: "#services" },
@@ -39,8 +39,7 @@ export default function HomePage() {
],
},
{
title: "Company",
items: [
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Team", href: "#team" },
{ label: "Portfolio", href: "#portfolio" },
@@ -48,8 +47,7 @@ export default function HomePage() {
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Twitter", href: "https://twitter.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
@@ -76,9 +74,7 @@ export default function HomePage() {
brandName="OwnSelf Illustrations"
navItems={navItems}
button={{
text: "Start Your Project",
href: "contact",
}}
text: "Start Your Project", href: "contact"}}
/>
</div>
@@ -86,7 +82,7 @@ export default function HomePage() {
<HeroBillboard
title="Designing brands that stand out."
description="OwnSelf Illustrations helps startups and modern businesses create powerful brand identities and digital experiences that resonate with their audience. We combine strategic thinking with exceptional design to bring your vision to life."
background={{ variant: "circleGradient" }}
background={{ variant: "sparkles-gradient" }}
tag="Creative Studio"
tagIcon={Sparkles}
tagAnimation="slide-up"
@@ -121,59 +117,23 @@ export default function HomePage() {
description="We offer comprehensive design solutions tailored to elevate your brand and drive business growth."
features={[
{
id: "brand-identity",
title: "Brand Identity Design",
description:
"Complete brand systems including logos, color palettes, typography, and brand guidelines that define your unique market position.",
tag: "Branding",
imageSrc: "http://img.b2bpic.net/free-vector/coloful-business-card-template_23-2148549832.jpg?_wi=1",
imageAlt: "brand identity design mockup color palette",
},
id: "brand-identity", title: "Brand Identity Design", description:
"Complete brand systems including logos, color palettes, typography, and brand guidelines that define your unique market position.", tag: "Branding", imageSrc: "http://img.b2bpic.net/free-vector/coloful-business-card-template_23-2148549832.jpg", imageAlt: "brand identity design mockup color palette"},
{
id: "web-design",
title: "Website Design & Development",
description:
"Modern, responsive websites that combine aesthetic excellence with seamless user experience and conversion optimization.",
tag: "Web",
imageSrc: "http://img.b2bpic.net/free-vector/travel-landing-page-with-image_23-2148361056.jpg?_wi=1",
imageAlt: "modern website design mockup responsive",
},
id: "web-design", title: "Website Design & Development", description:
"Modern, responsive websites that combine aesthetic excellence with seamless user experience and conversion optimization.", tag: "Web", imageSrc: "http://img.b2bpic.net/free-vector/travel-landing-page-with-image_23-2148361056.jpg", imageAlt: "modern website design mockup responsive"},
{
id: "social-media",
title: "Social Media Visual Design",
description:
"Engaging social media content, templates, and graphics that amplify your brand voice and boost audience engagement.",
tag: "Social",
imageSrc: "http://img.b2bpic.net/free-vector/health-fitness-instagram-posts-collection_23-2149007527.jpg?_wi=1",
imageAlt: "social media design templates instagram",
},
id: "social-media", title: "Social Media Visual Design", description:
"Engaging social media content, templates, and graphics that amplify your brand voice and boost audience engagement.", tag: "Social", imageSrc: "http://img.b2bpic.net/free-vector/health-fitness-instagram-posts-collection_23-2149007527.jpg", imageAlt: "social media design templates instagram"},
{
id: "marketing",
title: "Marketing Posters & Ads",
description:
"Eye-catching marketing materials and digital advertising designs that capture attention and drive conversions.",
tag: "Marketing",
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-marketing-strategy-poster-template_23-2150431637.jpg?_wi=1",
imageAlt: "marketing poster design advertising creative",
},
id: "marketing", title: "Marketing Posters & Ads", description:
"Eye-catching marketing materials and digital advertising designs that capture attention and drive conversions.", tag: "Marketing", imageSrc: "http://img.b2bpic.net/free-psd/flat-design-marketing-strategy-poster-template_23-2150431637.jpg", imageAlt: "marketing poster design advertising creative"},
{
id: "creative-direction",
title: "Creative Direction",
description:
"Strategic visual direction and consulting for campaigns, ensuring consistency and impact across all touchpoints.",
tag: "Strategy",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-checking-notes_23-2148128334.jpg?_wi=1",
imageAlt: "creative direction visual strategy brainstorm",
},
id: "creative-direction", title: "Creative Direction", description:
"Strategic visual direction and consulting for campaigns, ensuring consistency and impact across all touchpoints.", tag: "Strategy", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-checking-notes_23-2148128334.jpg", imageAlt: "creative direction visual strategy brainstorm"},
{
id: "digital-visuals",
title: "High-Quality Digital Visuals",
description:
"Premium illustrations, animations, and custom graphics that elevate your digital presence and storytelling.",
tag: "Visual",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-representation-blue-plastic-tableware-waste-young-woman_23-2148763387.jpg?_wi=1",
imageAlt: "digital illustration art graphic design",
},
id: "digital-visuals", title: "High-Quality Digital Visuals", description:
"Premium illustrations, animations, and custom graphics that elevate your digital presence and storytelling.", tag: "Visual", imageSrc: "http://img.b2bpic.net/free-photo/abstract-representation-blue-plastic-tableware-waste-young-woman_23-2148763387.jpg", imageAlt: "digital illustration art graphic design"},
]}
animationType="slide-up"
textboxLayout="default"
@@ -192,45 +152,17 @@ export default function HomePage() {
useInvertedBackground={true}
products={[
{
id: "1",
brand: "TechFlow",
name: "Complete Brand Redesign",
price: "SaaS Platform",
rating: 5,
reviewCount: "4.9★",
imageSrc: "http://img.b2bpic.net/free-psd/webinar-conference-social-media-stories_23-2148870959.jpg?_wi=1",
imageAlt: "saas platform branding identity design",
},
id: "1", brand: "TechFlow", name: "Complete Brand Redesign", price: "SaaS Platform", rating: 5,
reviewCount: "4.9★", imageSrc: "http://img.b2bpic.net/free-psd/webinar-conference-social-media-stories_23-2148870959.jpg", imageAlt: "saas platform branding identity design"},
{
id: "2",
brand: "StartupXYZ",
name: "Modern Website Design",
price: "E-Commerce Platform",
rating: 5,
reviewCount: "4.8★",
imageSrc: "http://img.b2bpic.net/free-vector/blog-template-design_23-2149661298.jpg?_wi=1",
imageAlt: "ecommerce website design mockup modern",
},
id: "2", brand: "StartupXYZ", name: "Modern Website Design", price: "E-Commerce Platform", rating: 5,
reviewCount: "4.8★", imageSrc: "http://img.b2bpic.net/free-vector/blog-template-design_23-2149661298.jpg", imageAlt: "ecommerce website design mockup modern"},
{
id: "3",
brand: "GrowthCo",
name: "Social Media Campaign",
price: "Marketing Campaign",
rating: 5,
reviewCount: "5.0★",
imageSrc: "http://img.b2bpic.net/free-psd/charity-template-design_23-2150577819.jpg?_wi=1",
imageAlt: "social media campaign design mockup",
},
id: "3", brand: "GrowthCo", name: "Social Media Campaign", price: "Marketing Campaign", rating: 5,
reviewCount: "5.0★", imageSrc: "http://img.b2bpic.net/free-psd/charity-template-design_23-2150577819.jpg", imageAlt: "social media campaign design mockup"},
{
id: "4",
brand: "InnovateLab",
name: "Brand Identity System",
price: "Tech Startup",
rating: 5,
reviewCount: "4.9★",
imageSrc: "http://img.b2bpic.net/free-vector/neon-business-cards-concept_23-2148555808.jpg?_wi=1",
imageAlt: "tech startup brand identity design system",
},
id: "4", brand: "InnovateLab", name: "Brand Identity System", price: "Tech Startup", rating: 5,
reviewCount: "4.9★", imageSrc: "http://img.b2bpic.net/free-vector/neon-business-cards-concept_23-2148555808.jpg", imageAlt: "tech startup brand identity design system"},
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
@@ -250,83 +182,23 @@ export default function HomePage() {
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Chen, CEO of TechFlow",
date: "Date: 15 November 2024",
title: "Transformed our entire brand identity",
quote:
"OwnSelf Illustrations completely reimagined our brand from the ground up. Their strategic approach and creative excellence helped us stand out in a competitive market. Our new identity perfectly captures who we are.",
tag: "Brand Redesign",
avatarSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg",
avatarAlt: "Sarah Chen",
imageSrc: "http://img.b2bpic.net/free-photo/teammates-working-late-office_23-2148991368.jpg?_wi=1",
imageAlt: "tech company office workspace modern",
},
id: "1", name: "Sarah Chen, CEO of TechFlow", date: "Date: 15 November 2024", title: "Transformed our entire brand identity", quote:
"OwnSelf Illustrations completely reimagined our brand from the ground up. Their strategic approach and creative excellence helped us stand out in a competitive market. Our new identity perfectly captures who we are.", tag: "Brand Redesign", avatarSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg", avatarAlt: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/teammates-working-late-office_23-2148991368.jpg", imageAlt: "tech company office workspace modern"},
{
id: "2",
name: "Michael Rodriguez, Founder of StartupXYZ",
date: "Date: 28 October 2024",
title: "Best investment in our brand",
quote:
"We've got only good things to say about OwnSelf Illustrations. Their website design exceeded our expectations, and the attention to detail was remarkable. They truly understand modern design.",
tag: "Web Design",
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969905.jpg",
avatarAlt: "Michael Rodriguez",
imageSrc: "http://img.b2bpic.net/free-photo/joyous-coworkers-having-fun-vibrant-office-while-reviewing-financial-graphs_482257-126650.jpg?_wi=1",
imageAlt: "startup office collaborative workspace",
},
id: "2", name: "Michael Rodriguez, Founder of StartupXYZ", date: "Date: 28 October 2024", title: "Best investment in our brand", quote:
"We've got only good things to say about OwnSelf Illustrations. Their website design exceeded our expectations, and the attention to detail was remarkable. They truly understand modern design.", tag: "Web Design", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969905.jpg", avatarAlt: "Michael Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/joyous-coworkers-having-fun-vibrant-office-while-reviewing-financial-graphs_482257-126650.jpg", imageAlt: "startup office collaborative workspace"},
{
id: "3",
name: "Emily Johnson, Marketing Director of GrowthCo",
date: "Date: 10 October 2024",
title: "Creative excellence at every level",
quote:
"Working with OwnSelf Illustrations on our marketing campaign was a game-changer. Their visual designs captured our message perfectly and drove significant engagement across all channels.",
tag: "Marketing",
avatarSrc: "http://img.b2bpic.net/free-photo/woman-talking-phone-home_23-2148990135.jpg",
avatarAlt: "Emily Johnson",
imageSrc: "http://img.b2bpic.net/free-photo/empty-business-workplace-equipped-with-modern-tech-tools-serve-enterprise_482257-118685.jpg?_wi=1",
imageAlt: "marketing campaign strategy planning office",
},
id: "3", name: "Emily Johnson, Marketing Director of GrowthCo", date: "Date: 10 October 2024", title: "Creative excellence at every level", quote:
"Working with OwnSelf Illustrations on our marketing campaign was a game-changer. Their visual designs captured our message perfectly and drove significant engagement across all channels.", tag: "Marketing", avatarSrc: "http://img.b2bpic.net/free-photo/woman-talking-phone-home_23-2148990135.jpg", avatarAlt: "Emily Johnson", imageSrc: "http://img.b2bpic.net/free-photo/empty-business-workplace-equipped-with-modern-tech-tools-serve-enterprise_482257-118685.jpg", imageAlt: "marketing campaign strategy planning office"},
{
id: "4",
name: "David Park, CTO of InnovateLab",
date: "Date: 22 September 2024",
title: "Professional, creative, and reliable",
quote:
"OwnSelf Illustrations delivered exactly what we needed and more. Their team was collaborative, responsive, and brought tremendous creative vision to our brand identity project.",
tag: "Brand Strategy",
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-successful-middle-aged-business-leader_1262-5690.jpg",
avatarAlt: "David Park",
imageSrc: "http://img.b2bpic.net/free-photo/team-cybercriminals-fixing-computer-system-cyberattack_482257-90449.jpg?_wi=1",
imageAlt: "tech innovation lab office environment",
},
id: "4", name: "David Park, CTO of InnovateLab", date: "Date: 22 September 2024", title: "Professional, creative, and reliable", quote:
"OwnSelf Illustrations delivered exactly what we needed and more. Their team was collaborative, responsive, and brought tremendous creative vision to our brand identity project.", tag: "Brand Strategy", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-successful-middle-aged-business-leader_1262-5690.jpg", avatarAlt: "David Park", imageSrc: "http://img.b2bpic.net/free-photo/team-cybercriminals-fixing-computer-system-cyberattack_482257-90449.jpg", imageAlt: "tech innovation lab office environment"},
{
id: "5",
name: "Jessica Lee, CEO of DesignHub",
date: "Date: 05 September 2024",
title: "Exceptional quality and service",
quote:
"We've worked with many design agencies, but OwnSelf Illustrations stands out. Their commitment to quality, innovative thinking, and client satisfaction is truly unmatched.",
tag: "Full Service",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-businesswoman_23-2147838552.jpg",
avatarAlt: "Jessica Lee",
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-office-interior-design_23-2151826276.jpg?_wi=1",
imageAlt: "design studio workspace creative environment",
},
id: "5", name: "Jessica Lee, CEO of DesignHub", date: "Date: 05 September 2024", title: "Exceptional quality and service", quote:
"We've worked with many design agencies, but OwnSelf Illustrations stands out. Their commitment to quality, innovative thinking, and client satisfaction is truly unmatched.", tag: "Full Service", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-businesswoman_23-2147838552.jpg", avatarAlt: "Jessica Lee", imageSrc: "http://img.b2bpic.net/free-photo/minimalist-office-interior-design_23-2151826276.jpg", imageAlt: "design studio workspace creative environment"},
{
id: "6",
name: "James Wilson, Founder of CloudTech",
date: "Date: 18 August 2024",
title: "Elevated our brand presence significantly",
quote:
"From concept to launch, OwnSelf Illustrations guided us through every step. The results speak for themselves—our brand is now instantly recognizable and respected in the industry.",
tag: "Design Direction",
avatarSrc: "http://img.b2bpic.net/free-photo/contemplating-young-caucasian-man-holding-dairy-thinking_23-2148187202.jpg",
avatarAlt: "James Wilson",
imageSrc: "http://img.b2bpic.net/free-photo/empty-it-department-office-used-building-machine-learning-software_482257-124290.jpg?_wi=1",
imageAlt: "cloud technology infrastructure office",
},
id: "6", name: "James Wilson, Founder of CloudTech", date: "Date: 18 August 2024", title: "Elevated our brand presence significantly", quote:
"From concept to launch, OwnSelf Illustrations guided us through every step. The results speak for themselves—our brand is now instantly recognizable and respected in the industry.", tag: "Design Direction", avatarSrc: "http://img.b2bpic.net/free-photo/contemplating-young-caucasian-man-holding-dairy-thinking_23-2148187202.jpg", avatarAlt: "James Wilson", imageSrc: "http://img.b2bpic.net/free-photo/empty-it-department-office-used-building-machine-learning-software_482257-124290.jpg", imageAlt: "cloud technology infrastructure office"},
]}
/>
</div>
@@ -342,53 +214,43 @@ export default function HomePage() {
useInvertedBackground={true}
members={[
{
id: "1",
name: "Alex Morgan",
role: "Creative Director",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-choosing-cloths-menswear-shop_1303-30869.jpg?_wi=1",
imageAlt: "Alex Morgan",
},
id: "1", name: "Alex Morgan", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/young-man-choosing-cloths-menswear-shop_1303-30869.jpg", imageAlt: "Alex Morgan"},
{
id: "2",
name: "Jordan Blake",
role: "Brand Strategist",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-tablet_1098-135.jpg?_wi=1",
imageAlt: "Jordan Blake",
},
id: "2", name: "Jordan Blake", role: "Brand Strategist", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-tablet_1098-135.jpg", imageAlt: "Jordan Blake"},
{
id: "3",
name: "Casey Rivera",
role: "UI/UX Designer",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businesswoman-touching-her-face_1098-3321.jpg?_wi=1",
imageAlt: "Casey Rivera",
},
id: "3", name: "Casey Rivera", role: "UI/UX Designer", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businesswoman-touching-her-face_1098-3321.jpg", imageAlt: "Casey Rivera"},
{
id: "4",
name: "Taylor Kim",
role: "Lead Developer",
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1702.jpg?_wi=1",
imageAlt: "Taylor Kim",
},
id: "4", name: "Taylor Kim", role: "Lead Developer", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1702.jpg", imageAlt: "Taylor Kim"},
{
id: "5",
name: "Morgan Hayes",
role: "Illustrator",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-tablet_23-2149927579.jpg?_wi=1",
imageAlt: "Morgan Hayes",
},
id: "5", name: "Morgan Hayes", role: "Illustrator", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-tablet_23-2149927579.jpg", imageAlt: "Morgan Hayes"},
{
id: "6",
name: "Quinn Foster",
role: "Project Manager",
imageSrc: "http://img.b2bpic.net/free-photo/elderly-business-woman-office-isolated_1303-21368.jpg?_wi=1",
imageAlt: "Quinn Foster",
},
id: "6", name: "Quinn Foster", role: "Project Manager", imageSrc: "http://img.b2bpic.net/free-photo/elderly-business-woman-office-isolated_1303-21368.jpg", imageAlt: "Quinn Foster"},
]}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Let's Start Your Project"
description="Tell us about your business and what you need designed. Our team will review your inquiry and get back to you within 24 hours."
inputs={[
{ name: "company", type: "text", placeholder: "Company Name", required: true },
{ name: "email", type: "email", placeholder: "Your Email", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
{ name: "budget", type: "text", placeholder: "Project Budget Range", required: false },
]}
textarea={{ name: "message", placeholder: "Describe your project, goals, and what you're looking to design...", rows: 6, required: true }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/people-working-together-animation-studio_23-2149207983.jpg"
imageAlt="Creative workspace"
mediaAnimation="slide-up"
mediaPosition="right"
buttonText="Send Inquiry"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="OwnSelf Illustrations"

68
src/components/shared/SvgTextLogo/SvgTextLogo.tsx
View File

@@ -1,51 +1,45 @@
"use client";
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
import React from 'react';
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
text: string;
className?: string;
fontSize?: number;
fontWeight?: number | string;
letterSpacing?: number;
dominantBaseline?: 'auto' | 'middle' | 'hanging' | 'mathematical' | 'central' | 'text-before-edge' | 'text-after-edge';
textAnchor?: 'start' | 'middle' | 'end';
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
className = '',
fontSize = 32,
fontWeight = 700,
letterSpacing = 0,
dominantBaseline = 'middle',
textAnchor = 'middle',
}) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.5}`}
className={`w-full h-auto ${className}`}
xmlns="http://www.w3.org/2000/svg"
>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
x="50%"
y="50%"
fontSize={fontSize}
fontWeight={fontWeight}
letterSpacing={letterSpacing}
dominantBaseline={dominantBaseline}
textAnchor={textAnchor}
fill="currentColor"
fontFamily="system-ui, -apple-system, sans-serif"
>
{logoText}
{text}
</text>
</svg>
);
});
};
SvgTextLogo.displayName = "SvgTextLogo";
export default SvgTextLogo;
export default SvgTextLogo;