Skip to content

Commit 597b6b3

Browse files
PrashantUnityPrashantUnity
committed
Fixed hompage
1 parent 696df99 commit 597b6b3

File tree

2 files changed

+59
-98
lines changed

2 files changed

+59
-98
lines changed

‎TextHub/Components/Shared/FeatureCardComponent.razor‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@using Microsoft.AspNetCore.Components
2+
3+
<div class="group tool-card relative overflow-hidden animate-fade-in" style="animation-delay: @(AnimationDelay)ms;">
4+
<div class="absolute inset-0 bg-gradient-to-br from-primary/10 to-secondary/10 opacity-50 group-hover:opacity-70 transition-opacity"></div>
5+
<div class="relative z-10 p-6">
6+
<div class="text-center mb-4">
7+
<div class="w-16 h-16 mx-auto mb-4 bg-background/80 rounded-xl flex items-center justify-center group-hover:animate-glow-pulse">
8+
@((MarkupString)Icon)
9+
</div>
10+
<h3 class="text-lg sm:text-xl font-semibold mb-3 group-hover:text-primary transition-colors">@Title</h3>
11+
</div>
12+
<p class="text-sm sm:text-base text-muted-foreground text-center leading-relaxed">@Description</p>
13+
</div>
14+
</div>
15+
16+
@code {
17+
[Parameter, EditorRequired]
18+
public string Title { get; set; } = string.Empty;
19+
20+
[Parameter, EditorRequired]
21+
public string Description { get; set; } = string.Empty;
22+
23+
[Parameter, EditorRequired]
24+
public string Icon { get; set; } = string.Empty;
25+
26+
[Parameter]
27+
public int AnimationDelay { get; set; } = 0;
28+
}

‎TextHub/Components/Shared/WhyChooseUs.razor‎

Lines changed: 31 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,35 @@
1-
<section id="features" class="py-16 md:py-24 px-4 bg-muted/20 relative overflow-hidden">
2-
<!-- Background decoration -->
3-
<div class="absolute inset-0 -z-10">
4-
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-primary/5 rounded-full blur-3xl"></div>
5-
</div>
6-
7-
<div class="container mx-auto text-center relative z-10">
8-
<div class="mb-16 md:mb-20">
9-
<h2 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-6 px-4 animate-fade-in">
10-
Why Choose <span class="text-gradient">Text Hub?</span>
11-
</h2>
12-
<p class="text-lg text-muted-foreground max-w-2xl mx-auto px-4 animate-fade-in" style="animation-delay: 0.2s;">
13-
We've built the most comprehensive and user-friendly text processing platform on the web.
14-
</p>
15-
</div>
16-
17-
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12 max-w-6xl mx-auto">
18-
<!-- Feature 1 -->
19-
<div class="group px-6 py-8 bg-card/50 backdrop-blur-sm rounded-2xl border border-border/50 hover:border-primary/20 transition-all duration-300 hover:scale-105 hover:shadow-lg animate-fade-in">
20-
<div class="w-16 h-16 mx-auto mb-6 bg-primary/10 rounded-2xl flex items-center justify-center group-hover:bg-primary/20 transition-colors">
21-
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap text-primary">
22-
<polygon points="13,2 3,14 12,14 11,22 21,10 12,10"></polygon>
23-
</svg>
24-
</div>
25-
<h3 class="text-xl font-bold mb-4 text-foreground">Lightning Fast</h3>
26-
<p class="text-muted-foreground leading-relaxed">All tools work instantly in your browser. No waiting, no loading, no server delays. Get results in milliseconds.</p>
27-
</div>
28-
29-
<!-- Feature 2 -->
30-
<div class="group px-6 py-8 bg-card/50 backdrop-blur-sm rounded-2xl border border-border/50 hover:border-primary/20 transition-all duration-300 hover:scale-105 hover:shadow-lg animate-fade-in" style="animation-delay: 0.2s;">
31-
<div class="w-16 h-16 mx-auto mb-6 bg-primary/10 rounded-2xl flex items-center justify-center group-hover:bg-primary/20 transition-colors">
32-
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check text-primary">
33-
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
34-
<path d="m9 12 2 2 4-4"></path>
35-
</svg>
36-
</div>
37-
<h3 class="text-xl font-bold mb-4 text-foreground">100% Private</h3>
38-
<p class="text-muted-foreground leading-relaxed">Your text never leaves your browser. Complete privacy guaranteed with client-side processing and zero data collection.</p>
39-
</div>
40-
41-
<!-- Feature 3 -->
42-
<div class="group px-6 py-8 bg-card/50 backdrop-blur-sm rounded-2xl border border-border/50 hover:border-primary/20 transition-all duration-300 hover:scale-105 hover:shadow-lg animate-fade-in" style="animation-delay: 0.4s;">
43-
<div class="w-16 h-16 mx-auto mb-6 bg-primary/10 rounded-2xl flex items-center justify-center group-hover:bg-primary/20 transition-colors">
44-
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gem text-primary">
45-
<path d="M6 3h12l4 6-10 13L2 9l4-6z"></path>
46-
<path d="M11 3 8 9l4 13 4-13-3-6"></path>
47-
<path d="M2 9h20"></path>
48-
</svg>
49-
</div>
50-
<h3 class="text-xl font-bold mb-4 text-foreground">Free Forever</h3>
51-
<p class="text-muted-foreground leading-relaxed">All tools are completely free to use. No limits, no sign-ups required, no hidden costs. Access everything without restrictions.</p>
52-
</div>
53-
</div>
1+
<section id="features" class="py-16 md:py-24 px-4 bg-muted/5">
2+
<div class="container mx-auto max-w-7xl">
3+
<div class="mb-16 md:mb-20 animate-fade-in" style="animation-delay: 0ms;">
4+
<SectionHeader
5+
Title="Why Choose Text Hub?"
6+
Description="We've built the most comprehensive and user-friendly text processing platform on the web."
7+
Icon="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;28&quot; height=&quot;28&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;text-primary&quot;&gt;&lt;path d=&quot;M9 12l2 2 4-4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M21 12c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M3 12c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 21c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 3c.552 0 1-.448 1-1s-.448-1-1-1-1 .448-1 1 .448 1 1 1z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;" />
548

55-
<!-- Additional features -->
56-
<div class="mt-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-4xl mx-auto animate-fade-in" style="animation-delay: 0.6s;">
57-
<div class="text-center">
58-
<div class="w-12 h-12 mx-auto mb-4 bg-secondary/10 rounded-xl flex items-center justify-center">
59-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone text-secondary">
60-
<rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect>
61-
<path d="M12 18h.01"></path>
62-
</svg>
63-
</div>
64-
<h4 class="font-semibold text-foreground mb-2">Mobile Friendly</h4>
65-
<p class="text-sm text-muted-foreground">Works perfectly on all devices</p>
66-
</div>
67-
68-
<div class="text-center">
69-
<div class="w-12 h-12 mx-auto mb-4 bg-secondary/10 rounded-xl flex items-center justify-center">
70-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code text-secondary">
71-
<polyline points="16 18 22 12 16 6"></polyline>
72-
<polyline points="8 6 2 12 8 18"></polyline>
73-
</svg>
74-
</div>
75-
<h4 class="font-semibold text-foreground mb-2">Developer Ready</h4>
76-
<p class="text-sm text-muted-foreground">Perfect for coding workflows</p>
77-
</div>
78-
79-
<div class="text-center">
80-
<div class="w-12 h-12 mx-auto mb-4 bg-secondary/10 rounded-xl flex items-center justify-center">
81-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw text-secondary">
82-
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
83-
<path d="M21 3v5h-5"></path>
84-
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
85-
<path d="M3 21v-5h5"></path>
86-
</svg>
87-
</div>
88-
<h4 class="font-semibold text-foreground mb-2">Always Updated</h4>
89-
<p class="text-sm text-muted-foreground">Regular improvements and new tools</p>
90-
</div>
91-
92-
<div class="text-center">
93-
<div class="w-12 h-12 mx-auto mb-4 bg-secondary/10 rounded-xl flex items-center justify-center">
94-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart text-secondary">
95-
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7z"></path>
96-
</svg>
97-
</div>
98-
<h4 class="font-semibold text-foreground mb-2">Made with Love</h4>
99-
<p class="text-sm text-muted-foreground">Crafted with attention to detail</p>
9+
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
10+
<FeatureCardComponent
11+
Title="Lightning Fast"
12+
Description="All tools work instantly in your browser. No waiting, no loading, no server delays. Get results in milliseconds."
13+
Icon="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;text-primary&quot;&gt;&lt;polygon points=&quot;13,2 3,14 12,14 11,22 21,10 12,10&quot;&gt;&lt;/polygon&gt;&lt;/svg&gt;"
14+
AnimationDelay="100" />
15+
16+
<FeatureCardComponent
17+
Title="100% Private"
18+
Description="Your text never leaves your browser. Complete privacy guaranteed with client-side processing and zero data collection."
19+
Icon="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;text-primary&quot;&gt;&lt;path d=&quot;M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;m9 12 2 2 4-4&quot;&gt;&lt;/path&gt;&lt;/svg&gt;"
20+
AnimationDelay="200" />
21+
22+
<FeatureCardComponent
23+
Title="Free Forever"
24+
Description="All tools are completely free to use. No limits, no sign-ups required, no hidden costs. Access everything without restrictions."
25+
Icon="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;text-primary&quot;&gt;&lt;path d=&quot;M6 3h12l4 6-10 13L2 9l4-6z&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M11 3 8 9l4 13 4-13-3-6&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M2 9h20&quot;&gt;&lt;/path&gt;&lt;/svg&gt;"
26+
AnimationDelay="300" />
27+
28+
<FeatureCardComponent
29+
Title="Data-Driven"
30+
Description="We use Google Analytics to understand user needs and continuously improve our tools based on real usage patterns."
31+
Icon="&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;text-primary&quot;&gt;&lt;path d=&quot;M3 3v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M8 21h8&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M12 17v4&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9 9h6&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M9 13h6&quot;&gt;&lt;/path&gt;&lt;/svg&gt;"
32+
AnimationDelay="400" />
10033
</div>
10134
</div>
10235
</div>

0 commit comments

Comments
 (0)