coderic.com/index.html at master · Coderic/coderic.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
---
layout: default
title: "Coderic"
---

<!-- Enterprise Hero -->
            <section class="relative pt-32 pb-24 overflow-hidden">
                <div class="max-w-7xl mx-auto px-6 relative z-10">
                    <div class="max-w-4xl animate-slide-up opacity-0" style="animation-delay: 0.1s;">
                        <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-coderic-600/10 border border-coderic-600/20 text-coderic-500 text-xs font-semibold tracking-widest uppercase mb-6 shadow-[0_0_15px_rgba(240,65,0,0.2)]">
                            <span class="w-1.5 h-1.5 rounded-full bg-coderic-500 animate-pulse"></span>
                            The Prodaric System
                        </div>
                        <h1 class="text-5xl md:text-7xl lg:text-8xl font-display font-bold leading-tight mb-8">
                            Uncompromising <span class="text-transparent bg-clip-text bg-gradient-to-r from-coderic-400 to-coderic-600">Enterprise</span> Scale.
                        </h1>
                        <p class="text-lg md:text-2xl text-gray-300 mb-12 max-w-3xl leading-relaxed font-light">
                            The backbone of LATAM's largest operations. Replace fragmented systems with the Prodaric single-pane infrastructure: ERP, CRM, industrial manufacturing, and global telemetry.
                        </p>

                        <div class="flex flex-col sm:flex-row gap-5">
                            <a href="#" class="px-8 py-4 rounded-full bg-coderic-600 text-base font-bold hover:bg-coderic-500 transition-colors flex items-center justify-center gap-2 shadow-[0_0_30px_rgba(240,65,0,0.4)] text-lg">
                                Deploy Architecture <i class="ph-bold ph-arrow-right"></i>
                            </a>
                            <a href="#" class="px-8 py-4 rounded-full border border-surface-border bg-surface-panel hover:bg-surface-border text-base transition-colors flex items-center justify-center font-bold gap-2 text-lg">
                                Contact Master Partners <i class="ph-bold ph-handshake"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 6-Pillar Operational Grid -->
            <section class="py-24 border-t border-surface-border bg-gradient-to-b from-black to-[#050505]">
                <div class="max-w-7xl mx-auto px-6">
                    <div class="mb-16">
                        <h2 class="text-3xl md:text-4xl font-display font-bold text-base mb-4">Core Operational Frameworks</h2>
                        <p class="text-muted max-w-2xl text-lg">From human capital to robotic assembly lines, the Prodaric suite maintains absolute sovereignty over your operational data through agnostic on-premise deployments.</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

                        <!-- Card 1 -->
                        <div class="glass-panel p-8 group hover:-translate-y-2 hover:border-coderic-600/30 transition-all duration-300 relative overflow-hidden flex flex-col h-full">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-coderic-600/5 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
                            <div class="w-14 h-14 rounded-xl bg-surface border border-surface-border flex items-center justify-center mb-6 relative z-10 group-hover:bg-coderic-600/10 group-hover:border-coderic-600/50 transition-colors">
                                <i class="ph ph-buildings text-3xl text-gray-300 group-hover:text-coderic-500 transition-colors"></i>
                            </div>
                            <h3 class="text-xl font-display font-semibold mb-3">Enterprise ERP</h3>
                            <p class="text-muted text-sm leading-relaxed mb-6 flex-grow">
                                Unified operational management. Natively handles complex LATAM procurement models, advanced multi-country human capital (HRM) orchestration, and frictionless inventory routing.
                            </p>
                            <a href="#" class="text-coderic-500 text-sm font-bold flex items-center gap-1 group-hover:translate-x-1 transition-transform w-max">Explore ERP <i class="ph-bold ph-arrow-right"></i></a>
                        </div>

                        <!-- Card 2 -->
                        <div class="glass-panel p-8 group hover:-translate-y-2 hover:border-coderic-600/30 transition-all duration-300 relative overflow-hidden flex flex-col h-full">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-coderic-600/5 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
                            <div class="w-14 h-14 rounded-xl bg-surface border border-surface-border flex items-center justify-center mb-6 relative z-10 group-hover:bg-coderic-600/10 group-hover:border-coderic-600/50 transition-colors">
                                <i class="ph ph-shopping-cart text-3xl text-gray-300 group-hover:text-coderic-500 transition-colors"></i>
                            </div>
                            <h3 class="text-xl font-display font-semibold mb-3">CRM & Commerce</h3>
                            <p class="text-muted text-sm leading-relaxed mb-6 flex-grow">
                                End-to-end B2B revenue and relationship automation. Synchronize corporate sales forces with deep customer experience portals and customized procurement storefronts.
                            </p>
                            <a href="#" class="text-coderic-500 text-sm font-bold flex items-center gap-1 group-hover:translate-x-1 transition-transform w-max">Explore CRM <i class="ph-bold ph-arrow-right"></i></a>
                        </div>

                        <!-- Card 3 -->
                        <div class="glass-panel p-8 group hover:-translate-y-2 hover:border-coderic-600/30 transition-all duration-300 relative overflow-hidden flex flex-col h-full">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-coderic-600/5 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
                            <div class="w-14 h-14 rounded-xl bg-surface border border-surface-border flex items-center justify-center mb-6 relative z-10 group-hover:bg-coderic-600/10 group-hover:border-coderic-600/50 transition-colors">
                                <i class="ph ph-hard-drives text-3xl text-gray-300 group-hover:text-coderic-500 transition-colors"></i>
                            </div>
                            <h3 class="text-xl font-display font-semibold mb-3">Core Infrastructure</h3>
                            <p class="text-muted text-sm leading-relaxed mb-6 flex-grow">
                                The Prodaric Server environment. Absolute data sovereignty via orchestrating high-availability clusters and robust on-premise bare-metal deployment topologies.
                            </p>
                            <a href="#" class="text-coderic-500 text-sm font-bold flex items-center gap-1 group-hover:translate-x-1 transition-transform w-max">Explore Server <i class="ph-bold ph-arrow-right"></i></a>
                        </div>

                        <!-- Card 4 -->
                        <div class="glass-panel p-8 group hover:-translate-y-2 hover:border-coderic-600/30 transition-all duration-300 relative overflow-hidden flex flex-col h-full">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-coderic-600/5 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
                            <div class="w-14 h-14 rounded-xl bg-surface border border-surface-border flex items-center justify-center mb-6 relative z-10 group-hover:bg-coderic-600/10 group-hover:border-coderic-600/50 transition-colors">
                                <i class="ph ph-factory text-3xl text-gray-300 group-hover:text-coderic-500 transition-colors"></i>
                            </div>
                            <h3 class="text-xl font-display font-semibold mb-3">Supply Chain & IoT</h3>
                            <p class="text-muted text-sm leading-relaxed mb-6 flex-grow">
                                Powered by Prodaric Process. Real-time industrial manufacturing execution, autonomous logistics routing, and embedded IoT sensors connecting physical assets to digital logic.
                            </p>
                            <a href="#" class="text-coderic-500 text-sm font-bold flex items-center gap-1 group-hover:translate-x-1 transition-transform w-max">Explore SC <i class="ph-bold ph-arrow-right"></i></a>
                        </div>

                        <!-- Card 5 -->
                        <div class="glass-panel p-8 group hover:-translate-y-2 hover:border-coderic-600/30 transition-all duration-300 relative overflow-hidden flex flex-col h-full">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-coderic-600/5 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
                            <div class="w-14 h-14 rounded-xl bg-surface border border-surface-border flex items-center justify-center mb-6 relative z-10 group-hover:bg-coderic-600/10 group-hover:border-coderic-600/50 transition-colors">
                                <i class="ph ph-terminal-window text-3xl text-gray-300 group-hover:text-coderic-500 transition-colors"></i>
                            </div>
                            <h3 class="text-xl font-display font-semibold mb-3">Enterprise Development</h3>
                            <p class="text-muted text-sm leading-relaxed mb-6 flex-grow">
                                Expand your corporate capabilities in-house using the Coderic Core Framework and the dedicated Prodaric IDE. Rapidly build microservices without breaching core immutability.
                            </p>
                            <a href="#" class="text-coderic-500 text-sm font-bold flex items-center gap-1 group-hover:translate-x-1 transition-transform w-max">Explore Framework <i class="ph-bold ph-arrow-right"></i></a>
                        </div>

                        <!-- Card 6 -->
                        <div class="glass-panel p-8 group hover:-translate-y-2 hover:border-coderic-600/30 transition-all duration-300 relative overflow-hidden flex flex-col h-full">
                            <div class="absolute top-0 right-0 w-32 h-32 bg-coderic-600/5 rounded-bl-[100px] -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
                            <div class="w-14 h-14 rounded-xl bg-surface border border-surface-border flex items-center justify-center mb-6 relative z-10 group-hover:bg-coderic-600/10 group-hover:border-coderic-600/50 transition-colors">
                                <i class="ph ph-handshake text-3xl text-gray-300 group-hover:text-coderic-500 transition-colors"></i>
                            </div>
                            <h3 class="text-xl font-display font-semibold mb-3">Partner Ecosystem</h3>
                            <p class="text-muted text-sm leading-relaxed mb-6 flex-grow">
                                Master execution requires elite operators. We construct the infrastructure; our globally certified "Prodaric Agencies" execute the on-ground integrations, consulting, and SLAs.
                            </p>
                            <a href="#" class="text-coderic-500 text-sm font-bold flex items-center gap-1 group-hover:translate-x-1 transition-transform w-max">Join Network <i class="ph-bold ph-arrow-right"></i></a>
                        </div>

                    </div>

                    <!-- Trusted Bar -->
                    <div class="mt-20 border-t border-surface-border pt-10 text-center">
                        <p class="text-sm font-medium text-gray-500 uppercase tracking-widest mb-8">Orchestrating Latin American Infrastructure</p>
                        <div class="flex flex-wrap items-center justify-center gap-12 opacity-50 grayscale">
                            <i class="ph ph-buildings text-4xl"></i>
                            <i class="ph ph-factory text-4xl"></i>
                            <i class="ph ph-airplane-tilt text-4xl"></i>
                            <i class="ph ph-truck text-4xl"></i>
                            <i class="ph ph-shopping-bag text-4xl"></i>
                        </div>
                    </div>

                </div>
            </section>