Merge version_1 into main #2
@@ -20,7 +20,7 @@ export default function LandingPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="mediumLarge"
|
||||
background="floatingGradient"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -45,7 +45,7 @@ export default function LandingPage() {
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Learn code deeply, not just fast"
|
||||
description="SocraticDev combines AI-guided questioning, deterministic code visualization, and spaced repetition to transform how developers master DSA, review real projects, and build lasting conceptual clarity—closing the gap between practice and understanding"
|
||||
background={{ variant: "floatingGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
tag="AI-Powered Learning"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
@@ -55,12 +55,12 @@ export default function LandingPage() {
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/a-clean-modern-software-dashboard-interf-1773245314675-77a0c40c.png?_wi=1", imageAlt: "A clean, modern software dashboard interface showing code execution tracing with visual call graphs." },
|
||||
{ id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/interactive-practice-problem-interface-w-1773245314163-b916193a.png?_wi=1", imageAlt: "Interactive practice problem interface with syntax highlighting, input area, and real-time feedback." },
|
||||
{ id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/spaced-repetition-flashcard-system-inter-1773245314238-1f9d188d.png?_wi=1", imageAlt: "Spaced repetition flashcard system interface showing algorithm concepts with visual diagrams. Featur" },
|
||||
{ id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/progress-analytics-dashboard-showing-lea-1773245314758-c0750f30.png?_wi=1", imageAlt: "Progress analytics dashboard showing learning metrics, mastery levels, performance trends, and time-" },
|
||||
{ id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/ai-guided-question-interface-with-socrat-1773245315580-e23016c6.png?_wi=1", imageAlt: "AI-guided question interface with Socratic method conversation flow. Shows AI assistant providing gu" },
|
||||
{ id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/codebase-understanding-interface-showing-1773245314350-cccd0889.png?_wi=1", imageAlt: "Codebase understanding interface showing project architecture visualization, dependency graphs, and " }
|
||||
{ id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/a-clean-modern-software-dashboard-interf-1773245314675-77a0c40c.png", imageAlt: "A clean, modern software dashboard interface showing code execution tracing with visual call graphs." },
|
||||
{ id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/interactive-practice-problem-interface-w-1773245314163-b916193a.png", imageAlt: "Interactive practice problem interface with syntax highlighting, input area, and real-time feedback." },
|
||||
{ id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/spaced-repetition-flashcard-system-inter-1773245314238-1f9d188d.png", imageAlt: "Spaced repetition flashcard system interface showing algorithm concepts with visual diagrams. Featur" },
|
||||
{ id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/progress-analytics-dashboard-showing-lea-1773245314758-c0750f30.png", imageAlt: "Progress analytics dashboard showing learning metrics, mastery levels, performance trends, and time-" },
|
||||
{ id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/ai-guided-question-interface-with-socrat-1773245315580-e23016c6.png", imageAlt: "AI-guided question interface with Socratic method conversation flow. Shows AI assistant providing gu" },
|
||||
{ id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/codebase-understanding-interface-showing-1773245314350-cccd0889.png", imageAlt: "Codebase understanding interface showing project architecture visualization, dependency graphs, and " }
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
@@ -106,23 +106,23 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Ask: Socratic Guidance", description: "AI asks guiding questions that nudge your thinking without giving away answers. Each question is designed to unlock the next level of understanding.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/ai-guided-question-interface-with-socrat-1773245315580-e23016c6.png?_wi=2", imageAlt: "AI-guided question interface" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/interactive-practice-problem-interface-w-1773245314163-b916193a.png?_wi=2", imageAlt: "Interactive practice interface" }
|
||||
title: "Ask: Socratic Guidance", description: "AI asks guiding questions that nudge your thinking without giving away answers. Each question is designed to unlock the next level of understanding.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/ai-guided-question-interface-with-socrat-1773245315580-e23016c6.png", imageAlt: "AI-guided question interface" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/interactive-practice-problem-interface-w-1773245314163-b916193a.png", imageAlt: "Interactive practice interface" }
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Practice: Real Coding Challenges", description: "Write real code with instant feedback on execution. See your variables change in real-time, understand the flow of your algorithm as it runs.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/interactive-practice-problem-interface-w-1773245314163-b916193a.png?_wi=3", imageAlt: "Practice interface" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/a-clean-modern-software-dashboard-interf-1773245314675-77a0c40c.png?_wi=2", imageAlt: "Dashboard interface" }
|
||||
title: "Practice: Real Coding Challenges", description: "Write real code with instant feedback on execution. See your variables change in real-time, understand the flow of your algorithm as it runs.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/interactive-practice-problem-interface-w-1773245314163-b916193a.png", imageAlt: "Practice interface" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/a-clean-modern-software-dashboard-interf-1773245314675-77a0c40c.png", imageAlt: "Dashboard interface" }
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Visualize: Deterministic Execution", description: "Watch your code execute as animated call graphs. Every function call, every data structure mutation is visible—transforming abstract logic into concrete understanding.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/a-clean-modern-software-dashboard-interf-1773245314675-77a0c40c.png?_wi=3", imageAlt: "Execution visualization" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/progress-analytics-dashboard-showing-lea-1773245314758-c0750f30.png?_wi=2", imageAlt: "Analytics dashboard" }
|
||||
title: "Visualize: Deterministic Execution", description: "Watch your code execute as animated call graphs. Every function call, every data structure mutation is visible—transforming abstract logic into concrete understanding.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/a-clean-modern-software-dashboard-interf-1773245314675-77a0c40c.png", imageAlt: "Execution visualization" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/progress-analytics-dashboard-showing-lea-1773245314758-c0750f30.png", imageAlt: "Analytics dashboard" }
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Review: Spaced Repetition Flashcards", description: "Revisit key concepts through adaptive flashcards that appear exactly when you're most likely to forget them. Build lasting neural pathways.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/spaced-repetition-flashcard-system-inter-1773245314238-1f9d188d.png?_wi=2", imageAlt: "Flashcard system" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/codebase-understanding-interface-showing-1773245314350-cccd0889.png?_wi=2", imageAlt: "Codebase interface" }
|
||||
title: "Review: Spaced Repetition Flashcards", description: "Revisit key concepts through adaptive flashcards that appear exactly when you're most likely to forget them. Build lasting neural pathways.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/spaced-repetition-flashcard-system-inter-1773245314238-1f9d188d.png", imageAlt: "Flashcard system" },
|
||||
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/codebase-understanding-interface-showing-1773245314350-cccd0889.png", imageAlt: "Codebase interface" }
|
||||
}
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
@@ -170,19 +170,19 @@ export default function LandingPage() {
|
||||
id: "1", name: "Sarah Chen, Software Engineer at TechCorp", date: "Date: 15 November 2024", title: "Finally passed my FAANG interviews with confidence", quote: "I practiced 200 LeetCode problems without truly understanding the patterns. SocraticDev changed that—the visualizations showed me WHY algorithms work, not just HOW to code them. I aced my Google and Meta interviews.", tag: "DSA Mastery", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-young-softwar-1773245313115-a0e5e053.png", avatarAlt: "Sarah Chen avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/developer-at-workstation-successfully-so-1773245313649-dfe98414.png", imageAlt: "Developer at workstation solving complex problems"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Marcus Rodriguez, Tech Lead at CloudScale", date: "Date: 12 November 2024", title: "Onboarding new team members has never been faster", quote: "Our developers now understand our complex microservices architecture in days instead of weeks. The code visualization and deterministic execution tracing made dependency understanding trivial. Code reviews are now focused on design, not basic comprehension.", tag: "Team Efficiency", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-tech-team-lea-1773245313353-c4b92b48.png", avatarAlt: "Marcus Rodriguez avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/code-review-session-showing-understandin-1773245314529-4c159256.png?_wi=1", imageAlt: "Code review session showing team understanding"
|
||||
id: "2", name: "Marcus Rodriguez, Tech Lead at CloudScale", date: "Date: 12 November 2024", title: "Onboarding new team members has never been faster", quote: "Our developers now understand our complex microservices architecture in days instead of weeks. The code visualization and deterministic execution tracing made dependency understanding trivial. Code reviews are now focused on design, not basic comprehension.", tag: "Team Efficiency", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-tech-team-lea-1773245313353-c4b92b48.png", avatarAlt: "Marcus Rodriguez avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/code-review-session-showing-understandin-1773245314529-4c159256.png", imageAlt: "Code review session showing team understanding"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Alex Patel, Hackathon Winner", date: "Date: 8 November 2024", title: "Outthinking competitors under pressure", quote: "In hackathons, time pressure creates panic. But with SocraticDev's mental models and visualization tricks, I could reason through complex problems fast. It's like having a deep intuition for algorithms instead of surface-level pattern matching.", tag: "Competition Ready", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-data-scientis-1773245313458-41947989.png", avatarAlt: "Alex Patel avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/hackathon-or-competition-scene-showing-d-1773245314251-4f07d06f.png?_wi=1", imageAlt: "Hackathon competition scene with confident developer"
|
||||
id: "3", name: "Alex Patel, Hackathon Winner", date: "Date: 8 November 2024", title: "Outthinking competitors under pressure", quote: "In hackathons, time pressure creates panic. But with SocraticDev's mental models and visualization tricks, I could reason through complex problems fast. It's like having a deep intuition for algorithms instead of surface-level pattern matching.", tag: "Competition Ready", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-data-scientis-1773245313458-41947989.png", avatarAlt: "Alex Patel avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/hackathon-or-competition-scene-showing-d-1773245314251-4f07d06f.png", imageAlt: "Hackathon competition scene with confident developer"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Jamie Kim, Bootcamp Graduate", date: "Date: 5 November 2024", title: "From bootcamp grad to junior engineer in 6 months", quote: "The spaced repetition and Socratic approach filled gaps that bootcamp couldn't. I didn't just memorize solutions—I understood principles. My first junior role felt natural because I had real depth, not just breadth.", tag: "Career Launch", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-bootcamp-grad-1773245313067-072df8ab.png", avatarAlt: "Jamie Kim avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/career-progression-visualization-showing-1773245314403-2d28aa6a.png", imageAlt: "Career progression visualization showing growth"
|
||||
},
|
||||
{
|
||||
id: "5", name: "Dr. Elena Vasquez, Computer Science Professor", date: "Date: 1 November 2024", title: "Better outcomes than traditional CS courses", quote: "Our students using SocraticDev showed 40% better performance on algorithm design exams. The active visualization and guided inquiry transform passive learning into deep comprehension.", tag: "Education Innovation", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-young-softwar-1773245313115-a0e5e053.png", avatarAlt: "Dr. Elena Vasquez avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/hackathon-or-competition-scene-showing-d-1773245314251-4f07d06f.png?_wi=2", imageAlt: "Educational achievement visualization"
|
||||
id: "5", name: "Dr. Elena Vasquez, Computer Science Professor", date: "Date: 1 November 2024", title: "Better outcomes than traditional CS courses", quote: "Our students using SocraticDev showed 40% better performance on algorithm design exams. The active visualization and guided inquiry transform passive learning into deep comprehension.", tag: "Education Innovation", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-young-softwar-1773245313115-a0e5e053.png", avatarAlt: "Dr. Elena Vasquez avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/hackathon-or-competition-scene-showing-d-1773245314251-4f07d06f.png", imageAlt: "Educational achievement visualization"
|
||||
},
|
||||
{
|
||||
id: "6", name: "David Kim, Engineering Manager at FinScale", date: "Date: 28 October 2024", title: "Our engineers code more confidently", quote: "We saw a 35% reduction in code review cycles and our team's confidence in tackling complex features increased dramatically. Understanding codebases deeply is now a norm, not an exception.", tag: "Team Performance", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-tech-team-lea-1773245313353-c4b92b48.png", avatarAlt: "David Kim avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/code-review-session-showing-understandin-1773245314529-4c159256.png?_wi=2", imageAlt: "Team code review session"
|
||||
id: "6", name: "David Kim, Engineering Manager at FinScale", date: "Date: 28 October 2024", title: "Our engineers code more confidently", quote: "We saw a 35% reduction in code review cycles and our team's confidence in tackling complex features increased dramatically. Understanding codebases deeply is now a norm, not an exception.", tag: "Team Performance", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/professional-headshot-of-a-tech-team-lea-1773245313353-c4b92b48.png", avatarAlt: "David Kim avatar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao3hta0rUQ0cvG87p8mnaok96v/code-review-session-showing-understandin-1773245314529-4c159256.png", imageAlt: "Team code review session"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
@@ -218,7 +218,7 @@ export default function LandingPage() {
|
||||
{ text: "Start Free Trial", href: "#" },
|
||||
{ text: "Schedule Demo", href: "#" }
|
||||
]}
|
||||
background={{ variant: "floatingGradient" }}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,28 @@
|
||||
"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;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({ text, className = '' }) => {
|
||||
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 200 100"
|
||||
className={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%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="central"
|
||||
fontSize="24"
|
||||
fontWeight="bold"
|
||||
fill="currentColor"
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
|
||||
export default SvgTextLogo;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user